Especialista en tecnologías Web. Me dedico a enseñar desarrollo Web moderno a cualquier persona (físicamente en clase y a través de Internet) desde una perspectiva holística: teniendo en cuenta las competencias técnicas necesarias, junto a las habilidades personales o soft skills. Tienes más información en mi Web.
Curso Firebase para Web
Grabar y compartir audio
- Primero necesitaremos un nuevo modal que permita grabar y revisar el audio a adjuntar en el mensaje. Lo llamaremos
RecordModalComponent. - Ahora debemos ajustar acción
uploadMessageFilepara dar cabida al audio.
async uploadMessageFile({ rootGetters }, { roomID, file, type }) {
...
const ext = type === "photo" ? "jpg" : "wav";
const uploadPhoto = () => {
let fileName = `rooms/${roomID}/messages/${userUID}-${timestamp}.${ext}`;
return storage.ref(fileName).put(file);
};
...
}
- Acto seguido debemos añador botón, método y propiedad audio en el modelo de
ViewRoom.
async recordAudio() {
try {
this.audio = await this.$store.dispatch("utils/requestConfirmation", {
props: {
message: "Record your voice 🎤"
},
component: "RecordModal"
});
} catch (error) {
this.$toast.error(error.message);
}
},
- Por último podemos completar el método createMessage con el nuevo posible audio.
if (this.audio) {
this.audioURL = await this.$store.dispatch(
"messages/uploadMessageFile",
{
roomID: this.id,
file: this.audio,
type: "audio"
}
);
}
Descarga la chuleta de Vue 3
Para tener todas las novedades de Vue 3 al alcance de la mano 🔥️
DESCARGA GRATIS LA CHULETA AHORA 💾Presentación
Firebase Auth
Cloud Firestore 🔥
Cloud Storage 🗄
Cloud Functions ☁
No te pierdas ninguna novedad
Participa en la Comunidad Escuela Vue
