Camera access in browser on iPhone

[Naki21]

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]

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

[torontom]

@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]

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

[vinneyk]

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]

Hi

In chrome would work?

[liorp]

As Chrome on iOS runs on the same WebKit engine as Safari (limited by Apple), it does not support it either. Guess we'll have to wait to iOS 11 to find out if things are better.

On 31 Aug 2017, at 8:18 PM, eddyeHa [email protected] wrote:

Hi

In crome would work?

― You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[Biglr]

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]

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

[Biglr]

Yep, always over HTTPS.

[reda-alaoui]

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]

https://github.com/webrtc/samples/commit/37ebbb0b17ccbe7a40215a2b5c55cf206f740e33

[Biglr]

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

[liorp]

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

[Biglr]

@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]

@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...

[willgearty]

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

[lalithswarna]

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

[bimsonz]

any movement on this ?

[willgearty]

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]

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]

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

[KurtBliss]

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]

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]

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

[thaibinh1909]

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

[nove1398]

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

[machinaeXphilip]

got the basics working on safari ios with https://webrtc.github.io/adapter/adapter-latest.js

but ONLY if running in browser NOT when started as webapp from the homescreen.

I am curious if there are workarounds for that or if apple communicated somewhere that in standalone it behaves differently. could not find anything.

[thaibinh1909]

I am curious if there are workarounds for that or if apple communicated somewhere that in standalone it behaves differently. could not find anything.

I have read somewhere that a webapp placing on homescreen is not properly covered by Safari so iOS revokes media access and at this moment, there is no workaround but use Safari bookmark. We have to wait for next iOS release

[KurtBliss]

Not sure what you guys mean by web app but I can use the camera on safari through a shortcut from the home screen just fine. ios 12.1.4.. Just use the demo as a test > https://serratus.github.io/quaggaJS/examples/live_w_locator.html

Unless I'm miss understanding what you guys are talking about, seems to work just fine.

[machinaeXphilip]

@KurtBliss: to clarify: I mean a Progressive WebApp with <meta name="apple-mobile-web-app-capable" content="yes" /> in it's head.

edit: I tested with and without the meta tag and can confirm: it does ONLY NOT work if webpage head has apple-mobile-web-app-capable meta tag AND user "installed" it via Add to Homescreen. Normal Add to Homescreen Bookmarks/References do not affect the ability to get media access via quagga