写一个Html调用手机摄像头实时展示在页面当前
时间: 2023-12-16 10:06:35 浏览: 30
要实现在HTML页面中调用手机摄像头实时展示视频流,需要使用WebRTC技术。下面是一个基于WebRTC实现的HTML代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>调用手机摄像头实时展示</title>
<style>
#video {
width: 100%;
max-width: 640px;
height: auto;
}
</style>
</head>
<body>
<h1>调用手机摄像头实时展示</h1>
<video id="video" autoplay></video>
<script>
// 获取video元素
var video = document.getElementById('video');
// 获取用户媒体设备(摄像头)
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
})
.then(function (stream) {
// 将媒体流绑定到video元素上
video.srcObject = stream;
video.play();
})
.catch(function (error) {
console.log('获取摄像头失败:', error);
});
</script>
</body>
</html>
```
上述代码中,首先获取了video元素。然后通过`navigator.mediaDevices.getUserMedia()`方法获取用户媒体设备(摄像头),将媒体流绑定到video元素上,并播放视频。
需要注意的是,由于涉及到摄像头和麦克风等敏感设备的访问,需要使用HTTPS协议或localhost来访问页面,否则浏览器会提示用户授权访问设备。另外,不同的浏览器可能存在兼容性问题,需要针对不同的浏览器做相应的兼容性处理。