Skip to content
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

Make AR.js work on iOS 11 #90

Closed
freinbichler opened this issue Jun 6, 2017 · 27 comments
Closed

Make AR.js work on iOS 11 #90

freinbichler opened this issue Jun 6, 2017 · 27 comments

Comments

@freinbichler
Copy link

I got AR.js to work on iOS 11 and here are the changes I needed to apply to aframe-ar.js in our project:
freinbichler/ar-room-availability@bdbdaaf

iOS 11 only supports the newer navigator.mediaDevices.getUserMedia in favor of the older navigator.getUserMedia. Also, the video element needs to have the attributes autoplay, muted and playsinline for it to work.

With these changes, this example code works perfectly:

<a-scene embedded artoolkit='sourceType: webcam;'>
	<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
	<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>

An issue I am having is that in portrait mode the camera image is rotated by 180 degrees, but this might be an iOS beta issue, as I am also seeing this behavior in an unrelated test.

I don't know if the migration to navigator.mediaDevices.getUserMedia will break something, but in my tests it still works in the latest Chrome for Android and Mac. Also, I have only tested this in the aframe version, so I don't know where else this change might be needed.

Demo here: https://twitter.com/fr3ino/status/872228441390813185

@jeromeetienne
Copy link
Owner

i ported your modifications.

https://github.com/jeromeetienne/AR.js/blob/master/three.js/threex-artoolkitsource.js#L230

Can you test on ios11 and see how it goes ? thanks :)

@freinbichler
Copy link
Author

freinbichler commented Jun 10, 2017

Yes, it works 🎉

There is a bug with the resize event though, see this video (ignore the flipped image in portrait mode, this is an early iOS beta bug). As soon as I rotate the device to landscape mode, the cube is not perfectly aligned with the marker anymore. If another resize happens (when the address bar appears in the video at 0:18), the cube is aligned again. So basically the problem is that the resize event fires and it tries to recalculate everything, when the browser is not finished rotating. This could be related to issue #91. Maybe a short delay after the resize event happens and before the recalculations are done would fix this. I am only experiencing this on iOS though.

Another problem is that in portrait mode the cube is stretched. I am seeing this on Android and iOS (edit: this is a known issue #60).

Thank you!

@jeromeetienne
Copy link
Owner

@freinbichler Thanks A LOT for your help during this whole process :)

@nikinet
Copy link

nikinet commented Nov 15, 2017

doesn't work on my iPhone 7 iOs 11.1 What i doing wrong(
"webcam Error Name: Message: WebRTC issue-! navigator.mediaDevices not present in your browser"
image

@freinbichler
Copy link
Author

You have to open it in standalone Safari, not Safari View Controller embedded in several apps. If you tap on the Safari icon in the bottom right of your screen, Safari opens and it should work.

@ironandsilk
Copy link

ironandsilk commented Nov 16, 2017

I feel that this is a new issue.
It was working last week.
It even worked on Chrome.

@kmcurry
Copy link

kmcurry commented Nov 16, 2017

d1c85a20-c0fb-4b9d-bdf9-b18e2cb1ead2
e6a4a742-91ef-48f9-9c54-253b23ec7b49

@javismiles
Copy link

javismiles commented Nov 16, 2017 via email

@thehellrider
Copy link

@freinbichler "You have to open it in standalone Safari, not Safari View Controller embedded in several apps"
I used aframe ar within a phonegap app...on android everything it's ok...on IOs it's not working...so you're saying currently Aframe just works in IOS Safari standalone browser?

@freinbichler
Copy link
Author

As far as I know that is correct.

@ultradyran
Copy link

hi, @freinbichler
i am working on a very minimal test with html and aframe.min.js/aframe-ar.js only.
on PC it works fine but on iOS Safari (standalone) it's not working.
So i use your version of aframe-ar.js at
freinbichler/ar-room-availability@bdbdaaf
instead of the official version of ar.js at
https://cdn.rawgit.com/jeromeetienne/AR.js/1.5.0/aframe/build/aframe-ar.js
it produced an error "can't access user media : ()", what did i miss?

@freinbichler
Copy link
Author

