О возможности обработки HTML5 видео в реальном времени

Динозавры медленно вымирают

В связи с адаптацией HTML5 и ускорением js-движков внезапно стало возможно обрабатывать видеопоток в реальном времени в браузере.

Для получения видеофреймов достаточно воспользоваться функцией drawImage, позволяющей отрисовать кадр в canvas:

function draw() {
  if (window.requestAnimationFrame) 
    window.requestAnimationFrame(draw)
  var object = document.getElementById('video')
  var w = object.width
  var h = object.height
  context.drawImage(object, 0, 0, w, h)
  var d = context.getImageData(0, 0, w, h)
  for (y = 0; y < h; y++) {
    for (x = 0; x < w; x++) {
      for (j = 0; j < 3; j++) {
        var v = d.data[(y*w + x)*4 + j]
        /* place processing code here */
        d.data[(y*w + x)*4 + j] = v
      }
      d.data[(y*w + x)*4 + 3] = 255
    }
  }    
  context.putImageData(d, 0, 0)
}

Маленькое психоделическое демо. У меня обработка одного кадра занимает ~ 10 мс.

См. также широко известное в узких кругах демо на MDN с фильтром Chroma Key. У меня оно, кстати, не работает.

Мы можем производить цветокоррекцию, статистический анализ, пространственные и временные преобразования, совмещение нескольких видео в одно и многое другое, на что хватит скромных возможностей javascript (пока у нас нет повсеместной поддержки WebGL).

Вот так вот. Всем плавного риалтайма.

P.S. Интересующимся современным вебом рекомендую книжку по хакингу HTML5: Web Sockets, Local Storage, CORS и многое другое в практической форме.

 

shitpoet@gmail.com