H5调用手机的前摄像头并实时显示
时间: 2023-12-08 21:04:53 浏览: 29
你可以使用HTML5的`<video>`标签和JavaScript的`getUserMedia()`方法来实现调用手机的前摄像头并实时显示。具体实现步骤如下:
1. 在HTML文件中添加`<video>`标签,并设置宽度和高度,如下所示:
```html
<video id="video" width="640" height="480" autoplay></video>
```
2. 在JavaScript中使用`getUserMedia()`方法获取用户媒体设备,并将视频流绑定到`<video>`标签上,如下所示:
```javascript
navigator.mediaDevices.getUserMedia({ video: { facingMode: "user" } })
.then(function(stream) {
var video = document.getElementById('video');
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log("Error: " + err);
});
```
3. 在CSS中设置`<video>`标签的样式,使其填充整个屏幕,如下所示:
```css
video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
```
这样,你就成功地调用了手机的前摄像头并实时显示了。