@ultradyran are you testing it on iOS 11?

@ultradyran
Copy link

@freinbichler Yes iOS 11.2.2, suppose to be the latest iOS on iPhone.

I hv only replaced your aframe-ar.js with the official one.

I noticed the difference in the error message.
In the original official aframe-ar.js file, error says: "Webcam Error Name: NotAllowedError"
If i use your version of aframe-ar.js, the error simply says: "Can't access user media : ()"

not sure what i missed, or if this is a new issue in 11.2.2
it works fine in PC with webcam.

@freinbichler
Copy link
Author

@ultradyran Does the “basic” example work on your device? https://jeromeetienne.github.io/AR.js/three.js/examples/basic.html

The error message you are getting indicates that AR.js does not have access to the camera for some reason.

@ultradyran
Copy link

@freinbichler the “basic” example did work on my device.

I noticed that the structure of that example doesnt appear to be the same as what the tutorial suggested on the landing page in https://github.com/jeromeetienne/AR.js
I edited the code a bit and got lost on how to replace the scene with a gltf model instead.

So i was hoping to use your ar.js and load gltf in A-Frame in a simple manner like this:
<a-assets> <a-asset-item id="model" src="models/manekiinu.gltf" /> </a-assets> <a-gltf-model src="#model" scale="0.01 0.01 0.01"></a-gltf-model>
while the above work on a PC browser, it got that "Can't access user media : ()" error on my device.

Any way i can achieve that?

pseudospencer added a commit to pseudospencer/pseudospencer.github.io that referenced this issue Feb 19, 2018
@pseudospencer
Copy link

I am running iOS11.2.5 on an iPhone 7, using the latest version of Chrome and Safari. This example is working with Safari but not Chrome.
img_1041
img_1043

When using the example code on my own site, it's working just fine - again, only in Safari, not chrome.

@freinbichler
Copy link
Author

freinbichler commented Feb 19, 2018

@pseudospencer Only standalone Safari supports getUserMedia right now. iOS 11.3 should change that.

@miragevideo
Copy link

Hello All,

I am having this issue of the webcam error. I have even tried going to the codepen version in safari browser on iPad 10.3.2 and iPhone 11.2.6. Always the same. Any thoughts as to why this is happening?

@vettorazi
Copy link

yeah..here too. i tried in a iphone 7, with 11.0 on safari and seems not work.
this fix it's already in the library when we download from the github? or i have to fix something in the js?

@felipemacch
Copy link

Hello I'm trying to use with the iphone, but the camera will zoom automatically until it gives an error. Do you know what that mistake might be?

@Shestac92
Copy link

@felipemacch
I had the same problem but I've found a solution!
I allowed access to the camera and microphone, then I enabled ALL experimental WebKit features of Safari in advanced settings. For details, please, check screenshots below of my Safari browser settings. I use iOS 11.4 on Iphone 7plus.
wpfuisjaz84
ztoldffrne8

@leeprobert
Copy link

I have found that this example : https://jeromeetienne.github.io/AR.js/three.js/examples/mobile-performance.html works on my iPhone with latest iOS 11 and all the experimental features and permissions set for Safari. But the A-Frame examples do not work.

@gabrielstuff
Copy link

Apparently the gyro and other features have been blocked per default by Apple, suggesting it could be used by thrid party services for tracking users. See: https://www.macrumors.com/2019/02/04/ios-12-2-safari-motion-orientation-access-toggle/

@brioluk
Copy link

brioluk commented Feb 28, 2019

Leeprobert is right, that example works on my ipad

@Wulff2099
Copy link

Hello, i have some problems with the Iphone with IOS 12.1.4
What can i do to work in my phone.
Thanks a lot.

@yunyinggit
Copy link

You have to open it in standalone Safari, not Safari View Controller embedded in several apps. If you tap on the Safari icon in the bottom right of your screen, Safari opens and it should work.

Hello, I am wondering, is it impossible for Safari View Controller? Any clue to make it possible on webView (UIwebview / WKwebview / SFSafariViewController )

@gabrielstuff
Copy link

gabrielstuff commented Apr 8, 2019 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests