Question

我正在寻找一种从网络摄像头流创建视频块并将其输入Media Source Extension的方法。

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

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

发生的情况是，生成了一些带有视频内容的ArrayBuffer，但未显示它们。控制台显示错误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

我在做什么错了？

Answer 1

@Kaiido评论正确

是的，可以，您的问题可能是不支持您使用的编解码器：jsfiddle.net/dcowst62投票关闭有错字。

使用：

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

代替

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

是否可以使用Media Source Extension显示来自网络摄像头的视频块？

1 个答案: