Horizontally flipping .getUserMedia's Webcam image stream

javascript jquery webcam
user8749260 picture user8749260 · Dec 10, 2017 · Viewed 11.1k times · Source

So I have been messing with this page: https://tutorialzine.github.io/pwa-photobooth/

Basically what it does is activate your webcam and lets you take a snapshot directly from the stream, I borrowed this for my web but the video stream is flipped and I want to mirror the video stream so it feels better.

Note: I am kind of a js newbie so an in depht explanation would be welcomed.

Here is the code, you MAY have to use Firefox instead of Chrome:

Answer

Pavel Evstigneev picture Pavel Evstigneev · May 4, 2018

CSS trick worked perfectly:

video {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

Related questions

How do I redirect to another webpage?

How can I redirect the user from one page to another using jQuery or pure JavaScript?

Read More
Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?

Mod note: This question is about why Postman is not subject to CORS restrictions in the same way an XMLHttpRequest is. This question is not about how to fix a "No 'Access-Control-Allow-Origin'..." error. Please stop posting: CORS configurations for every …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More