enable https when using webpack-dev-server to fix mobile getusermedia…

… error

package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "description": "AR AI VIS demo",
   "scripts": {
-    "start": "./node_modules/.bin/webpack-dev-server  --config webpack.config.js",
+    "start": "./node_modules/.bin/webpack-dev-server --config webpack.config.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "geekplux",

src/index.js

@@ -2,75 +2,9 @@ import tracking from 'tracking';
 import 'tracking-face';
 import './style.css';
 
-const video = document.getElementById('video');
-const h1 = document.querySelector('h1');
-
-// navigator.getUserMedia = navigator.getUserMedia ||
-//   navigator.webkitGetUserMedia ||
-//   navigator.mozGetUserMedia ||
-//   navigator.msGetUserMedia;
-
-// Older browsers might not implement mediaDevices at all, so we set an empty object first
-if (navigator.mediaDevices === undefined) {
-  navigator.mediaDevices = {};
-}
-
-// Some browsers partially implement mediaDevices. We can't just assign an object
-// with getUserMedia as it would overwrite existing properties.
-// Here, we will just add the getUserMedia property if it's missing.
-if (navigator.mediaDevices.getUserMedia === undefined) {
-  navigator.mediaDevices.getUserMedia = (constraints) => {
-    // First get ahold of the legacy getUserMedia, if present
-    const getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
-
-    // Some browsers just don't implement it - return a rejected promise with an error
-    // to keep a consistent interface
-    if (!getUserMedia) {
-      return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
-    }
-
-    // Otherwise, wrap the call to the old navigator.getUserMedia with a Promise
-    return new Promise((resolve, reject) => {
-      getUserMedia.call(navigator, constraints, resolve, reject);
-    });
-  };
-}
-
-navigator.mediaDevices.getUserMedia({ audio: true, video: true })
-  .then((stream) => {
-    /* use the stream */
-    callback(stream);
-    // var video = document.querySelector('video');
-    // Older browsers may not have srcObject
-    if ('srcObject' in video) {
-      video.srcObject = stream;
-    } else {
-      // Avoid using this in new browsers, as it is going away.
-      video.src = window.URL.createObjectURL(stream);
-    }
-    video.onloadedmetadata = (e) => {
-      video.play();
-    };
-  })
-  .catch((err) => {
-    /* handle the error */
-    fallback(err);
-    console.log(err.name + ': ' + err.message);
-  });
-
-function fallback (e) {
-  h1.innerHTML = 'not support getting userMedia';
-  video.src = 'fallbackvideo.webm';
-}
-
-function callback (stream) {
-  h1.innerHTML = 'success';
-}
-
 /**
  * face tracking
  */
-
 const canvas = document.getElementById('canvas');
 const context = canvas.getContext('2d');
 const tracker = new tracking.ObjectTracker('face');

webpack.config.js

@@ -59,7 +59,8 @@ module.exports = {
     stats: { color: true },
     port: 3000,
     host: '0.0.0.0',
-    disableHostCheck: true
+    disableHostCheck: true,
+    https: true
   },
   plugins: [
     new webpack.ProvidePlugin({

yarn.lock

@@ -5452,8 +5452,8 @@ yargs@^6.0.0:
     yargs-parser "^4.2.0"
 
 yargs@^7.0.2:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.0.2.tgz#115b97df1321823e8b8648e8968c782521221f67"
   dependencies:
     camelcase "^3.0.0"
     cliui "^3.2.0"