Skip to content

Instantly share code, notes, and snippets.

@JaosnHsieh

JaosnHsieh/index.html

Last active September 9, 2022 04:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JaosnHsieh/aa63c01b7a58f459132d9f0e3c799a45 to your computer and use it in GitHub Desktop.
Save JaosnHsieh/aa63c01b7a58f459132d9f0e3c799a45 to your computer and use it in GitHub Desktop.
Download ZIP
Use picture in picture browser API to monitor my back when I use a laptop with a cam
Raw
index.html
<!-- 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