给我写一个HTML,要求有可以调用摄像头和关闭摄像头的功能
时间: 2024-04-02 10:31:05 浏览: 15
好的,以下是一个简单的 HTML 页面,可以调用摄像头和关闭摄像头:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>调用摄像头和关闭摄像头</title>
</head>
<body>
<h1>调用摄像头和关闭摄像头</h1>
<!-- 调用摄像头 -->
<button onclick="startCamera()">打开摄像头</button>
<!-- 关闭摄像头 -->
<button onclick="stopCamera()">关闭摄像头</button>
<br/>
<!-- 显示摄像头视频 -->
<video id="video" width="640" height="480" autoplay></video>
<script>
// 获取 video 元素
const video = document.getElementById('video');
let stream = null;
// 打开摄像头
function startCamera() {
navigator.mediaDevices.getUserMedia({ video: true })
.then((s) => {
stream = s;
video.srcObject = stream;
})
.catch((err) => {
console.log('打开摄像头失败', err);
});
}
// 关闭摄像头
function stopCamera() {
if (stream) {
stream.getTracks().forEach((track) => {
track.stop();
});
}
}
</script>
</body>
</html>
```
在这个页面中,有两个按钮,分别是“打开摄像头”和“关闭摄像头”。当用户点击“打开摄像头”按钮时,会调用 `startCamera` 函数,该函数会调用 `navigator.mediaDevices.getUserMedia()` 方法获取摄像头访问权限,然后将视频流绑定到 video 元素的 srcObject 属性上,从而实现摄像头视频的显示。当用户点击“关闭摄像头”按钮时,会调用 `stopCamera` 函数,该函数会遍历视频流的所有 track,并调用 track.stop() 方法停止视频流,从而关闭摄像头。