-
Notifications
You must be signed in to change notification settings - Fork 2.2k
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
Comments
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 :) |
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! |
@freinbichler Thanks A LOT for your help during this whole process :) |
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. |
I feel that this is a new issue. |
I didnt have probs using iOS 11 and iphones with ar.js and aframe-ar
|
@freinbichler "You have to open it in standalone Safari, not Safari View Controller embedded in several apps" |
As far as I know that is correct. |
hi, @freinbichler |
@ultradyran are you testing it on iOS 11? |
@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. not sure what i missed, or if this is a new issue in 11.2.2 |
@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. |
@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 So i was hoping to use your ar.js and load gltf in A-Frame in a simple manner like this: Any way i can achieve that? |
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. When using the example code on my own site, it's working just fine - again, only in Safari, not chrome. |
@pseudospencer Only standalone Safari supports getUserMedia right now. iOS 11.3 should change that. |
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? |
yeah..here too. i tried in a iphone 7, with 11.0 on safari and seems not work. |
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? |
@felipemacch |
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. |
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/ |
Leeprobert is right, that example works on my ipad |
Hello, i have some problems with the Iphone with IOS 12.1.4 |
Hello, I am wondering, is it impossible for Safari View Controller? Any clue to make it possible on webView (UIwebview / WKwebview / SFSafariViewController ) |
On a wkwebview you won't have access to the camera. The MediaDevices.getUserMedia() return undefined This is a feature or bug (depends if you work at apple or not).
You'll need to play along with something like : https://github.com/amelierosser/arkit-web
I Tested it a bit and was happy. It has been deployed for kikk 2018 by Amelie Rosser.
Based on this you will need to rework part of the AR.js api.
If you want to test something else, you can try : https://github.com/VirtuoWorks/CanvasCameraDemo which stream to a canvas and is fairly stable. You'll need phonegap or getcapacitor.
GD
|
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 oldernavigator.getUserMedia
. Also, thevideo
element needs to have the attributesautoplay
,muted
andplaysinline
for it to work.With these changes, this example code works perfectly:
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
The text was updated successfully, but these errors were encountered: