Прикрепите изображение к движущемуся элементу в видео с помощью холста

Как я могу создать видео с использованием холста HTML5, где я могу прикрепить лицо человека к движущемуся элементу видео с помощью хроматического ключа. Чтобы лицо двигалось вместе с этим элементом.

Наткнулся на этот веб-сайт JibJab, который использует это.

Просто хочу знать, как это можно сделать с помощью холста HTML5.

Согласно моим исследованиям, мы можем разместить видео на видео или даже на статичном изображении (http://www.xindustry.com/html5greenscreen/). Но как переместить статическое изображение - это то, что я ищу.

Также нашел это решение, но оно создаст прозрачный элемент в видео и не прикрепит к нему изображение.


person karan3112    schedule 06.01.2017    source источник
comment
Для известных видео вы можете сохранить все позиции на основе currentTime вашего видео, например, в формате json ("myPos":{"12":{"x":40,"y":30}, 13:{"x": 43, "y":32}...}, затем просто получить из него позицию: var pos = myPos[~~vid.currentTime]; drawImage(yourFace, pos.x, pos.y) поверх видеокадра (нарисовано благодаря drawImage(yourVid, 0,0)). Для неизвестных видео вы можете В вашем видео должен быть какой-то маркер, который вы должны будете прочитать из data getImageData().   -  person Kaiido    schedule 06.01.2017
comment
@Kaiido да, в моем видео есть цветной маркер. Я могу обнаружить пиксель цветности, запустив цикл. Но могу ли я получить координаты этого маркера в кадре, чтобы я мог динамически устанавливать положение вместо статического json?   -  person karan3112    schedule 06.01.2017
comment
Итак, что вам нужно, это преобразовать индекс imageData в координаты x, y? var px = i / 4; var y = Math.floor(px / canvas.width); var x = Math.round(((px/canvas.width) - y ) * canvas.width); А вот запускать getImageData по видео действительно не то, что я бы посоветовал никому, тем более на неизвестных конфигах клиента. Лучше сделать это один раз и сохранить позиции в json.   -  person Kaiido    schedule 06.01.2017
comment
@Кайидо, да, понял. Попробую эту логику. Спасибо за вашу помощь.   -  person karan3112    schedule 06.01.2017
comment
@ karan3112 Это реализовано? Я пытаюсь сделать что-то похожее на джибджаб.   -  person Shahil M    schedule 03.08.2017
comment
@Shahil Нет. Я пытался реализовать это, и это было близко к этому маркеру. Но не доделал.   -  person karan3112    schedule 03.08.2017
comment
@ karan3112 есть идеи о реализации? Мне нужно добавить изображение лица в существующее видео.   -  person Shahil M    schedule 03.08.2017
comment
@Shahil Нет, но ты можешь попробовать логику Кайидо.   -  person karan3112    schedule 03.08.2017