JavaScript GetUserMedia using Chrome with localhost without HTTPS

Question

I didn't know how to express it in the title, but I'm having an issue with Chrome.

I'm trying to use GetUserMedia() and GetPosition() in Chrome. I know that it requires SSL certification first, unless you're on localhost. The thing is, I can't try my project on my computer, so I must use my smart phone, and in order to access localhost through my smartphone, I must use the machine's IP address (192.168.1.4). The problem is that Chrome doesn't consider this IP address as localhost, so it requires an SSL certificate.

Is there any way I can test my project on my smartphone without having to install an SSL certififcate?

Answer 1

Add your IP address to Chrome's Insecure origins treated as secure setting.

1. Go to chrome://flags/#unsafely-treat-insecure-origin-as-secure in Chrome.

2. Find the Insecure origins treated as secure setting.

3. Enable it.

4. Enter in http://cntral.me:3000.

5. Relaunch Chrome.

6. Voila!

See https://medium.com/@Carmichaelize/enabling-the-microphone-camera-in-chrome-for-local-unsecure-origins-9c90c3149339 for a good walkthrough as well.

Answer 2

You can use a service like https://ngrok.com/ to map a public DNS address with SSL certificate to a port on your local machine.

Answer 3

I assume you're trying to host a Web service on a computer and access it from a smart phone using the hostname localhost.

Two options come to mind:

First, if your smart phone is rooted, you can change /etc/hosts so that the name localhost resolves to 192.168.1.4 instead of to 127.0.0.1.

Second, if you can run an SSH server on your computer, you can set up an SSH client on your phone to forward traffic on some port to another port on a different machine.

For example, in ConnectBot for Android, you can

1. create a profile for your computer running an SSH server on 192.168.1.4
2. long-press the profile, and select "Edit port forwards" and then "Add port forward" from the port forwarding menu
3. configure it to "Local" and then choose a local source port that can be claimed by a non-root user on your phone (say, 8080) and on the bottom line, use localhost:80 (or whatever port the computer is running the service on) to make the SSH server have the forwarding tunnel direct to itself on port 80

This will cause all traffic directed at localhost:8080 on your phone to go to 192.168.1.4:80 on your computer. The browser has no idea that the localhsot:8080 service is actually just an SSH tunnel to 192.168.1.4:80, so it will treat it like any other localhost address.

Answer 4

You can do this without an SSL certificate at all by tunneling the webserver to your phone's localhost.

I use termux to run this command (on the phone itself):

ssh -L 8080:localhost:8080 192.168.0.172

(Leave the ssh session open)

Then go to http://localhost:8080/ on your phone.

If you don't want the session to time out, you can use autossh:

autossh -M 0 -L 8080:localhost:8080 192.168.0.172

Important note: Your development machine (or dev server) needs to be accessible through ssh. For Linux, this can be done by installing open-ssh and enabling/starting the sshd service. You can look up guides for this online.