Как удалить зеленый фон видео и вставить это видео на фоне html5-сайта, используя только html5 и javascript?

Question

Так что я делаю сайт, и у меня есть потрясающее видео звездных войн с зеленым фоном. И я хочу удалить зеленый фон (цветной ключ) и вставить видео поверх фона сайта html5.

Я искал в течение нескольких часов (не jokking), и я могу найти только сложный код, который использует изображения ...

Так что я хотел бы заменить зеленый видео фон с ничего, а затем вставить его на фоне веб-сайта.

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

Answer 1

Начальная информация:video element может быть источником изображения для холста html5. Это означает, что кадр видео можно нарисовать (и манипулировать) холстом.

Обзор: Метод context.getImageData получит данные о пикселях RGBA в массиве. После изменения данных пикселя массива context.putImageData вернет измененные пиксели на холст.

A Plan Используйте CSS для размещения холста html5 над фоном сайта. Используйте этот холст для рисования видеокадров над сайтом (зеленоватые пиксели видео сделаны прозрачными, что показывает фон сайта).

(некоторые сборки & обучения требуется с вашей стороны):

Расположите холст элемент html5 покрытия фона сайта.

Внутри время цикла (requestAnimationFrame):

1. Очистить холст: context.clearRect,
2. Draw видеокадра на холст: context.drawImage(video,0,0),
3. Получить данные пикселей из холста: context.getImageData,
4. Проверьте каждый пиксель на «зеленый-ish-ness»: if(green>220 && red<20 && blue<20),
5. Если пиксель зеленоватый, сделайте его прозрачным: (alpha=0),
6. Верните измененные пиксели на холст: context.putImageData,
7. Повторите на # 1, пока видео не закончится.

---

Ссылки, чтобы помочь с вашего обучения

StackOverflow перед пост о # 2: Put the video tag on the Canvas tag

Stackoverflow до сообщение о # 3-6: Looping through pixels in an image