<!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>
<style></style>
</head>
<body>
<video id="video" autoplay autoPictureInPicture width="0" height="0"></video>
<button id="button">点击</button>
<select name="" id="select"></select>
<button id="pipButtonElement">进入画中画</button>
<button id="closeStream">关闭流</button>
</body>
<script>
const video = document.getElementById("video");
const button = document.getElementById("button");
const select = document.getElementById("select");
const closeStream = document.getElementById("closeStream");
let pipButtonElement = document.getElementById("pipButtonElement");
let mediaStream;
button.addEventListener("click", (event) => {
const constraints = {
video: true,
audio: false,
};
navigator.mediaDevices
.getUserMedia(constraints)
.then(async (stream) => {
video.srcObject = stream;
mediaStream = stream;
})
.catch((error) => {
console.log(error);
});
});
pipButtonElement.addEventListener("click", async function () {
pipButtonElement.disabled = true;
try {
await video.requestPictureInPicture();
} catch (error) {
} finally {
pipButtonElement.disabled = false;
}
});
closeStream.addEventListener("click", () => {
console.log("点击了");
function stopAndRemoveTrack(mediaStream) {
return function(track) {
console.log("track", track);
track.stop();
mediaStream.removeTrack(track);
}
}
mediaStream.getTracks().forEach(stopAndRemoveTrack(mediaStream))
})
video.onloadedmetadata = function() {
video.requestPictureInPicture();
}
function gotDevices(mediaDevices) {
select.innerHTML = "";
select.appendChild(document.createElement("option"));
let count = 1;
mediaDevices.forEach((mediaDevice) => {
if (mediaDevice.kind === "videoinput") {
const option = document.createElement("option");
option.value = mediaDevice.deviceId;
const label = mediaDevice.label || `Camera ${count++}`;
const textNode = document.createTextNode(label);
option.appendChild(textNode);
select.appendChild(option);
}
});
}
navigator.mediaDevices.enumerateDevices().then(gotDevices);
</script>
</html>
