Создание веб-блоб видео из серии ArrayBuffer - PullRequest
0 голосов
/ 19 апреля 2020

Вот мой код для захвата видеопотока и кодирования в 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 как вы можете создать веб-видео из этого массива буфера? Моя цель - создавать видео каждые 500 мс.

...