Last active
December 8, 2020 10:16
-
-
Save victory-sokolov/ca551c3737769dfa3561f7f3c127ad20 to your computer and use it in GitHub Desktop.
Get camera feed
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, user-scalable=yes, initial-scale=1, maximum-scale=1"> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <div class="display-cover"> | |
| <video id="video" class="hidden" autoplay playsinline>Your browser does not support the video tag.</video> | |
| <canvas id="video-output"></canvas> | |
| </div> | |
| <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> | |
| <script> | |
| let video = document.getElementById('video'); | |
| let videoOutput = document.getElementById('video-output'); | |
| let videoWidth, videoHeight; | |
| let streaming = false; | |
| const resolutions = { | |
| 'qqvga': { width: { exact: 160 }, height: { exact: 120 } }, | |
| 'qvga': { width: { exact: 320 }, height: { exact: 240 } }, | |
| 'vga': { width: { exact: 640 }, height: { exact: 480 } } | |
| }; | |
| const isMobileDevice = () => { | |
| if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i | |
| .test(navigator.userAgent)) { | |
| return true; | |
| } | |
| return false; | |
| }; | |
| const cameraEnvironment = () => { | |
| /* | |
| * if using mobile device switch to environment camera | |
| * otherwise switch to frontal camera | |
| */ | |
| return isMobileDevice() ? 'environment' : 'user'; | |
| } | |
| const getVideoConstraint = () => { | |
| if (isMobileDevice()) { | |
| videoConstraint = { | |
| width: { ideal: window.screen.height }, | |
| height: { ideal: window.screen.width }, | |
| facingMode: cameraEnvironment(), | |
| }; | |
| } else { | |
| if (window.innerWidth < 960) { | |
| videoConstraint = resolutions['qvga']; | |
| } else { | |
| videoConstraint = resolutions['vga']; | |
| } | |
| } | |
| return videoConstraint; | |
| } | |
| const startCamera = async () => { | |
| const constraint = getVideoConstraint(); | |
| if (streaming) return; | |
| navigator.getUserMedia = navigator.getUserMedia || | |
| navigator.webkitGetUserMedia || | |
| navigator.mozGetUserMedia; | |
| if(navigator.getUserMedia) { | |
| stopCamera(); | |
| try { | |
| stream = await navigator.mediaDevices.getUserMedia({video: constraint, audio: false}); | |
| video.srcObject = stream; | |
| video.onloadedmetadata = function(e) { | |
| video.play(); | |
| } | |
| } catch(err) { | |
| console.log(`An error occured! ${ err}`); | |
| } | |
| video.addEventListener("canplay", (ev) => { | |
| if (!streaming) { | |
| videoWidth = video.videoWidth; | |
| videoHeight = video.videoHeight; | |
| videoOutput.width = videoWidth; | |
| videoOutput.height = videoHeight; | |
| streaming = true; | |
| } | |
| }, false); | |
| } else { | |
| console.error("getUserMedia not supported"); | |
| } | |
| } | |
| const stopCamera = (stream) => { | |
| if (!streaming) return; | |
| stream.getTracks().forEach((track) => { | |
| track.stop(); | |
| }); | |
| streaming = false; | |
| } | |
| startCamera(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment