Как и в случае с анимацией, не существует специального метода для отображения видео на элементе холста. Единственный способ воспроизвести видео — поочередно считать все кадры из элемента <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 всегда необходимо особое внимание обращать на быстродействие.
Добавить комментарий