Created
July 3, 2020 09:22
-
-
Save michaelbromley/73a15611891ea807de95232f33b1438a to your computer and use it in GitHub Desktop.
Floating webcam script
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Display Webcam Stream</title> | |
| <style> | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <video autoplay="true" id="videoElement"></video> | |
| <button id="pipButtonElement">Float video frame</button> | |
| </div> | |
| <script> | |
| var video = document.querySelector("#videoElement"); | |
| var pipButtonElement = document.querySelector("#pipButtonElement"); | |
| getMedia({ audio: false, video: true }); | |
| pipButtonElement.addEventListener('click', async function () { | |
| pipButtonElement.disabled = true; | |
| await videoElement.requestPictureInPicture(); | |
| pipButtonElement.disabled = false; | |
| }); | |
| async function getMedia(constraints) { | |
| let stream = null; | |
| try { | |
| stream = await navigator.mediaDevices.getUserMedia(constraints); | |
| video.srcObject = stream; | |
| video.onloadedmetadata = function (e) { | |
| video.play(); | |
| }; | |
| } catch (err) { | |
| console.error(err); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Open this file in a browser in latest Chrome, and you can display your webcam in a floating frame on your desktop.