是否可以使用媒体源扩展显示来自网络摄像头的视频块？答案

【问题标题】：Is it possible to display video chunks from the webcam using Media Source Extension?是否可以使用媒体源扩展显示来自网络摄像头的视频块？
【发布时间】：2018-10-16 12:55:52
【问题描述】：

我正在寻找一种方法来从网络摄像头流中创建视频块并将它们馈送到媒体源扩展中。

我曾尝试使用此代码，但它不起作用：

 var mediaConstraints = {
    audio: true,
    video: true
};

navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);


function onMediaSuccess(stream) {
    var multiStreamRecorder = new MultiStreamRecorder(stream);
    multiStreamRecorder.mimeType = 'video/webm; codecs="opus, vp09.00.10.08"';
    multiStreamRecorder.ondataavailable = function (blob) {
        // blobs.audio
        // blobs.video

        console.log('data available');
        var fileReader = new FileReader();
        fileReader.onload = function(event) {
            var arrayBuffer = event.target.result;
            console.log(arrayBuffer);
            console.log('appending buffer');
            sourceBuffer2.appendBuffer(arrayBuffer);
            //sourceBuffer2.appendBuffer(blob);
            if (!playing)
            {
                playing = true;
                video2.play();
            }
        };
        fileReader.readAsArrayBuffer(blob);

    };
    multiStreamRecorder.start(3000);
}

function onMediaError(e) {
    console.error('media error', e);
}

var ms2 = new MediaSource();

var video2 = document.getElementById('video2');
video2.src = window.URL.createObjectURL(ms2);
//video2.crossOrigin = 'anonymous';
var sourceBuffer2;
ms2.addEventListener('sourceopen', function(e) {
sourceBuffer2 = ms2.addSourceBuffer('video/webm; codecs="opus, vp09.00.10.08"');
    //sourceBuffer2.appendBuffer(arrayBuffer);

}, false);

ms2.addEventListener('updateend', function(e) {
    console.log('update');
    sourceBuffer2.appendBuffer(arrayBuffer);
}, false);

会发生一些带有视频内容的 ArrayBuffers 生成但没有显示。控制台显示错误Uncaught (in promise) DOMException: Failed to load because no supported source was found.，然后显示Uncaught DOMException: Failed to execute 'appendBuffer' on 'SourceBuffer': This SourceBuffer has been removed from the parent media source. at FileReader.fileReader.onload

我做错了什么？

【问题讨论】：

是的，您可以，您的问题可能是您使用的编解码器不受支持：jsfiddle.net/dcowst62 Voting to close as typo.

标签： javascript media-source

【解决方案1】：

@Kaiido 评论正确

是的，您可以，您的问题可能是您使用的编解码器不受支持：jsfiddle.net/dcowst62 Voting to close as typo.

用途：

addSourceBuffer('video/webm; codecs="vp8"');

改为

addSourceBuffer('video/webm; codecs="opus, vp09.00.10.08"');

【讨论】：