Comments (11)
I'm using current quagga2 with a galaxy s22 and iphone 12, runs ok. Can you detail the issue a little more?
from quagga2.
@vigneshsithirai per this bug report, which Apple considers fixed, but it's clearly not, using facingMode: 'environment' on iOS 16.4+ gives the ultrawide camera, which is most definitely an error for barcode scanning solutions, and honestly probably nearly every other use case as well.
Second to last comment in that thread seems to provide a method for dealing with it, however in my opinion, it's quite unstable -- using the device constraints in WebKit at this point, is simply asking for trouble.
This is at least the second time that I know of, that Apple messing with how constraints operate, has completely broken nearly every web app in existence that uses the camera. And both times they have completely failed to understand why what they did was bad. It won't be the last time, either. Now, the constraint system is actually pretty bad in and of it's own, soooooooooooooooo it's probably best to write a selector, and have the user actually select it..
You might try removing the width and height from your constraints, though, and maybe it'll work, considering that this report #396 is that only having facingMode: environment seems to leave the most recent poster with a workable camera that also includes autofocus.
This init() block is looking for the user to provide either a cameraId or a facingMode
Quagga.init({
inputStream: {
type: 'LiveStream',
constraints: {
...constraints,
...(cameraId && { deviceId: cameraId }),
...(!cameraId && { facingMode }),
},
target: scannerRef.current,
},
locator,
numOfWorkers,
decoder: { readers: decoders },
locate,
}, (err) => {
Quagga.onProcessed(handleProcessed);
if (err) {
return console.log('Error starting Quagga:', err);
}
if (scannerRef && scannerRef.current) {
Quagga.start();
if (onScannerReady) {
onScannerReady();
}
}
});
though, actually, this is what i'm using on my production site
constraints: {
width: {
ideal: 1920,
min: 640,
},
height: {
ideal: 1080,
min: 480,
},
...(cameraId && { deviceId: cameraId }),
...(!cameraId && { facingMode: { ideal: 'environment' } }),
},
If the user has a cameraId store in their preferences, then we init with that, otherwise we init with facingMode: { ideal: 'environment' }
The application runs this to get a list of available cameras
async function doCameraEnumeration(dispatch: Dispatch) {
const { CameraAccess } = Quagga;
const videoDevices = await CameraAccess.enumerateVideoDevices();
dispatch(receiveVideoDevices(videoDevices));
}
and presents the data received to the user in a drop-down box to select which device they want. It then stores the ID of that device in the user settings, and uses it the next time they open the camera.
from quagga2.
Thank you for filing an issue! Please be patient. :-)
from quagga2.
Please post your configuration object. The most common problem is the device auto-selecting a wide-angle device, you may have to implement a way to find (or have the user select) a camera that is not wide angle, as wide angle camera produces a fisheye effect that makes recognition quite difficult
from quagga2.
@ericblade
I have used below config
import Quagga from 'quagga'
class Scanner extends Component {
componentDidMount() {
Quagga.init(
{
inputStream: {
type: 'LiveStream',
constraints: {
width: 640,
height: 320,
facingMode: 'environment',
},
// area: { // defines rectangle of the detection/localization area
// top: "10%", // top offset
// right: "10%", // right offset
// left: "10%", // left offset
// bottom: "10%" // bottom offset
// },
},
locator: {
halfSample: true,
patchSize: "large", // x-small, small, medium, large, x-large
debug: {
showCanvas: true,
showPatches: false,
showFoundPatches: false,
showSkeleton: false,
showLabels: false,
showPatchLabels: false,
showRemainingPatchLabels: false,
boxFromPatches: {
showTransformed: true,
showTransformedBox: true,
showBB: true
}
}
},
numOfWorkers: 4,
decoder: {
readers: ['code_128_reader'],
debug: {
drawBoundingBox: true,
showFrequency: true,
drawScanline: true,
showPattern: true
},
},
locate: true,
},
function(err) {
if (err) {
return console.log(err)
}
Quagga.start()
},
)
Quagga.onDetected(this._onDetected)
}
componentWillUnmount() {
Quagga.offDetected(this._onDetected)
}
_onDetected = result => {
this.props.onDetected(result)
}
render() {
return <div id="interactive" className="viewport"/>
}
}
export default Scanner
/```
from quagga2.
@lampsbr In my case iPhone 13 working, but only for iPhone 14 and for some of Samsung S series not working
from quagga2.
My guess would be that it's autoselecting a camera that is not suitable for use.
I unfortunately do not have a device to try this with, but I don't have any complaints from users of my own app, which does allow the user to select which camera device to use in the constraints.
from quagga2.
@ericblade Your sample app is also not working on the iPhone 14.
If possible, could you please share the sample code for user to select device camera.
from quagga2.
@ericblade Any update regarding issue that scanning from iPhone 14?
from quagga2.
@ericblade Still I am facing the same issues. Is there any update from Apple side?.
Thanks.
from quagga2.
@ericblade Still I am facing the same issues. Is there any update from Apple side?.
Thanks.
I'm not aware of anything. Providing a specific hardware device ID seems to work for everyone, regardless of OS, and I don't have anything running modern iOS on hand to make any investigations into how it handles constraints. Sorry :| :|
from quagga2.
Related Issues (20)
- Request for new npm release HOT 4
- invent a way to flag which tests are definitely working and therefore should cause actual failures in testing instead of being marked 'skipped'
- investigate usage of ImageCapture API versus current frame grabber for browser
- play() function HOT 3
- CAMERA NOT DICONNECTING AFTER QUAGGA.STOP() CALLED HOT 5
- Camera Takes Multiple Seconds to Scan Code HOT 3
- Quagga.stop not working HOT 8
- consider adding a function to query if a device supports torch?
- Not able to detect the barcode attached HOT 11
- Responsiveness HOT 5
- Zoom constraints not applied in Quagga.init HOT 3
- camera is always showing front view and not back view even though i set facing mode to environment HOT 2
- Vue 2 error regarding get-pixels/request/asn1, was: broken dependency from recent updates? HOT 2
- Using method decodeUrl only returns "Box" propriety #236 HOT 6
- Consider removing Buffer from node code, replace with native array type HOT 3
- Having issues with quagga2 barcode reader library HOT 2
- config.debug ignored. console.warn only contains debug info HOT 3
- Quagga not consistently able to scan HOT 1
- Issue with some Barcodes (code_93 example) HOT 1
- Is there a way to configure quagga to fallback on zxing-js when it cannot identify a barcode in the image? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from quagga2.