Created
December 20, 2018 21:22
-
-
Save rmar72/d2cb36fb1cef56b705d2311f60b2911f to your computer and use it in GitHub Desktop.
Minimal code to use webcam on Edge 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 Edge Camera</title> | |
| </head> | |
| <style> | |
| #SourceVideo { | |
| width: 400px; | |
| border: 5px solid black; | |
| } | |
| </style> | |
| <body> | |
| <p> | |
| Minimal code to play video on Edge, dont 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> | |
| <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); // createObjectURL(stream) acts as the funnel to feed the stream to the video.src | |
| } | |
| // MediaDevices polyfill | |
| // will work on edge, firefox, but 1 at a time | |
| // DOESNT work on chrome, bc need to use video.srcObject and not above method ^ createObjectURL | |
| (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 Edge, don't work on Firefox nor Chrome not even with polyfill