Javascript appendBuffer（）未追加到sourceBuffer中_Javascript_Stream_Fetch_Buffer_Media Source

Javascript appendBuffer（）未追加到sourceBuffer中

javascript stream

Javascript appendBuffer（）未追加到sourceBuffer中,javascript,stream,fetch,buffer,media-source,Javascript,Stream,Fetch,Buffer,Media Source,我正在从API获取视频 response.body是一个可读流。所以我把它读进了阅读器然后将所有区块（value）推入区块数组（chunks.push（value））然后将块数组转换为arrayBuffer（let buffer=wait blob.arrayBuffer（）），因为blob不能附加到sourceBuffer 以上所有步骤都正常工作！我唯一的问题是将缓冲区追加到sourceBuffer（sourceBuffer.appendBuffer（buffer））中控制台不会弹出任何

我正在从API获取视频

response.body

是一个可读流。所以我把它读进了

阅读器
然后将所有区块（value
）推入区块数组（chunks.push（value）
）
然后将块数组转换为arrayBuffer（let buffer=wait blob.arrayBuffer（）
），因为blob不能附加到sourceBuffer
以上所有步骤都正常工作！我唯一的问题是将缓冲区追加到sourceBuffer（sourceBuffer.appendBuffer（buffer）
）中
控制台不会弹出任何错误，但sourceBuffer不会更新。它是空的
有人有什么想法吗，发生了什么事
非常感谢
<body>
<video id="test-video-api">
</video>
<script>

    const fetchUrl = "https://myserver/api/video?fuid=12345";
    const videoTag = document.getElementById("test-video-api");

    function getVideo(){
        if (window.MediaSource) {
            var mediaSource = new MediaSource();
            videoTag.src = URL.createObjectURL(mediaSource);
            mediaSource.addEventListener('sourceopen', sourceOpen);
        } else {
            console.log("The Media Source Extensions API is not supported.")
        }

        async function sourceOpen(e) {
            URL.revokeObjectURL(videoTag.src);
            const mimeCodec = 'video/mp4; codecs="avc1.4d400d,mp4a.40.2"; profiles="isom,iso2,avc1,mp41"';
            var mediaSource = e.target;
            var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
            let chunks = [];
            let response = await fetch(fetchUrl, {method: "GET", credentials: "include"});
            const reader = response.body.getReader();
            while (true){
                const {done, value} = await reader.read();
                chunks.push(value);
                if(done){
                    let blob = new Blob(chunks);
                    let buffer = await blob.arrayBuffer();
                    sourceBuffer.appendBuffer(buffer);
                    break
                }
            }
        }
    }

    getVideo()

</script>
</body>


常量fetchUrl=”https://myserver/api/video?fuid=12345";
const videoTag=document.getElementById（“测试视频api”）；
函数getVideo（）{
if（window.MediaSource）{
var mediaSource=新的mediaSource（）；
videoTag.src=URL.createObjectURL（mediaSource）；
mediaSource.addEventListener（'sourceopen'，sourceopen）；
}否则{
log（“不支持媒体源扩展API”）
}
异步函数sourceOpen（e）{
revokeObjectURL（videoTag.src）；
const mimeCodec='video/mp4；codecs=“avc1.4d400d，mp4a.40.2”；profiles=“isom，iso2，avc1，mp41”；
var mediaSource=e.target；
var sourceBuffer=mediaSource.addSourceBuffer（mimeCodec）；
让chunks=[]；
let response=wait fetch（fetchUrl，{method:“GET”，凭证：“include”}）；
const reader=response.body.getReader（）；
while（true）{
const{done，value}=wait reader.read（）；
推送（值）；
如果（完成）{
设blob=新blob（块）；
让buffer=wait blob.arrayBuffer（）；
sourceBuffer.appendBuffer（buffer）；
打破
}
}
}
}
getVideo（）
我会运行页面并检查chrome://media-internals/
查看任何可疑日志/错误