Quiero hacer transmisión de video con vanilla js y websocket. Puedo crear fácilmente una grabadora de medios y obtener datos de video del usuario como ArrayBuffer y enviarlos, pero el problema es que no pude agregar SourceBuffer debido a este error

Este es mi código para obtener arrayBuffer durante websocket.onmessage y agregar SourceBuffer. El error ocurre durante la adición.

 const video2 = document.getElementById('video2') const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; if ('MediaSource'in window && MediaSource.isTypeSupported(mimeCodec)) { var mediaSource = new MediaSource(); mediaSource.addEventListener('sourceopen', sourceOpen); video2.src = URL.createObjectURL(mediaSource); console.log("mediaSource.readyState"); // closed } else { console.error('Unsupported MIME type or codec: ', mimeCodec); } function sourceOpen(_) { if (MediaSource.isTypeSupported(mimeCodec)) { console.log("yes it is supported") } const mediaSource = this; const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec); sourceBuffer.mode = "sequence"; streamsocket.onmessage = (buf) => { sourceBuffer.addEventListener('updateend', function(_) { mediaSource.endOfStream(); video2.play(); }); sourceBuffer.appendBuffer(buf); } }

Así es como estoy enviando un búfer de matriz aquí, todo funciona muy bien.

 static registerStream = (userdata , stream, streamsocket) => { const mediaRecorder = new MediaRecorder(stream) let countUploadChunk = 0 console.log(stream) mediaRecorder.ondataavailable = (data) => { Streaming.sendData(data.data, streamsocket, userdata, countUploadChunk) countUploadChunk++ } mediaRecorder.start() setInterval(() => { mediaRecorder.requestData() }, 500) } static sendData = async (data, streamsocket, userdata, chunkNumber) =>{ let reader = new FileReader(); let rawData = new ArrayBuffer(); reader.loadend = function() {} reader.onload = function(e) { rawData = e.target.result; streamsocket.send(rawData) } reader.readAsArrayBuffer(data); }

Actualizar:

Problema causado porque estaba pasando datos de socket directamente. Debería usar buf.data .

Después de que sucedió ese nuevo problema: