search

ericblade / quagga2-redux-middleware

Redux Middleware for @ericblade/quagga2
0 stars 0 forks source link

Chrome browser choosing different camera #6

Closed RichardJDay closed 3 years ago

RichardJDay commented 3 years ago

Hi There,

We're using a Samsung A51 phone. There are multiple camera on the back of the camera.

When i open our app using Firefox app the video opens up using one of the cameras which has good quality, enough to scan barcodes successfully. When we use the same app in a chrome browser the camera it uses on phone is not good.

Is it possible for me to write code to choose the camera i want and how would i go about doing this?

ericblade commented 3 years ago

That is 100% the purpose of this library! :-D 

import { useDispatch } from 'react-redux';
import { enumerateVideoDevices } from '@ericblade/quagga2-redux-middleware';
...
const dispatch = useDispatch();
dispatch(enumerateVideoDevices());

once you have the results of enumerateVideoDevices(), there is a deviceId field in there. If you pass the deviceId that you want to use into the constraints block of the Quagga configuration (Quagga.init()) then the browser should select whichever device is specified.

RichardJDay commented 3 years ago

Okay that's cool thanks. I'm using Angular 11. We're also using different phones too that work. Is that a problem for this solution? considering the deviceIds might be different.

ericblade commented 3 years ago

ah, I don't have a solution premade for Angular, there might be others out there that do, though.

You'll want to pick up https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

and then you can supply a deviceId as a constraint to quagga or whatever other camera implementation you're using.

deviceId I believe is unique, so you likely won't be able to pre-determine what you'll need. I let my users choose which device they want to use. Unfortunately, the information available on mobile devices tends to be approaching useless, where enumerateDevices just returns a unique deviceId and a non-unique "camera0" or "camera1" as a name. If you use it on a desktop web browser, you get the complete name of the camera, sometimes the manufacturer, and other info.

RichardJDay commented 3 years ago

I've done it thanks for getting back to me

resolveDeviceId(): Promise { return new Promise(resolve => { navigator.mediaDevices.enumerateDevices().then(function (stream) { console.log("getting the stream", stream) const deviceId = stream.find(x => x.label == "camera2 0, facing back").deviceId; if (!deviceId) { resolve(stream.find(x => x.kind.toString() == "videoinput").deviceId) } else { resolve(deviceId) } }) }) }

ericblade commented 3 years ago

good luck! :) if anyone is using that with a different model of phone, you might want to provide some way for the user to switch which camera is being used. my camera2 0 might be a wide-angle or non-existent.