index.html
2.2 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>摄像头直播</title>
<script src="js/hls.js"></script>
<style>
body { font-family: sans-serif; }
.cam-container { margin-bottom: 40px; }
</style>
</head>
<body>
<h1>摄像头直播页面</h1>
<h2>选择摄像头</h2>
<select id="cameraSelect"></select>
<div id="video-container"></div>
<h2>系统资源占用</h2>
<pre id="sys-info">Loading...</pre>
<script>
// 动态加载摄像头列表
async function loadCameras() {
try {
const res = await fetch('/cameras');
const cameras = await res.json();
const select = document.getElementById('cameraSelect');
select.innerHTML = ''; // 清空现有选项
cameras.forEach(camera => {
const option = document.createElement('option');
option.value = camera.name;
option.textContent = camera.name;
select.appendChild(option);
});
// 更新视频流显示
select.addEventListener('change', updateVideoStream);
updateVideoStream(); // 默认加载第一个摄像头
} catch (err) {
console.error('Failed to load cameras:', err);
}
}
// 更新视频流
function updateVideoStream() {
const cameraName = document.getElementById('cameraSelect').value;
const source = `http://192.168.0.103/DS-2XC3046-LR/SX20250425AACHFZ4535655/index.m3u8`;
// 创建视频元素
const video = document.createElement('video');
video.controls = true;
video.autoplay = true;
video.width = 640;
video.height = 360;
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(source);
hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = source;
}
// 更新视频容器
const container = document.getElementById('video-container');
container.innerHTML = ''; // 清空现有视频
container.appendChild(video);
}
// 初始化摄像头选择框
loadCameras();
</script>
</body>
</html>