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",
});
}
El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.
¿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.