Running AR.js sample locally

install.md

Running ar.js from your own computer

The Error

I tried to run https://dev.to/andraconnect/augmented-reality-in-10-lines-of-html and https://github.com/jeromeetienne/ar.js from my own computer and got the following error:

Can't access user media :()

This error comes from:

https://github.com/jeromeetienne/jsartoolkit-experiments/blob/master/basic.html Line 100: navigator.getUserMedia

(Error message appears on line 117, the on Error callback function)

The reason is that: navigator.getUserMedia only works over https (no http, no localhost, no 127.0.0.1, no file://).

The solution

You'll need to create a certificate to serve the files from your own computer, in this case I followed: http://stackoverflow.com/questions/12871565/how-to-create-pem-files-for-https-web-server

I will use npm and http-server to locally serve the files (Node required)

1. Create the directories, certificates and npm configuration file

# Create a directory for the app and install http-server (this requires node and npm)
mkdir ar_test
cd ar_test
npm init
npm install http-server --save-dev

# Create a directory to save the certificate
mkdir conf
cd conf
openssl req -newkey rsa:2048 -new -nodes -x509 -days 3650 -keyout key.pem -out cert.pem

2. Open package.json (generated by npm init) and add the following script

"serve": "http-server -S -C conf/cert.pem -K conf/key.pem"

• Check package.json file if you have problems adding this line

3. Run it (from ar_test folder): npm run serve

package.json

{
  "name": "ar_test",
  "version": "1.0.0",
  "description": "Experiments with ar.js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "serve": "http-server -S -C conf/cert.pem -K conf/key.pem"
  },
  "author": "itzco",
  "license": "ISC",
  "dependencies": {
    "http-server": "^0.9.0"
  }
}