Created
April 17, 2018 21:28
-
-
Save made-by-chris/71dc244c7777a93e6a70a870444241b4 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 100vw; | |
| background: black; | |
| height: 80px; | |
| } | |
| nav > * { | |
| margin: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="camera"> | |
| <video id="video"></video> | |
| </div> | |
| <canvas id="canvas"></canvas> | |
| <canvas class="hidden"></canvas> | |
| </body> | |
| <script> | |
| var width = 320; // We will scale the photo width to this | |
| var height = 0; // This will be computed based on the input stream | |
| var streaming = false; | |
| var video = null; | |
| var hiddencanvas = null; | |
| var canvas = null; | |
| var photo = null; | |
| var startbutton = null; | |
| function startup() { | |
| video = document.getElementById('video'); | |
| hiddencanvas = document.querySelector('.hidden'); | |
| canvas = document.getElementById('canvas'); | |
| photo = document.getElementById('photo'); | |
| startbutton = document.getElementById('startbutton'); | |
| navigator.mediaDevices.getUserMedia({ video: true, audio: false }) | |
| .then(function(stream) { | |
| video.srcObject = stream; | |
| video.play(); | |
| }) | |
| .catch(function(err) { | |
| console.log("An error occured! " + err); | |
| }); | |
| video.addEventListener('canplay', function(ev){ | |
| if (!streaming) { | |
| height = video.videoHeight / (video.videoWidth/width); | |
| video.setAttribute('width', width); | |
| video.setAttribute('height', height); | |
| canvas.setAttribute('width', width); | |
| canvas.setAttribute('height', height); | |
| hiddencanvas.setAttribute('width', width); | |
| hiddencanvas.setAttribute('height', height); | |
| streaming = true; | |
| } | |
| }, false); | |
| } | |
| row = 0 | |
| setInterval(() => { | |
| row > height ? row = 0 : row += 1; | |
| var context = canvas.getContext('2d'); | |
| var hiddencontext = hiddencanvas.getContext('2d'); | |
| hiddencanvas.width = width; | |
| hiddencanvas.height = height; | |
| hiddencontext.drawImage(video, 0, 0, width, height); | |
| pixels = hiddencontext.getImageData(0,row,width,row+1); | |
| canvas.width = width; | |
| canvas.height = height; | |
| context.drawImage(video, 0, row, width, 1); | |
| var data = canvas.toDataURL('image/png'); | |
| }, 25) | |
| startup() | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment