martijn/pixdisp
1
0
Fork 0
mirror of https://github.com/sexybiggetje/pixdisp.git synced 2024-11-21 20:41:03 +01:00
Code Issues Releases Activity

Add basic camera support to UI. Fun times.

Browse source
This commit is contained in:
Martijn de Boer 2017-12-28 01:56:22 +01:00
parent f9ad39ea01
commit ba74bd2de2
3 changed files with 43 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
www/css/app.css
View file

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

4
www/index.html
View file

@ -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>

36
www/js/app.js
View file

@ -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 );
}
}