navigator.mediaDevices undefined when serving ip address

[kmturley]

Thanks for the great demo! I came across this issue when testing across a local network using ip addresses.

Browsers only allow you to access navigator.mediaDevices on http://localhost OR secure https connections.

You can override this option on Chrome using the startup flag:
--unsafely-treat-insecure-origin-as-secure="http://example.com"

But otherwise its really hard to develop and test this. So a better way is to add https support to the project.

Install the node https server:
npm install https

update server.js to allow switching between secure:

const ADDRESS = '0.0.0.0';
const PORT = 8080;
const MAX_CLIENTS = 50;
const secure = true;

let os = require('os');
let app = null;
let host = '';
if (secure === true) {
    const fs = require('fs');
    const options = {
        key: fs.readFileSync('./client-key.pem'),
        cert: fs.readFileSync('./client-cert.pem')
    };
    host = 'https';
    app = require('https').createServer(options, handler);
} else {
    host = 'http';
    app = require('http').createServer(handler);
}

let io = require('socket.io')(app);

app.listen(PORT, ADDRESS);
console.log(`Socket.io server listening on: ${host}://${ADDRESS}:${PORT}`);

update lib.js with

this.socket = io.connect(`//${this.ip}:${this.port}`);

Generate a local key and certificate:

openssl genrsa -out client-key.pem 2048
openssl req -new -key client-key.pem -out client.csr
openssl x509 -req -in client.csr -signkey client-key.pem -out client-cert.pem

Then start the local server using:
http-server --ssl --cert ./client-cert.pem --key ./client-key.pem