Open AsadNom opened 2 years ago
Hi, you should use the facingMode under constraints property like this
<QrScanner
ref={qrRef}
delay={300}
constraints={{
facingMode: 'environment'
}}
style={{ width: '100%' }}
onError={handleErrorWebCam}
onScan={handleScanWebCam}
/>
onError
and onScan
are deprecated , use OnResult
instead
use https !!!
Hi @abadrangui you're a genius!! I've been trying for a week to get this to work when I saw your comment. In my case, I was using docker, then I had to create a container with nginx for reverse proxy and using https protocol. It's working normally.
@abadrangui I used firebase hosting and its already on https when i comment out constraints={{ facingMode: 'environment' }} this line its working with front camera but when i used this no camera shows
@abadrangui I used firebase hosting and its already on https when i comment out constraints={{ facingMode: 'environment' }} this line its working with front camera but when i used this no camera shows
perhaps you need this line;
key="environment"
Still require help on this problem the same is here!!
<QrReader
constraints={{
audio: false,
video: { facingMode: "environment" },
}}
key="environment"
onResult={(result, error) => {
if (!!result) {
setData(result?.text);
}
if (!!error) {
console.info(error);
}
}}
style={{ width: "100%" }}
/>
didn't work or even
<QrReader
constraints={{
audio: false,
video: { facingMode: { exact: "environment" } },
}}
onResult={(result, error) => {
if (!!result) {
setData(result?.text);
}
if (!!error) {
console.info(error);
}
}}
style={{ width: "100%" }}
/>
I found a solution for that, it worked for me if I needed it locally. simply using the --host switch. so first the code will be :
<QrReader
constraints={{
facingMode: "environment",
}}
key="environment"
onResult={(result, error) => {
if (!!result) {
setData(result?.text);
}
}}
style={{
width: "100%"}}
/>
<Info
response={response}
open={open}
setOpen={setOpen}
severity={severity}
/>
run locally using
npm run dev --host
it will show you something like this because I am using yarn so yarn dev --host
:
➜ Local: http://localhost:5173/ ➜ Network: http://25.17.172.207:5173/ ➜ Network: http://192.168.1.4:5173/ ➜ press h to show help
The Network that starts with the router I am using is the one we need :
Network: http://25.17.172.207:5173/ good until now for the PC, to the phone!
open this link :
chrome://flags/#unsafely-treat-insecure-origin-as-secure
you find a field and a multiselection tubule that has disabled in it, make it enabled, and add the link in the text area
http://25.17.172.207:5173/
Now relaunch Chrome on the phone, and open that link on the phone. everything now is good to go and you are running it locally with a camera, I think the same thing might work for the hosting. I will keep searching for that to check if there is anything better
it work for me
<QrScanner
delay={ 300 }
style={ {width: '100%'} }
constraints={{aspectRatio: 1, facingMode: { ideal: "environment" } }}
onDecode={(result) => setQrByScan(result)}
onError={(error) => console.log(error?.message)}
/>
Hello Sir , I have implemented this NPM package in my React js project , I want to open back camera in mobile devices instead of front camera , although I set facing Mode as environment , its working fine on browser on PC but its not working in mobile device. here is my code sample,
import QrScanner from 'react-qr-scanner'; const qrRef = useRef(null);
const handleErrorWebCam = (error) => { console.log(error); }
const handleScanWebCam = (result) => { if (result) { setScanResultWebCam(result); } }
<QrScanner ref={qrRef} delay={300} facingMode="environment" style={{ width: '100%' }} onError={handleErrorWebCam} onScan={handleScanWebCam} />