Estoy usando MediaRecorder para grabar fragmentos de datos de audio de WebM. Estos trozos me los dan como gotas. Estoy tratando de transformarlos en cadenas base64 y enviarlos por cable. También aceptaría el concepto de transformarlos en anything
y enviarlos por cable.
Aquí está mi código para la interfaz de usuario
private attachRecorderDataAvailableListener(): void { if (!this.mediaRecorder) { return; } const blobtoBase64 = (blob: Blob): Promise<string> => new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve(reader.result as string); reader.readAsDataURL(blob); }); const base64ToBlob = (dataURI: string) => { // convert base64 to raw binary data held in a string // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this const byteString = atob(dataURI.split(",")[1]); // separate out the mime component const mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0]; // write the bytes of the string to an ArrayBuffer const ab = new ArrayBuffer(byteString.length); // create a view into the buffer const ia = new Uint8Array(ab); // set the bytes of the buffer to the correct values for (let i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } // write the ArrayBuffer to a blob, and you're done const blob = new Blob([ab], { type: "audio/webm;codecs=opus" }); return blob; }; this.mediaRecorder.addEventListener( "dataavailable", async (event: BlobEvent) => { console.log("Media Recorder Blob: ", event.data); const base64Str = await blobtoBase64(event.data); const dt = new Date().getTime(); saveAs(event.data, `original-${dt}.webm`); saveAs(base64ToBlob(base64Str), `modified-${dt}.webm`); if (event.data.size > 0) { const input: any = { data: await event.data.text(), }; const decoder = new TextDecoder("utf-8"); await store.dispatch( "WebsocketModule/emitMeetingSocketEvent", { eventType: MEETING_WEBSOCKET_EVENT_TYPE.TRANSCRIPTION_AUDIO_RECEIVED, eventPayload: input, }, { root: true, } ); } } ); }
El problema es que el blob no se serializa correctamente. Cuando abro el archivo original en VLC, obtengo un breve clip de mi audio. Cuando abro el modificado (que se ha traducido de un lado a otro), aparece un archivo de audio que no se puede reproducir debido a un "error de desmultiplicación". Esto es consistente con lo que sucede en mi backend.
¿Alguien sabe cómo serializar correctamente este blob para poder enviarlo a través de un websocket?
Podría ser un idiota que no leyó lo que copié/pegué correctamente. Dame un segundo
EDITAR
Sí, soy un idiota. Necesito llamar a buscar el URI de datos para serializarlo correctamente.