The photo taken by my webcam isn't the same as previewed

Question

I'm having a trouble while using my camera inside a webpage. The problem is that the previewed photo is not the same as the photo that is actually taken.

Here is a image showing the issue (the picture on the left is the previewed one and the right one is the picture actually taken) : And here is a jsFiddle with my code .

I don't really know where this issue can come from, maybe this line context.drawImage(video, 0, 0, 640, 480); ?

Also I'd like to add that the issue is the same on a few computers, phones and tablets I had under hand (By the way do we say under hand or on hand ? )

It's the first time i'm using a webcam inside my apps so I'm kinda lost, any help would be greatly appreciated :)

Thanks in advance and have a great day !

Answer 1

Finally a collegue and I manage to get it working, we had to change the sizes of the two div so that they match the same dimensions.