AR.js
AR.js copied to clipboard
AR-js-org
Webcam Error NotReadable Samsung Galaxy S10 S20
Do you want to request a feature or report a bug?
What is the current behavior? After trying to get Ar.js running on my phone I also tried running any of your demos. Tried running this example on a Samsung Galaxy S20 Plus and a S10 Plus and it didn't work: https://ar-js-org.github.io/AR.js/aframe/examples/marker-based/basic.html
I've attached the error and console log of the page I got through android debug.
If the current behavior is a bug, please provide the steps to reproduce. Load this demo onto an S20 Plus https://ar-js-org.github.io/AR.js/aframe/examples/marker-based/basic.html
It is reproduced in this demo: https://ar-js-org.github.io/AR.js/aframe/examples/marker-based/basic.html Please mention other relevant information such as the browser version, Operating System and Device Name Samsung Galaxy S20 Plus Europeean version. Android 10 Chrome 83.0.4103.96
What is the expected behavior? The Ar demo should work. If this is a feature request, what is motivation or use case for changing the behavior?
Hey, I'm new to AR js, this isn't a permissions issue for your browser is it? I know you've probably checked! IE can your browser access the camera?
Yes. I've tried other websites to test for that. Browser can see my camera and hear my microphone. I've reseted the permisions and hit allow access on the webcam. Thisone worked as expected 5 minutes ago:
https://webrtc.github.io/test-pages/src/audio-and-video
Exactly the same issue for me with a Galaxy Note 10+. On the other hand, the AR examples from the A-Frame website work fine.
After testing the example above on Samsung S20 Ultra on almost every mobile browser, I think that I finally figured out why it occurs. The only browser that works is the Opera because it prompts you to choose the camera before loading the page. Seems that every other browser chooses the 0.3 MP, TOF depth camera as the main camera. If I choose this camera on Opera I get the same message, every other camera seems to be zoomed in but does not produce the error.
might be solved with: https://github.com/AR-js-org/AR.js/issues/26 please check this out! we need tests :)
@nicolocarpignoli : Nope, I tested @fcor's latest live repo example on my Galaxy S20+. I still get the WebCam NotReadableError.
Thanks for suggestion @nicolocarpignoli It turns out I was wrong, however I managed to solve the issue following the solution from https://github.com/AR-js-org/AR.js/issues/147#issuecomment-683330688
I changed the width and height to 960x720 to maintain the aspect ratio.
// resolution of at which we initialize in the source image sourceWidth: 960, sourceHeight: 720, // resolution displayed for the source displayWidth: 960, displayHeight: 720,
I tested it on Galaxy S20 Ultra 5G hope it helps @DerrickBarra
@Falloucik awesome! I didn't even see that solution, now we just need an official pull request to squash the bug on the main branch. (or if changing the resolution directly causes issues with other devices, then a fallback to choose a higher resolution if the first fails)
i tried the solution which @Falloucik tried , change display width height but it still error on my samsung note 10 plus
hello, try referencing this in your index.html file for the aframe script and let me know if it works. It worked for my Note 10+:
https://raw.githubusercontent.com/narmeenm94/IHpetra/main/aframe-ar.js
hello, try referencing this in your index.html file for the aframe script and let me know if it works. It worked for my Note 10+:
https://raw.githubusercontent.com/narmeenm94/IHpetra/main/aframe-ar.js
Hi @narmeenm94 - I'm new to this but having the exact same issue AND also on a Note10+ . I checked your link but could not understand it at all. Is there a particular chunk of code that you (or the others above) are adding to the script?
I'm trying to get a test going, using the AR.js/aframe/examples/image-tracking/nft-video/index.html code but the Camera NotReadableError has me stumped.
I remember I changed some screen dimensions in the aframe-ar.js script and it worked on the note 10+. So I provided the aframe-ar.js script I edited with the new dimensions so anyone can reference and test in their "index.html" file.
In the index.html file, these might be the first few lines:
This is the modified aframe-ar.js script raw link:
https://raw.githubusercontent.com/narmeenm94/IHpetra/main/aframe-ar.js
So if you replace this:
With this:
I think, I hope it will work for you, because that's how it worked on my note 10+
You can also use the Opera browser, and turn off the force enable zoom from settings , and choose either the second or the third back camera when it asks you which camera to use (the first doesn't work).
Let me know how it goes
You can also download this "aframe-ar.js" script from my test repository (link below), add it with your project files, and reference it in your index.html like:
Here's the path to the repository I have with the script with fixed dimensions, you only need the aframe-ar.js file: https://github.com/narmeenm94/IHpetra
I'm not used to html development, I usually make AR experiences using Unity and C#, so it took all night trying to get this to work on the Note 10+ 😂 I hope it works for you.
@narmeenm94 thanks so much for the reply! So... at the top of my file I had:
Good news is I'm not getting camera error, but it's just sitting on "Loading, please wait" screen.. :/
@hgoona Okay, that's a good sign. Try doing this:
go to your original script (this one: https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js) look for the following info and change the numbers from 640 and 480 to the numbers below: // resolution of at which we initialize in the source image sourceWidth: 1024, sourceHeight: 776, // resolution displayed for the source displayWidth: 1024, displayHeight: 776,
you can copy paste the whole thing from ( https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js) into a text editor and give it the same name (aframe-ar-nft.js) and reference it in your index.html file after you edit the numbers and place it in the same repository as all your other main files like this:
let me know how it goes
Changing the numbers in the same script should fix it, because the script you are using has the NFT functionality while mine doesn't. so just use the same script ( https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js) and change the numbers as above
I just received the email notification otherwise I would have replied earlier, apologies for that <3
I just received the email notification otherwise I would have replied earlier, apologies for that <3
no problem ! I am sincerely thankful for your replies. I'm going to try doing your above instructions (first i need to get my head around what you've just said though haha -- I'm clearly not native to coding :/
Here you go, i fixed the dimensions, try replacing the script source again in your index.html with this:
or download this file and add it with your main files and reference it as follows in your index.html:
ZOOOMG . @narmeenm94 Dude. thank you! Your previous instruction worked! [I copied the aframe-ar.js file from the other location, uploaded onto Glitch (I don't fully understand why Glitch looks different to what I'm seeing in Github :( --- anyway ) , copied it into Glitch, found those Source and Display width/height settings and adjusted. Finally. It works! And I think I've understood the code a little better.. I think..
Are you guys using Glitch btw ? When I look at some of the files on github its this unformatted mumbo-jumbo to my eyes. I know some people can read the Matrix, of course.. :)
@hgoona hahaha yeah the raw file looks weird on github, I usually use Visual studio, Glitch is great too.
@narmeenm94 amazing! I think i've got my head around Glitch a bit more :D Narmeen - just realised you're an Architect and into music - I'm the same here! I used to DJ and produce my own music (just for fun - nothing professional). I'm currently working on my own startup and also have my own Architectural company -- there's no work for the latter at present, so I'm focusing on all my other ideas.. Funny we should run into each other on the internet :)
What are you working on with AR ?
@narmeenm94 wondering if you may have come across this - is there a way to have persistent tracking? As in, even if the marker goes outside of view of the camera, use other visual features within the camera's view to continue positioning the 3d asset in space? I think Google Model Viewer does this, where the 3d asset doesn't just disappear, however I'm looking to use a marker that acts as a specific anchor to maintain the starting point and I guess keep things anchored / positioning calibrated whenever the market comes back into view. Any ideas on implementation?
@narmeenm94 If you're on LinkedIn could we connect? Might have a side gig that would interest you, AR project/PoC: https://www.linkedin.com/in/marc-fielding-a8bb3293/
@hgoona Okay, that's a good sign. Try doing this:
go to your original script (this one: https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js) look for the following info and change the numbers from 640 and 480 to the numbers below: // resolution of at which we initialize in the source image sourceWidth: 1024, sourceHeight: 776, // resolution displayed for the source displayWidth: 1024, displayHeight: 776,
you can copy paste the whole thing from ( https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js) into a text editor and give it the same name (aframe-ar-nft.js) and reference it in your index.html file after you edit the numbers and place it in the same repository as all your other main files like this:
let me know how it goes
Hi guys, there's no need to modify the ar.js source code, just override those values when initializing:
<a-scene arjs="sourceWidth: 1024; sourceHeight: 776; displayWidth: 1024; displayHeight: 776;">
