search

jeromeetienne / AR.js

Efficient Augmented Reality for the Web - 60fps on mobile!
MIT License
15.8k stars 2.22k forks source link

Webcam Error NotSupportedError Only secure origins are allowed #399

Closed filippomarra closed 5 years ago

filippomarra commented 6 years ago

Do you want to request a feature or report a bug? Report a Bug

What is the current behavior? I made an example app following the tutorials found on this link: https://medium.com/chialab-open-source/how-to-deliver-ar-on-the-web-only-with-a-qr-code-e24b7b61f8cb. The technologies I used are Ionic3 and AR.js. I'm having a problem with my camera acquisition on external link given by terminal when I do the command "ionic serve". In particular it gives me this error: "Webcam Error Name: NotSupportedError Message: Only secure origins are allowed".

If the current behavior is a bug, please provide the steps to reproduce. I did "Ionic serve" from my terminal and it works on my localhost from the PC, but with external links it gives me the error that I reported before.

What is the expected behavior? The camera should open to scan a marker generated by me and it should open an image to test that the AR is working fine.

Please mention other relevant information such as the browser version, Operating System and Device Name I'm using Ionic3, Google Chrome from the PC and I have a Huawei P10 Lite device with Android 8 installed.

mnutsch commented 6 years ago

This error message occurs when trying to access user media without HTTPS.

Try replacing HTTP with HTTPS in your URL and see if that resolves the issue.

filippomarra commented 6 years ago

I tried to replace HTTP with HTTPS in the URL but It doesn't work. I think that is needed to change some options in Ionic to serve my app in HTTPS instead of HTTP, does anyone know how can I do this?

josephrexme commented 6 years ago

@filippomarra you will have to create a TLS/SSL certificate for your server. If you are running this on localhost, you can follow the instructions here https://medium.freecodecamp.org/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec

vmmelo commented 6 years ago

@filippomarra it works on mozilla firefox, if you don't want to create a TSL/SSL certificate

frontavity commented 6 years ago

I found a really good solution fixing it. You can forward your localhost with ngrok.io to an only link, even with authentication. I works perfect when using https.