immersive-web / webxr-samples

Samples to demonstrate use of the WebXR Device API
https://immersive-web.github.io/webxr-samples/
MIT License
995 stars 479 forks source link

AR samples not working on Localhost #47

Closed ItIsArmin closed 4 years ago

ItIsArmin commented 4 years ago

AR samples working just fine on webxr-samples github.io, but when I run the clone on localhost it says "AR NOT FOUND"

AR

klausw commented 4 years ago

There's a HTTPS requirement for using WebXR, but using localhost has an exception for that and should work. What's the exact URL you're using for the localhost test?

file:// URLs are not considered to be localhost addresses, you need to use HTTP to access http://localhost:8000 or similar using either port forwarding or a local http server.

ItIsArmin commented 4 years ago

Thank you, I just tested with HTTPS local server and it worked, but before trying HTTPS, I was running "Web Server for chrome" App on my PC, and on my AR compatible phone I was using http://192.168.1.20:8887/proposals/phone-ar-hit-test.html to access. I also enabled "#allow-insecure-localhost" just in case, but did not help.

jsantell commented 4 years ago

You'll need to use something like adb reverse or port forwarding in Chrome so that you're visiting something that looks like a local URL on device e.g. localhost or 127.0.0.1 to circumvent the HTTPS restriction for local dev

klausw commented 4 years ago

Ah, that's the problem - 192.168.1.20 isn't a localhost address. You need to use http://localhost:8887 or http://127.0.0.1:8887. (Or, for IPv6, "::1" and "localhost6" also work.) Even if 192.168.1.20 is your device's current IP address, as far as I know that's not recognized as localhost.

If this was your PC's address, that's definitely not a localhost address. It specifically means "same device", not "on the same local network".

I assume you mean a local HTTP server? HTTPS isn't needed for localhost, and setting up the certificates needed for HTTPS would be an unnecessary annoyance.

ItIsArmin commented 4 years ago

I'm now running it with chrome port forwarding and a USB cable, and it works perfectly fine. I appreciate it guys, we are building something big with this

wimachtendink commented 4 years ago

I don't remember where I got it but I use the following as "server.py" and this works really well.

# -*- coding: utf-8 -*-
#test on python 3.4 ,python of lower version  has different module organization.
import http.server
from http.server import HTTPServer, BaseHTTPRequestHandler
import socketserver

PORT = 8080

Handler = http.server.SimpleHTTPRequestHandler

Handler.extensions_map={
        '.manifest': 'text/cache-manifest',
    '.html': 'text/html',
        '.png': 'image/png',
    '.jpg': 'image/jpg',
    '.svg': 'image/svg+xml',
    '.css': 'text/css',
    '.js':  'application/x-javascript',
    '': 'application/octet-stream', # Default
    }

httpd = socketserver.TCPServer(("", PORT), Handler)

print("serving at port", PORT)
httpd.serve_forever()

then it should be served to http://127.0.0.1:8080 It's so easy and small that I just keep a copy in every project so I cas serve directly from the file (just double click) and not worry about anything it.

jsantell commented 4 years ago

serve on npm and python's SimpleHTTPServer are two basic servers for this purpose, in addition to @wimachtendink's snippet above. I'll file an issue indicating that some text would be helpful explaining the secure context requirements used by WebXR.

Thanks for filing!