生成控制摄像头的html代码,能够控制摄像头开关,能够保存图片
时间: 2024-03-10 14:45:27 浏览: 23
好的,以下是生成控制摄像头的HTML代码的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>控制摄像头</title>
<script type="text/javascript">
function startCamera() {
var video = document.getElementById('video');
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
video.srcObject = stream;
video.play();
});
}
}
function stopCamera() {
var video = document.getElementById('video');
video.pause();
video.srcObject.getTracks()[0].stop();
}
function captureImage() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var link = document.createElement('a');
link.download = 'image.png';
link.href = canvas.toDataURL();
document.body.appendChild(link);
link.click();
}
</script>
</head>
<body>
<video id="video" width="640" height="480"></video><br>
<button onclick="startCamera()">开启摄像头</button>
<button onclick="stopCamera()">关闭摄像头</button>
<button onclick="captureImage()">保存图片</button><br>
<canvas id="canvas" width="640" height="480" style="display: none;"></canvas>
</body>
</html>
```
这段代码中包含了三个函数:`startCamera()`,`stopCamera()`和`captureImage()`。`startCamera()`函数用于开启摄像头,`stopCamera()`函数用于关闭摄像头,`captureImage()`函数用于保存图片。在HTML页面中,使用`video`元素来显示摄像头画面,使用`canvas`元素来保存图片。按钮用于触发相应的函数。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)