Created
December 20, 2018 21:25
-
-
Save rmar72/064185e295ebcd38c681767c06a22814 to your computer and use it in GitHub Desktop.
Minimal code to use webcam on Chrome browser
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
| <!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>Go Live on Chrome Camera</title> | |
| </head> | |
| <style> | |
| #SourceVideo { | |
| width: 400px; | |
| border: 5px solid black; | |
| } | |
| </style> | |
| <body> | |
| <p> | |
| Minimal code to play video on Chrome, works on Edge too, but dont work on Firefox, not even with polyfill<br> | |
| <strong>Chrome</strong> - Version 71.0.3578.98 (Official Build) (64-bit)<br> | |
| <strong>Edge</strong> - Microsoft Edge 42.17134.1.0 Microsoft EdgeHTML 17.17134<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> | |
| <button>Go Live</button> | |
| <script> | |
| var video, button; | |
| window.addEventListener('load', init); | |
| function init(){ | |
| button = document.getElementsByTagName('button')[0]; | |
| video = document.getElementById('SourceVideo'); | |
| if(video.readyState >=3){ | |
| readyToPlay(); // on first load wont be ready, bc state is 0 so goes to else, eventually turns to >=3 | |
| } 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(); | |
| }); | |
| } | |
| // plays the video once eveything else is good to go | |
| function readyToPlay(){ | |
| video.play(); | |
| } | |
| // 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); // works for edge, but breaks chrome | |
| video.srcObject = stream; | |
| console.dir( video) | |
| } | |
| // MediaDevices polyfill | |
| // will work on chrome, edge, firefox, but 1 at a time | |
| (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
Minimal code to play video on Chrome, works on Edge too, but don't work on Firefox, not even with polyfill