⚡️Flipping the image when accessing the laptop camera with getUserMediaFriday, July 19th, 2013 at 9:22 pm
This is one of my bugbears: when I see demos or tools that access the camera with getUserMedia and the image is “the wrong way around”. Say I sit in front of this computer, and lean slightly to my left. If you just use getUserMedia and connect the stream to a video element, this is what you get:
That’s not right, I would expect the video to look like this:
This is very simple to achieve. First of all, you need to flip the video element with CSS:
Of course, this is not enough, as the CSS transformation doesn’t change the pixels of the video. In order to flip the video pixels around when you access them with CANVAS – for example to add filter effects or generate animated GIFs you also need to transform the context:
// ctx is the plotting canvas’ context
// w is the width of the canvas
Doing this, makes me happy. Please do this.