[Feature Request] Option to mirror displayed video

[paulharris]

It is very hard for people to center their QR code in the camera when the video is not mirrored.
My phone and PC both don't mirror the front camera.
Is it possible to add a "mirror video" option?

[fabiochelly]

Personnaly, I detect if I'm on a mobile or desktop (through the user-agent), and I add a class "flip" to my container if not mobile:

CSS:

#qr-reader.flip video {
    transform: scaleX(-1);
}

Javascript:

const ismobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
const cls = ismobile ? '' : 'flip';
const size = ismobile ? 150 : 250;
mypanel.insertAdjacentHTML("afterbegin", `<div id="qr-reader" class="${cls}"></div>`);

It's not perfect but it works so far. the ideal would be to be able to detect if the camera is front (needs mirror) or back.

[paulharris]

This is genius, thanks!
Even if I'm using mobile, I want to use the front camera, so the video should always be flipped anyway.

I noticed the flip will also apply to "Start Scanning" button, which is confusing.
So I applied it to just the __scan_region, ie:

#scanner_div__scan_region {
   transform: scaleX(-1);
}

Works great, thanks!

[MattPedrosa]

@paulharris Sir, good evening. Can I ask an example of how you were able to fix your issue? Is there a way to implement this on REACT?

[paulharris]

I used the CSS as above, where I had a <div style='width: 250px' id='scanner_div' class='scanner_div'>
but I don't think I needed the class in that div.
I don't use react so I can't say anything about that.