Доступ к пикселям видеопотока с веб-камеры (JS / WebRTC / MediaStreamTrack) - PullRequest
Новая
       15

Доступ к пикселям видеопотока с веб-камеры (JS / WebRTC / MediaStreamTrack)

1 голос
/ 06 марта 2019

Для научного применения мне нужно выполнить живую обработку видеопотока, полученного с веб-камеры в JavaScript.

WebRTC упрощает отображение живого потока на веб-сайте, а использование <canvas> также позволяет делать и обрабатывать скриншоты .

Мне нужно отслеживать яркость видеоизображения. Поэтому мне нужен поток из нескольких пикселей (их значений RGB) с течением времени. Кажется очень неэффективным копировать <video> в <canvas> 30 раз в секунду только для того, чтобы иметь неподвижное изображение и анализировать несколько пикселей ...

Есть ли какой-либо способ получить более прямой доступ к видеоконтенту MediaStreamTrack?

1 Ответ

2 голосов
/ 07 марта 2019

Есть ли какой-либо способ получить более прямой доступ к видеоконтенту MediaStreamTrack?

Не в режиме реального времени, нет.W3C обсуждал добавление такого API в рабочих, но сегодня его не существует.

API-интерфейс MediaRecorder подходит близко: он может давать вам большие двоичные данные с интервалом в несколько миллисекунд (см. start (timeslice) ), но не в режиме реального времени.

Кажется, это очень неэффективно ...

В современных браузерах есть фоновые потоки для выполнения тяжелой работыкак уменьшение масштаба, поэтому я бы предостерег от преждевременной оптимизации.В общем, вещи замедляются только тогда, когда биты массово открываются для основного потока JavaScript.Поэтому я меньше беспокоюсь о разрешении вашей камеры, чем о размере вашего холста.

Если вам нужно всего несколько пикселей для яркости, сделайте ваш холст по-настоящему крошечным.Накладные расходы должны быть низкими. Например, : 

video.srcObject = await navigator.mediaDevices.getUserMedia({video: true});
await new Promise(r => video.onloadedmetadata = r);
const ctx = canvas.getContext('2d');
requestAnimationFrame(function loop() {
  ctx.drawImage(video, 0, 0, 16, 12);
  requestAnimationFrame(loop);
});

<canvas id="canvas" width="16" height="12"></canvas>

Если перегрузка все еще остается проблемой, я бы снизил частоту кадров.

...