forked from steimelchrome/steimelchrome.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
autopip.html
75 lines (68 loc) · 1.75 KB
/
autopip.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Autopip Demo</title>
<style>
#video-container {
border: 1px solid black;
}
#video-container, video {
width: 300px;
height: 300px;
}
#open-camera, #toggle-pip {
display: block;
}
</style>
</head>
<body>
<p id="error"></p>
<div id="video-container">
<video width=300 height=300></video>
</div>
<input type="button" id="open-camera" value="Open Camera"></input>
<input type="button" id="toggle-pip" value="Toggle Manual Pip"></input>
</body>
<script>
const video = document.querySelector('video');
const videoContainer = document.querySelector('#video-container');
const errorDisplay = document.querySelector('#error');
const openCameraButton = document.querySelector('#open-camera');
const togglePipButton = document.querySelector('#toggle-pip');
let pipWindow = null;
async function enterPip() {
if (pipWindow != null) {
return;
}
pipWindow = await documentPictureInPicture.requestWindow({width: 400, height: 400});
pipWindow.document.body.append(video);
pipWindow.addEventListener('unload', _ => {
videoContainer.append(video);
pipWindow = null;
});
}
try {
navigator.mediaSession.setActionHandler('enterpictureinpicture', enterPip);
} catch(error) {
errorDisplay.innerText = error;
console.log(error);
}
openCameraButton.addEventListener("click", async () => {
try {
const constraints = { video: true, audio: true };
video.srcObject = await navigator.mediaDevices.getUserMedia(constraints);
video.muted = true;
video.play();
} catch (error) {
errorDisplay.innerText = error;
console.log(error);
}
});
togglePipButton.addEventListener("click", async () => {
if (pipWindow == null) {
enterPip();
return;
}
pipWindow.close();
});
</script>