将捕获的视频块渲染到视频画布

我有这个代码每秒从相机/音频中捕获/记录视频


$(function () {

    var handleSuccess = function(stream) {


        var player = document.querySelector("#vid-user");

        var guestPlayer = document.querySelector("#vid-guest");

        player.srcObject = stream;


        console.log("Starting media recording")

        var options = {mimeType: 'video/webm'};

        var mediaRecorder = new MediaRecorder(stream, options);


        mediaRecorder.ondataavailable = function(e) {

            console.log("Data available")

            if (e.data.size > 0) {

                // How do I display the captured video to the guestPlayer ?

            }

        }


        mediaRecorder.start(1000);

    };

    navigator.mediaDevices.getUserMedia({ audio: true, video: true })

        .then(handleSuccess)

})

这里的问题是如何将捕获的视频显示给guestPlayer我正在这样做以测试捕获的数据,因为该 webm 块e.data将被上传到服务器。


e.data包含_


data: Blob

size: 26009

type: "video/webm"

__proto__: Blob

size: (...)

type: (...)

slice: ƒ slice()

stream: ƒ stream()

text: ƒ text()

arrayBuffer: ƒ arrayBuffer()

constructor: ƒ Blob()

Symbol(Symbol.toStringTag): "Blob"

get size: ƒ size()

get type: ƒ type()

__proto__: Object


阿晨1998
浏览 94回答 1
1回答

桃花长相依

就这么简单:video.src = URL.createObjectURL(e.data);https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL请务必在使用URL.revokeObjectURL()完该 blob 后使用。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript