-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (96 loc) · 3.94 KB
/
index.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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!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>Media App</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<button id="get-devices-button">Get devices</button>
<select id="device-select">
<option value="">--Please choose an option--</option>
</select>
<select id="resolution-select">
<option value="1024x576">1024x576</option>
<option value="1280x720">1280x720</option>
<option value="1920x1080">1920x1080</option>
<option value="2560x1440">2560x1440</option>
<option value="3840x2160">3840x2160</option>
</select>
<button id="open-device-button">Open device</button>
<div id="video-container"></div>
<script>
(() => {
let deviceSelect = document.getElementById("device-select");
let resolutionSelect = document.getElementById("resolution-select");
let getDevicesButton = document.getElementById("get-devices-button");
let openDeviceButton = document.getElementById("open-device-button");
let videoContainer = document.getElementById("video-container");
// async function tryCameraResolution(width, height) {
// await navigator.mediaDevices
// .getUserMedia({ video: { width, height } })
// .then((mediaStream) => {
// mediaStream.getTracks().forEach((track) => track.stop());
// console.log(`Resolution ${width}x${height} supported`);
// })
// .catch((error) => {
// if (error.name === "OverconstrainedError")
// console.log(`Resolution ${width}x${height} not supported`);
// else console.error("Error accessing camera:", error);
// });
// }
// function tryManyCameraResolutions() {
// tryCameraResolution(3840, 2160);
// tryCameraResolution(1920, 1080);
// tryCameraResolution(1280, 720);
// tryCameraResolution(640, 480);
// }
async function promptForCameraPermission() {
await navigator.mediaDevices
.getUserMedia({ video: true })
.then((mS) => mS.getTracks().forEach((track) => track.stop()))
.catch((error) => console.log("Error:", error.message));
}
getDevicesButton.addEventListener("click", async () => {
// tryManyCameraResolutions();
await promptForCameraPermission();
// Lọc lấy thiết bị "webcam" từ danh sách các thiết bị
let devices = await navigator.mediaDevices.enumerateDevices();
devices = devices.filter((d) => d.kind == "videoinput");
// Thêm các thiết bị "webcam" vừa tìm được vào danh sách để lựa chọn
let elements = devices.map((d) => {
let element = document.createElement("option");
element.value = d.deviceId;
element.textContent = d.label;
return element;
});
deviceSelect.replaceChildren(...elements);
});
openDeviceButton.addEventListener("click", async () => {
if (deviceSelect.value == "") return;
let videoElement = document.createElement("video");
videoContainer.replaceChildren(videoElement);
const [width, height] = resolutionSelect.value
.split("x")
.map((x) => Number(x));
let mediaStream = await navigator.mediaDevices.getUserMedia({
video: {
deviceId: deviceSelect.value,
width: width,
height: height,
},
});
videoElement.srcObject = mediaStream;
await videoElement.play();
});
})();
</script>
</body>
</html>