html5-qrcode Reverse Camera Scanner Video

Question

I am using a JavaScript library for scanning QR Code namely html5-qrcode ( https://github.com/mebjas/html5-qrcode ). By using it, I can scan QR Code directly from the browser. I love the library, it works really fast and flawlessly!

However, I am using it for certain application that will be accessed via laptop and because of that, the only camera that'll be able to be used as QR Code scanner is the front user-facing camera. When I tested it, I found it rather difficult to position the QR Code image correctly in the scanning area because the video feed from the camera is not mirrored (when I moved to the right, my image in the video moved to the left).

Does anyone know how to display the video in mirrored fashion? Or... Is it not even possible? If it is, is there any alternative?

Answer 1

Heh. If I'm not mistaken, you could just apply this CSS to your specific video element:

video#qrScanner {
    transform: scaleX(-100%);
}