Вот мой код для захвата видеопотока и кодирования в 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 мс.