Live Example fails in Chrome on Moto X (2014) about quaggajs HOT 26 CLOSED

That's odd. Currently I don't have access to a Moto X, but I just tried it on my LG G3 and it works just fine in Chrome Beta (42.0.2311.107). Which version of Chrome do you have?

from quaggajs.

Problem exists in both 41.0.2272.96 and 42.0.2311.107

Some totally off the wall guesses: is that there is some kind of mis-match between the resolution of the returned data versus the reported camera resolution? Maybe some kind of re-sampling going on? Or maybe the pixel data isn't being returned in RGB? Perhaps an endianness issue?

I have the 2nd gen Moto X, but my wife has the 1st gen. I'll try it out on her phone as well to see if it's there.

from quaggajs.

I was able to reproduce this phenomenon on my friends Moto X as well. That's really odd, since both phones (LG G3 and Moto X) have the same architecture, CPU and OS. I'll try to come up with a basic camera test demo in order to get to the root of this issue.

Right now, I have no idea why it happens. Have you tried to run it in Firefox for Android?

from quaggajs.

I did try Firefox (said so in my first post) and it worked fine.

Nexus 4 works. First gen Moto X (the smaller one) works too.

I thought maybe it could be some customization that Motorola did on Android, but that seems unlikely.

My best guess is it's something specific to the second gen Moto X's camera.

If I get some time, I might look into it. Any guesses as to where I should start?

from quaggajs.

Alright, so this seems to be a device specific problem. I would say we start by creating a simple getUserMedia example which reads, manipulates and then displays the video again. I already have some code snippets that could help. But I can't address this issue before tomorrow. I'll let you know when I start working on it.

from quaggajs.

Let's give this gist a try. It is supposed to show a <video> above a <canvas> element of which both should show the current camera stream.

For now, this only works on Chrome, because of the constraints I've used (1280 x 720 px). You can also lower the resolution if you run into troubles. Due to security constraints, you have to serve the page from a web-server, and cannot run it directly from the filesystem.

from quaggajs.

ios system can support?

from quaggajs.

@qgxspace No, iOS is not supported because it lacks the getUserMedia API.

from quaggajs.

This works pretty much exactly how you would expect. Doesn't have the "corruption"

In your gist, you copy the data directly to the canvas, but Quagga copies the image to an intermediate array (Uint8Array ?) so that it can be manipulated. ImageWrapper is used for this purpose, right?

Can we just test out ImageWrapper by itself?

Kind of a long shot, but maybe it has something to do with aspect ratios? http://stackoverflow.com/questions/26415778/getusermedia-video-size-in-firefox-chrome-differs

from quaggajs.

Thanks for testing it on your Moto X. That's right, QuaggaJS converts the canvas-input to grayscale and then stores it in an Uint8Array. There is a way to use the ImageWrapper but only in conjunction with the FrameGrabber which actually takes care of copying the data.

Right, the aspect ratio differences between the browsers. But this should not be an issue, because I'm initializing the buffers after the video is loaded reading the dimensions directly from the stream.

I'll try to come up with a simple demo which only uses the minimal count of components to actually make it representable. Stay tuned!

from quaggajs.

@serratus hello if I use codova to get barcode in ios,can i use quaggaJS?

from quaggajs.

@stanver As far as I know, that's currently not possible. There are no useful plugins available which make the camera stream available in the HTML context (no getUserMedia). Maybe in the future. For now, the only way to go is by using the file-api for static images.

from quaggajs.

the media capture plugin for cordova works also on iOS:
https://github.com/apache/cordova-plugin-media-capture

but of course it uses its own API instead of getUserMedia.

from quaggajs.

@4thana media-capture is a totally different story, since it does not allow to get access to the current stream that is being recorded. Only after the capturing is finished, the video/image can be used for further processing. That's the huge advantage of using getUserMedia. Some people are experimenting with exposing the camera-stream to a canvas with cordova plugins (e.g.: CanvasCamera)

from quaggajs.

Maybe iOS support can be a separate issue instead of continuing to comment on this Moto X specific issue?

from quaggajs.

Sorry for the long absence, but I finally came up with a new demo for your problem. Can you give this a try and tell me if both, the <video> and <canvas> tag show the same image? What still puzzles me is the fact that the preview in the examples is a <video> element with the camera-stream attached. Nothing fancy, and no image processing whatsoever.

The link above simply demonstrates the first step of the quaggaJS pipeline, attaching the user's camera to the <video> element and copying that data to the <canvas>. Have you tried to set numOfWorkers to 0 in the examples just to make sure that the workers don't interfere with the system?

from quaggajs.

Both the canvas and video show the same corrupted image.

Maybe it's a bug with Chrome + Camera firmware?

from quaggajs.

Haven't tried adjusting workers.

from quaggajs.

Works perfectly in Firefox

from quaggajs.

I've just created a more simplified version which just uses the CameraAccess part and displays the current video-stream. Can you give this a try?

from quaggajs.

Still doesn't work.

from quaggajs.

I'm having this same issue on my Moto X

from quaggajs.

Just double checked the example you posted at #27 (comment)

Still fails on Android version 5.1 and Chrome 43.0.2357.93

from quaggajs.

I'm still getting the same issue. I'm also testing on Android 5.1 with Chrome 43.0.2357.93. I've actually decided to just write my application natively due to this! As this may be an issue on more than just the Moto X.

from quaggajs.

Unfortunately I don't have any idea what's going on here. I guess the only way to find out is to report a bug directly at the Chromium team, since it seems to work on Firefox. I'll try to get my hands on a Moto X and create a minimal example producing this issue. Stay tuned!

@xDarkShadowKnightx Are you going to use zxing for your application? Using phonegap, or completely switching to native Android?

from quaggajs.

Verified fixed on my device. Good work! 👍

from quaggajs.