Created
December 20, 2018 21:26
-
-
Save rmar72/7c1a8512651f1ad2937512997a39d838 to your computer and use it in GitHub Desktop.
Minimal code to use webcam on Firefox browser
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>Go Live on Firefox/Chrome Camera</title> | |
| </head> | |
| <style> | |
| #SourceVideo { | |
| width: 400px; | |
| border: 5px solid black; | |
| } | |
| </style> | |
| <body> | |
| <p> | |
| Minimal code to play video on Firefox, works on Chrome & Edge too!! BTW Audio really sucks on Firefox<br> | |
| <p>However it uses old code to do so and apparently only works on one browser at a time | |
| if you have it streaming to one client it wont work on others. | |
| </p> | |
| <strong>Firefox</strong> - version 64.0 (64-bit) Firefox Release December 11, 2018, 3 days ago | |
| <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> | |
| </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'); | |
| // 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(){ | |
| navigator.getUserMedia = navigator.getUserMedia || | |
| navigator.webkitGetUserMedia || | |
| navigator.mozGetUserMedia; // ends up using this, btw strict about requiring 3 args | |
| // ----- BREAKING CODE ---------- | |
| // if(navigator.getUserMedia){ // if browser has a camera and can grab the user media | |
| // navigator.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); | |
| // } | |
| // -------------- THIS CODE BELOW WORKS BUT --------- | |
| // --- but navigator.mozGetUserMedia has been replaced by navigator.mediaDevices.getUserMedia, 2018 | |
| if (navigator.getUserMedia) { | |
| navigator.getUserMedia({ audio: true, video: true }, | |
| function(stream) { | |
| video.srcObject = stream; | |
| video.onloadedmetadata = function(e) { | |
| video.play(); | |
| }; | |
| }, | |
| function(err) { | |
| console.log("The following error occurred: " + err.name); | |
| } | |
| ); | |
| } | |
| else { | |
| console.log("getUserMedia not supported"); | |
| } | |
| } | |
| </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 Firefox, works on Chrome & Edge too!! BTW Audio really sucked on Firefox