Open Mario8419 opened 3 years ago
@Mario8419 I have the same problem. Mine is throwing this error whenever i pass the facingMode prop
I tried to scan it with my generated QR codes and it works. The only problem i have is this camera facing mode.
Tacking on this issue with that deviceId has the same thing.
This repo is for desktop, if you want mobile support, look for: https://github.com/JodusNodus/react-qr-reader
Doesnt work on desktop. I've tried it with desktop.
demo here: https://kybarg.github.io/react-qr-scanner/ is working, also mobile
For me, in that demo, the rear camera only works by selecting the device (the second device). If you take a look in the source of this repo, you can see that facingMode
is set to rear (environment) as default. So for me, it's not working. I can only see the front camera.
Then I saw some commentaries from the developer, and then I move to the JodusNodus repo, and it works fine on mobile.
npm repo contains the wrong version, different from the code here
npm i https://github.com/kybarg/react-qr-scanner
fix problem templonary, but this is not good solution, need update package in npm
after painfully reading through the compiled code, I found that you can pass media constraints to the component
<QrReader
delay={1000}
style={{
width: "100%",
height: "100%"
}}
constraints={
isDesktop
? undefined
: {
video: {
facingMode: { exact: facingMode }
}
}
}
facingMode={facingMode}
onError={handleError}
onScan={handleScan}
/>
@shendel the git version doesn't seem to work, I mean you can change facingMode but the qr code reader doesn't work
@ernest-okot really? )
see for yourself and make sure
npm i react-qr-scanner@1.0.0-alpha.7
https://www.npmjs.com/package/react-qr-scanner
Really? Face, Rare? Front, Back?
May be you see getDeviceId
function there????
For me full-link repo from this git-hub repo work fine, with front-back camera, with select between front-back
main problem - npm version is not up to date
@ernest-okot https://github.com/kybarg/react-qr-scanner/blob/master/lib/index.js#L394
Any questions?
Where facingMode
, legacyMode
??? Where chooseDeviceId
func????
@ernest-okot , yes - github build dont scan ((( ... may be we need wait owner of repo for answers....
@kybarg , @fjogeleit , can you are help us and fix this?
@ernest-okot i make fix https://github.com/kybarg/react-qr-scanner/pull/41 you can check on my fork https://github.com/shendel/react-qr-scanner
@shendel
@kybarg , ничего что я по русски, у вас в профиле указан Киев. На английском сложно высказываться. Да я понимаю, но в мобильном браузере тоже работает, плюс этот репо хоть как-то обновляется в отличии от того, что вы указали, что, по крайней мере для меня является приоритетом. И да - были опечатки. Не распознавало код (я поправил и сделал пул)
facingMode property is not working for me as well. npm repo is also confusing and how to use property is not clear. I would suggest to kindly add some example with all the available properties so that its easy to use. Also I would love to see an example containing option for selecting available camera(s).
hello its not working for me as well is there anyone for whom its working if not then does anybody found out any solution for the same
@bansalshashank I was able to solve this with below code:
const [width, setWidth] = useState(window.innerWidth);
function handleWindowSizeChange() {
setWidth(window.innerWidth);
}
useEffect(() => {
window.addEventListener('resize', handleWindowSizeChange);
return () => {
window.removeEventListener('resize', handleWindowSizeChange);
}
}, []);
let isDesktop = (width > 768);
<QrReader
delay={500}
style={styles.previewStyle}
onError={handleError}
onScan={handleScan}
constraints={
isDesktop
? undefined
: {
video: {
facingMode: { exact: `environment` }
}
}
}
/>
Hope this helps!
I found the problem with facingMode not wiorking for me is because the camera label is language specific. In Dutch the camera says 'voorzijde' (=front) and 'achterzijde (=back). Adding a new property to supply additional filter values could be a solution. Providing a select camera option to the end user seems to be the way to go, that is what I did. I found however that the qr-scanner does not switch camera when changing a state value. It only seems to rerender when changing the prop 'delay', 'facingMode' and 'legacymode' How about adding a property to set the camera deviceId when known. I now solved this by putting the deviceId in the facingMode property to trigger the rerendering (switching) to the other camera. This triggers the 'chooseDeviceId' function where I can return the selected deviceId.
Hello and thank you for giving this repo a new boost. It's quite working good except the facingMode property isn't working through various devices. It's always the front camera which is active despite the prop is set to rear. Any suggestion?