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

Question

我有这个代码每秒从相机/音频中捕获/记录视频$(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: Blobsize: 26009type: "video/webm"__proto__: Blobsize: (...)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

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