New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Camera access in browser on iPhone #190

Open
Naki21 opened this Issue Apr 28, 2017 · 26 comments

Comments

Projects
None yet
@Naki21
Copy link

Naki21 commented Apr 28, 2017

So I am having issues getting the scanner working for chrome on iPhone. I have my app working on a computer and on my android on chrome but when I use an iPhone I am getting a play button with a line through it where the video feed should be. Any suggestions?

(I'm using npm to access the library)

@liorp

This comment has been minimized.

Copy link

liorp commented May 9, 2017

The getUserMedia API is unsupported as of iOS 10.3.1, so LiveStream won't work on a device running iOS.

@torontom

This comment has been minimized.

Copy link

torontom commented May 17, 2017

@liorp... you mean all the browsers on iOS 10 will not see camera LiveStream?

http://caniuse.com/#feat=webworkers,canvas,typedarrays,bloburls,blobbuilder,stream

@liorp

This comment has been minimized.

Copy link

liorp commented May 18, 2017

Yep... cause they don't support getUserMedia()

@vinneyk

This comment has been minimized.

Copy link

vinneyk commented Jul 11, 2017

Darn. I knew Safari wouldn't work but I was expecting it would work in Chrome at least. Step up your web game, Apple! Works on my Nokia Lumia Icon Windows Phone that I've had for nearly 4 years!! 🙄

@eddyeHa

This comment has been minimized.

Copy link

eddyeHa commented Aug 31, 2017

Hi

In chrome would work?

@liorp

This comment has been minimized.

Copy link

liorp commented Sep 1, 2017

@Biglr

This comment has been minimized.

Copy link

Biglr commented Oct 16, 2017

Hi

I did some research on this and as of iOS 11 access to getUserMedia() is enabled.
But I can't get it to work on my iPhone running iOS 11 (same issue as OP described)...
Will there be a new release in order to support iOS11?

EDIT:
Seems like there's an issue with iOS11 which is why it isn't working yet...

Cheers

@liorp

This comment has been minimized.

Copy link

liorp commented Oct 16, 2017

Did you try running over HTTPS? It only works over HTTPS

@Biglr

This comment has been minimized.

Copy link

Biglr commented Oct 16, 2017

Yep, always over HTTPS.

@reda-alaoui

This comment has been minimized.

Copy link

reda-alaoui commented Oct 16, 2017

https://webkit.org/blog/6784/new-video-policies-for-ios/

On iPhone, video playsinline elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins.
video elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone.
When exiting fullscreen with a pinch gesture, video elements without playsinline will continue to play inline.

Add playsinline to your video element.

@reda-alaoui

This comment has been minimized.

Copy link

reda-alaoui commented Oct 16, 2017

@Biglr

This comment has been minimized.

Copy link

Biglr commented Oct 16, 2017

So this means we are waiting on a new release of quaggaJS, right?

@liorp

This comment has been minimized.

Copy link

liorp commented Oct 16, 2017

Dunno, it works for me on iOS 11 with the standard config

@Biglr

This comment has been minimized.

Copy link

Biglr commented Oct 16, 2017

@liorp can you please post your config here?
It doesn't work for me, but maybe I can spot any differences in your config which might help.

@Biglr

This comment has been minimized.

Copy link

Biglr commented Oct 16, 2017

@reda-alaoui I checked on the generated video tag and the attributes are added correctly:

<video autoplay="true" preload="auto" src="" muted="true" playsinline="true"></video>

But it still doesn't work on iOS...

EDIT: I just updated to the latest iOS version (11.0.3) but it still doesn't work on neither chrome nor safari...
This is the error from chrome, Safari isn't helpful in this regard...

img_4123

@willgearty

This comment has been minimized.

Copy link

willgearty commented Apr 6, 2018

Has anyone figured out how to get this to work on iOS?

@lalithswarna

This comment has been minimized.

Copy link

lalithswarna commented Apr 6, 2018

im facing the same issue unable to get ipad camera working in chrome with quaggajs. Both http or https

@bimsonz

This comment has been minimized.

Copy link

bimsonz commented May 11, 2018

any movement on this ?

@willgearty

This comment has been minimized.

Copy link

willgearty commented May 11, 2018

Is the problem fixed if you include webrtc-adapter?
e.g. <script src="https://webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>

@lalithswarna

This comment has been minimized.

Copy link

lalithswarna commented May 13, 2018

I was able to achieve iPad camera working on safari. I had to include the following files in same order to achieve this:
1.adapter.js
2.Quagga.js
3.live_w_locator.js(Not mandatory - you can use your own js based on your html)
For me chrome is still an issue in iPad as current iOS version 11 also uses the same webkit engine as safari which is limited.

@nove1398

This comment has been minimized.

Copy link

nove1398 commented May 21, 2018

Oh man, I really needed to have livestream for a project I have been developing.

@KurtBliss

This comment has been minimized.

Copy link

KurtBliss commented Jul 10, 2018

I found out after some debuging without a mac
https://stackoverflow.com/questions/11403107/capturing-javascript-console-log

I found I was getting a constraint error, wich led me here
https://stackoverflow.com/questions/46981889/how-to-resolve-ios-11-safari-getusermedia-invalid-constraint-issue

Then I notice 640x480 size works. BUt not 320x240....
Off the example page https://serratus.github.io/quaggaJS/examples/live_w_locator.html

So glad I finally got it working... Though what sucks is not sure how to copy the example where it scales it down but. Get it sooner or later....

Also be sure that you have java script turned on, and allow camera in your settings for safari

I also have firstly the jqueary.sj adapter.js quagga.js and the live_w_locator.js what is and not required not a 100%... I'm learnings still ;p

@thaibinh1909

This comment has been minimized.

Copy link

thaibinh1909 commented Jul 19, 2018

Finally, I can get this camera works on Safari only, Chrome and Edge still displays "getUserMedia is not defined".
Seems like Apple doesn't allow other browsers to play fair with their Safari. Shame.

@nove1398

This comment has been minimized.

Copy link

nove1398 commented Jul 19, 2018

How did you get it to work on safari? @thaibinh1909

@thaibinh1909

This comment has been minimized.

Copy link

thaibinh1909 commented Jul 19, 2018

@nove1398 you can check a sample here
https://github.com/ijmacgregor/sapui5-barcode-scanner/
Credit to the author

@nove1398

This comment has been minimized.

Copy link

nove1398 commented Jul 19, 2018

@thaibinh1909 thanks i will look into it,because I needed to get this done for a project

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment