未捕获类型错误：无法执行“appendBuffer”在“SourceBuffer”上：重载解析失败

Question

我想用 vanilla js 和 websocket 制作视频流。我可以轻松创建媒体记录器并以 ArrayBuffer 形式获取用户视频数据并发送它，但问题是由于此错误我无法附加 SourceBuffer

这是我在 websocket.onmessage 期间获取 arrayBuffer 并附加 SourceBuffer 的代码。追加时发生错误。

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);
    }
    
}

这就是我在这里发送数组缓冲区的方式，一切都运行良好。

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);
    }

更新：

问题是因为我直接传递套接字数据而引起的，我应该使用buf.data。

新问题发生后：

Answer 1

发生问题是因为我直接传递套接字数据（是 buf）。

解决方案：我需要使用buf.data来访问要附加的实际字节）。