Created
December 20, 2018 21:29
-
-
Save rmar72/90ca643a1afa8a052c84366cc1748e79 to your computer and use it in GitHub Desktop.
Video To Canvas, Color Inverted Frames
This file contains 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <title>Video To Canvas, Color Invert Frames</title> | |
| </head> | |
| <style> | |
| #SourceVideo { | |
| width: 400px; | |
| border: 1px solid black; | |
| } | |
| </style> | |
| <body> | |
| <p> | |
| Code works on Edge, don't work on Firefox nor Chrome not even with polyfill<br> | |
| <strong>Edge</strong> - Microsoft Edge 42.17134.1.0 Microsoft EdgeHTML 17.17134<br> | |
| <strong>Chrome</strong> - Version 71.0.3578.98 (Official Build) (64-bit)<br> | |
| <strong>Firefox</strong> - version 64.0 (64-bit) Firefox Release December 11, 2018, 3 days ago | |
| </p><br> | |
| <video id="SourceVideo" source="video.mp4"></video> | |
| <canvas id="myCanvas" class="video"></canvas> | |
| <button>Go Live</button> | |
| <script> | |
| var video, button, canvas, context; | |
| window.addEventListener('load', init); | |
| function init(){ | |
| button = document.getElementsByTagName('button')[0]; | |
| canvas = document.querySelector('#myCanvas'); | |
| context = canvas.getContext('2d'); ; | |
| video = document.getElementById('SourceVideo'); | |
| if(video.readyState >=3){ | |
| readyToPlay(); // on first load wont be ready, bc state is 0 so goes to else,I dont think it evers hits this block | |
| } else { | |
| // initial config for video | |
| video.addEventListener('canplay', readyToPlay); // later it'll fire on its own thus running readyToPlay | |
| } | |
| // the on switch | |
| button.addEventListener('click', function(){ | |
| startCamera(); | |
| }); | |
| } | |
| // when turning switch on, main purpose to get a stream to feed video by using browser's devices (camera) | |
| function startCamera(){ | |
| if(navigator.mediaDevices.getUserMedia){ // if browser has a camera and can grab the user media | |
| navigator.mediaDevices.getUserMedia({video: true, audio: true}) // can enable/disable video & audio here | |
| .then((vid_stream) => initCamera(vid_stream)) // then feeds stream | |
| .catch("console error: ",console.error); | |
| } | |
| } | |
| // camera feeds stream to video element | |
| function initCamera(stream){ | |
| video.src = window.URL.createObjectURL(stream); // createObjectURL(stream) acts as the funnel to feed the stream to the video.src | |
| } | |
| // on event 'canplay' | |
| function readyToPlay(){ | |
| canvas.width = video.videoWidth; | |
| canvas.height = video.videoHeight; | |
| video.play(); | |
| drawFrame(video); | |
| } | |
| // feeds video to canvas | |
| function drawFrame(video) { | |
| context.drawImage(video, 0, 0); | |
| var imageData = context.getImageData(0, 0, canvas.width, canvas.height); | |
| invertColors(imageData.data); | |
| context.putImageData(imageData, 0, 0); | |
| setTimeout(function () { | |
| drawFrame(video); | |
| }, 10); | |
| } | |
| function invertColors(data) { | |
| for (var i = 0; i < data.length; i+= 4) { | |
| data[i] = data[i] ^ 255; | |
| data[i+1] = data[i+1] ^ 255; | |
| data[i+2] = data[i+2] ^ 255; | |
| } | |
| } | |
| // MediaDevices polyfill | |
| /* | |
| (function() { | |
| var promisifiedOldGUM = function(constraints, successCallback, errorCallback) { | |
| // First get ahold of getUserMedia, if present | |
| var getUserMedia = (navigator.getUserMedia || | |
| navigator.webkitGetUserMedia || | |
| navigator.mozGetUserMedia || | |
| navigator.msGetUserMedia); | |
| // 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(function(successCallback, errorCallback) { | |
| getUserMedia.call(navigator, constraints, successCallback, errorCallback); | |
| }); | |
| } | |
| // 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 = promisifiedOldGUM; | |
| } | |
| })(); | |
| */ | |
| // End polyfill -------- | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Code works on Edge, don't work on Firefox nor Chrome not even with polyfill