将捕获的视频块渲染到视频 Canvas

Question

我有这段代码可以每秒从 camera/audio 捕获/记录视频

$(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

Answer 1

就这么简单：

video.src = URL.createObjectURL(e.data);

https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL

请务必在使用完该 blob 后使用 URL.revokeObjectURL()。

将捕获的视频块渲染到视频 Canvas

Render captured video chunk to Video Canvas

javascript

html5-video