Last active
September 9, 2022 04:21
-
-
Save JaosnHsieh/aa63c01b7a58f459132d9f0e3c799a45 to your computer and use it in GitHub Desktop.
Use picture in picture browser API to monitor my back when I use a laptop with a cam
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
| <!-- Runnable examples --> | |
| <!-- https://jsfiddle.net/vatnc7b3/show --> | |
| <!-- https://j2jr9u.csb.app/ --> | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Document</title> | |
| </head> | |
| <body> | |
| <button onclick="togglePictureInPicture()">Toggle</button> | |
| <video width="100" height="100" /> | |
| <script> | |
| const video = document.querySelector("video"); | |
| function togglePictureInPicture() { | |
| if (document.pictureInPictureElement) { | |
| document.exitPictureInPicture(); | |
| } else if (document.pictureInPictureEnabled) { | |
| video.requestPictureInPicture(); | |
| } | |
| } | |
| // Prefer camera resolution nearest to 1280x720. | |
| navigator.mediaDevices | |
| .getUserMedia({ | |
| audio: true, | |
| video: true | |
| }) | |
| .then((mediaStream) => { | |
| const video = document.querySelector("video"); | |
| video.srcObject = mediaStream; | |
| video.onloadedmetadata = () => { | |
| video.play(); | |
| }; | |
| }) | |
| .catch((err) => { | |
| // always check for errors at the end. | |
| console.error(`${err.name}: ${err.message}`); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment