Add basic camera support to UI. Fun times.

www/css/app.css

@@ -9,4 +9,8 @@
 	height: 10%;
 	float: left;
 	margin: 0 1% 1% 0;
+}
+
+#videoStream {
+	display: none;
 }

www/index.html

@@ -19,6 +19,7 @@
         </div>
     </section>
     <section class="section view">
+        <a class="button is-small" id="captureCamera">Camera</a>
         <a class="button is-small is-success" id="submitImage">Submit</a>
         <br /><br />
         <div class="columns">
@@ -29,12 +30,13 @@
 
             </div>
         </div>
+        <video id="videoStream"></video>
     </section>
     <footer class="footer">
         <div class="container">
             <div class="content has-text-centered">
                 <p>
-                    <strong>Pixel Display</strong> (pixdisp). The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. Fork, patch, contribute at Github.
+                    <strong>Pixel Display</strong> (pixdisp). The source code is licensed <a href="http://opensource.org/licenses/mit-license.php" target="_blank">MIT</a>. <a href="https://github.com/sexybiggetje/pixdisp" target="_blank">Fork, patch, contribute at Github</a>.
                 </p>
             </div>
         </div>

www/js/app.js

@@ -30,6 +30,7 @@ class App
 
 		canvas.addEventListener( 'click', this.handleCanvas );
 		document.getElementById( 'submitImage' ).addEventListener( 'click', this.submitCanvas );
+		document.getElementById( 'captureCamera' ).addEventListener( 'click', this.captureCamera );
 
 		this.canvas = canvas;
 		this.context = canvas.getContext( '2d' );
@@ -164,6 +165,41 @@ class App
 
 		obj = encodeURI( 'data=' + JSON.stringify( obj ) );
 		request.send( obj );
+
+	}
+
+	captureCamera( ev ) {
+
+		if ( ev.preventDefault ) {
+			ev.preventDefault();
+		}
+
+		navigator.mediaDevices.getUserMedia( { video: true, audio: false } )
+			.then( function( stream ) {
+				let vs = document.getElementById( 'videoStream' );
+				vs.srcObject = stream;
+				vs.play();
+
+				app.drawVideoToCanvas();
+			} )
+			.catch( function( err ) {
+				console.warn( err );
+			} )
+		;
+
+	}
+
+	drawVideoToCanvas() {
+
+		try {
+
+			let vs = document.getElementById( 'videoStream' );
+			app.context.drawImage( vs, 0, 0, app.canvas.width, app.canvas.height );
+
+		} catch ( err ) { }
+
+		window.requestAnimationFrame( app.drawVideoToCanvas );
+
 	}
 
 }