Обработка видео на холсте

Обработка видео на холсте.

Как и в случае с анимацией, не существует специального метода для отображения видео на элементе холста. Единственный способ воспроизвести видео — поочередно считать все кадры из элемента <video> и нарисовать их на холсте как отдельные изображения, используя drawImage(). Таким образом, для обработки видео нужно всего лишь скомбинировать техники, которые мы изучили ранее.

Давайте сначала построим новый шаблон, а затем напишем код, чтобы вывести наше видео на холст.

Листинг 7.28. Шаблон для видео на холсте

<!DOCTYPE html>

<html lang="ru">

<head>

<style>

.boxes{ display: inline-block; margin: 10px; padding: 5px;

Border: 1px solid #999999;

}

</style>

<script src="canvasvideo. js"></script>

</head>

<body>

<section class="boxes">

<video id="media" width="483" height="272">

<source src="http://www.minkbooks.com/content/trailer2.mp4"> <source src="http://www.minkbooks.com/content/trailer2.ogg"> </video>

</section>

<section class="boxes">

<canvas id="canvas" width="483" height="272">

В вашем браузере элемент canvas не поддерживается </canvas>

</section>

</body>

</html>

В шаблоне из листинга 7.28 присутствуют два специальных компонента: элемент <video> и элемент <canvas>. Благодаря их комбинации мы сможем обработать видео и вывести его на холст.

Кроме того, шаблон включает в себя встроенные CSS-стили для блоков и ссылается на новый JavaScript-файл с именем canvasvideo. js, содержащий следующий код.

Листинг 7.29. Преобразование цветного видео в черно-белое

Function initiate(){

Var elem=document. getElementById(‘canvas’);

Canvas=elem. getContext(’2d’);

Video=document. getElementById(‘media’);

Video. addEventListener(‘click’, push, false);

}

Function push(){

If(!video. paused && !video. ended){ video. pause(); window. clearlnterval(loop);

}else{

Video. play();

Loop=setInterval(processFrames, 33);

Function processFrames(){ canvas. drawImage(video,0,0);

Var info=canvas. getImageData(0,0,483,272); var pos; var gray;

For(x=0;x<=483;x++){

For(y=0;y<=272;y++){

Pos=(info. width*4*y)+(x*4); gray=parseInt(info. data[pos]*0.2989 + info. data[pos+1]*0.5870 + +info. data[pos+2]*0.1140); info. data[pos]=gray; info. data[pos+1]=gray; info. data[pos+2]=gray;

}

}

Canvas. putImageData(info,0,0);

}

Window. addEventListener("load", initiate, false);

Создайте новый HTML-файл с кодом из листинга 7.28 и JavaScript-файл под названием canvasvideo. js с кодом из листинга 7.29. Для запуска видео щелкните в левом поле на экране.

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

Давайте рассмотрим код в листинге 7.29. Напомню, что для обработки видео на холсте мы всего лишь комбинируем изученные ранее примеры кода и приемы. В этом коде мы используем функцию push() из главы 5, для того чтобы запускать и останавливать видео по щелчку на элементе. Мы также создали функцию под названием processFrames, содержащую код из листинга 7.25 (единственное различие заключается в том, что вместо инвертирования изображения мы с помощью определенной формулы превращаем все цвета в оттенки серого).

Функция push() выполняет две задачи: запускает или останавливает видео, а также инициирует интервал, который каждые 33 мс вызывает функцию processFrames(). Эта функция считывает кадр из элемента <video> и выводит его на холст посредством инструкции drawImage(video, 0, 0). Затем данные холста извлекаются методом getImageData(), и каждый пиксел этого кадра обрабатывается в двойном цикле.

Мы применяем один из самых распространенных способов превращения цветов в оттенки серого, описание которого несложно найти в Интернете. Формула выглядит так: красный х 0,2989 + зеленый х 0,587 + синий х 0,114. Результат вычисления присваивается всем цветовым компонентам (красному, зеленому и синему) каждого пиксела. В коде для этого используется переменная gray.

Завершается процесс выводом кадра на холст в методе putImageData().

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *