Есть ли способ отправить видеоданные из тега video / MediaStream в OffscreenCanvas? - PullRequest
Новая
       120

Есть ли способ отправить видеоданные из тега video / MediaStream в OffscreenCanvas?

0 голосов
/ 25 июня 2019

По сути, я хочу эффективно выполнять этот код: 


const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

const draw = () => {
  context.drawImage(video, 0, 0);
  requestAnimationFrame(draw);
}

video.onplay = () => {
  requestAnimationFrame(draw);
}

только с использованием закадрового холста.Я могу отправлять изображения поверх сообщений работнику, на котором включен экранный холст, но не видео, поскольку он напрямую связан с HTMLElement.Есть ли в настоящее время способ каким-то образом по-прежнему визуализировать видеоданные или MediaStream на неэкранном холсте?

1 Ответ

3 голосов
/ 25 июня 2019

Кадры видео можно отправлять в OffscreenCanvas в Web Worker, изменив сценарий со следующими изменениями: 

const worker = new Worker('my-worker.js');
const video = document.getElementById('video');
const stream = video.captureStream();
const [track] = stream.getVideoTracks();
const imageCapture = new ImageCapture(track);
const canvas = document.getElementById('canvas');
const offscreen = canvas.transferControlToOffscreen();

worker.postMessage({ offscreen }, [offscreen]);

const draw = () => {
  imageCapture.grabFrame().then(imageBitmap => {
    worker.postMessage({ imageBitmap }, [imageBitmap]);
  });

  requestAnimationFrame(draw);
};

video.onplay = () => {
  requestAnimationFrame(draw);
};

my-worker.js

let canvas;
let context;

addEventListener('message', event => {
  if (event.data.offscreen) {
    canvas = event.data.offscreen;
    context = canvas.getContext('2d');
  } else if (event.data.imageBitmap && context) {
    context.drawImage(event.data.imageBitmap, 0, 0);
    // do something with frame
  }
});

Ссылки

...