首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >未登录的TypeError:在‘SourceBuffer’上执行'appendBuffer‘失败:重载解析失败

未登录的TypeError:在‘SourceBuffer’上执行'appendBuffer‘失败:重载解析失败
EN

Stack Overflow用户
提问于 2022-03-15 20:41:39
回答 1查看 843关注 0票数 0

我想让视频流与香草js和网络套接字。我可以轻松地创建媒体记录器,并以ArrayBuffer的形式获取用户视频数据并将其发送出去,但问题是,由于这个错误,我无法添加SourceBuffer

这是我在websocket.onmessage期间获取websocket.onmessage并附加SourceBuffer的代码。错误发生在附加过程中。

代码语言:javascript
运行
复制
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);
    }
    
}

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

代码语言:javascript
运行
复制
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

在那个新问题发生之后:

EN

回答 1

Stack Overflow用户

发布于 2022-03-16 09:40:51

出现问题是因为我直接传递套接字数据(is buf)。

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/71488781

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档