appendBuffer () не добавляется в sourceBuffer - PullRequest
Новая
       117

appendBuffer () не добавляется в sourceBuffer

0 голосов
/ 08 июля 2020

Я получаю fetch() видео из API.

response.body - это читаемый поток. Поэтому я прочитал его в reader.

Затем все фрагменты (value) помещаются в массив фрагментов (chunks.push(value)).

Затем массив фрагментов преобразуется в arrayBuffer (let buffer = await 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>
...