写一个调用摄像头的前端界面
时间: 2024-06-10 08:07:20 浏览: 7
可以使用 HTML5 的 getUserMedia API 来调用摄像头。以下是一个简单的前端界面示例,代码如下:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>摄像头调用</title>
</head>
<body>
<h1>摄像头调用</h1>
<video id="video" width="640" height="480" autoplay></video>
<script>
const video = document.querySelector('#video');
// 获取摄像头的媒体流
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
video.srcObject = stream;
video.play();
})
.catch(error => {
console.error('获取摄像头媒体流失败', error);
});
</script>
</body>
</html>
```
在这个页面中,我们通过 `navigator.mediaDevices.getUserMedia()` 方法来请求用户的摄像头权限,如果用户同意,`getUserMedia` 方法会返回一个 `MediaStream` 对象,表示摄像头捕捉到的实时视频流。我们将这个媒体流传递给 `<video>` 标签的 `srcObject` 属性,以便将视频流显示在页面上。
如果用户不给出允许,则会打印一个错误信息。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)