Grabar y compartir audio
Presentación
Firebase Auth
Cloud Firestore
Cloud Storage
Cloud Functions
Curso Firebase para Web se encuentra en desarrollo. Vuelve pronto para encontrar nuevas lecciones.
- 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
uploadMessageFile
para 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",
});
}
Código inicial
¿Tienes alguna pregunta sobre esta lección de Curso Firebase para Web?
Resuelve todas tus dudas sobre Firebase en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.
Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.