从一系列ArrayBuffer创建WebM视频Blob

时间:2020-04-19 11:31:13

标签: javascript html5-canvas html5-video webm

这是我的代码,用于捕获视频流并将其编码为webm(使用https://github.com/GoogleChromeLabs/webm-wasm):

async function captureWebm() {
    console.log("Started webm capture")
    worker.postMessage("./webm-wasm.wasm");
    await nextEvent(worker, "message");
    console.log('webm worker loaded')
    worker.postMessage({
        width: w,
        height: h,
        timebaseNum: 1,
        timebaseDen: 30,
        bitrate: 1500,
        realtime: true
    });
    let encodeWebm = async function() {
        mCtx.drawImage(player, 0, 0, w, h);
        const imageData = mCtx.getImageData(0, 0, w, h);
        const buffer = imageData.data.buffer;
        worker.postMessage(buffer, [buffer]);
        requestAnimationFrame(encodeWebm);
    };
    requestAnimationFrame(encodeWebm);
}

这是听众:

let queue = [];
worker.onmessage = ev => {
    if (!ev.data) {
        console.log('End of stream');
    }
    if (ev.data instanceof ArrayBuffer && ev.data.byteLength !== undefined) {
        const arrayBuffer = ev.data;
        queue.push(arrayBuffer);
    }
};

最后制作视频:

setInterval(function () {
   let webm = buildWebmVideoFromArrayOfBuffer();   
   queue = [];
   socket.send(webm);      
}, 500);

在不使用MediaSource的情况下,如何从此缓冲区数组构建webm视频?我的目标是每500毫秒创建一个webm视频。

0 个答案:

没有答案