0

How can I create a video using HTML5 canvas where I can attach a persons face on a moving element in a video using chroma key. So that the face moves along with that element.

Came across this website JibJab which makes use of this.

Just want to know how this can be done using HTML5 canvas.

As per my research we can place a video on a video or even a static image (http://www.xindustry.com/html5greenscreen/). But how to move a static image is what I'm looking for.

Also found this solution but it will create transparent element in the video and not attach an image to it.

Community
  • 1
  • 1
karan3112
  • 1,867
  • 14
  • 20
  • For known videos, you could store all the positions based on the `currentTime` of your video,e.g in a json (`"myPos":{"12":{"x":40,"y":30}, 13:{"x": 43, "y":32}...}` then just get the position from it : `var pos = myPos[~~vid.currentTime]; drawImage(yourFace, pos.x, pos.y)` over the video frame (drawn thanks to `drawImage(yourVid, 0,0)`). For unknown videos, you'll have to have some sort of a marker in your video that you'll have to read from `getImageData()`'s `data`. – Kaiido Jan 06 '17 at 07:42
  • @Kaiido yes i have a croma marker in my video. I can detect the chroma pixel by running a loop. But can i get the coordinates of that marker in a frame so i can set the position dynamically instead of the static json? – karan3112 Jan 06 '17 at 08:45
  • So what you need is to convert the imageData's index to x,y coordinates ? `var px = i / 4; var y = Math.floor(px / canvas.width); var x = Math.round(((px/canvas.width) - y ) * canvas.width);` But running `getImageData` over a video is really not somethign I would advise to anyone, moreover on unknown client configs. You would be better doing it once, and store the positions in a json. – Kaiido Jan 06 '17 at 09:09
  • @Kaiido yes got your point. Will give this logic a try. Thanks for your help. – karan3112 Jan 06 '17 at 09:34
  • @karan3112 Is this implemented ? I'm trying similar to jibjab. – Shahil M Aug 03 '17 at 07:27
  • @Shahil No. I had tried to implement this and it was close to that marker. But didn't complete it. – karan3112 Aug 03 '17 at 09:07
  • @karan3112 any idea about the implementation ? I need to add a face image to existing video. – Shahil M Aug 03 '17 at 09:33
  • @Shahil No but you can give Kaiido's logic a try. – karan3112 Aug 03 '17 at 09:37

0 Answers0