时间戳

首页 > 解决方案 > 是否可以使用媒体源扩展显示来自网络摄像头的视频块？

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

问题描述

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

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

 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

我究竟做错了什么？

标签： javascriptmedia-source

解决方案

@Kaiido 评论是正确的

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

利用：

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

反而

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

推荐阅读