摄像头自建html直播,H5代码实现调用本地摄像头实现实时视频以及拍照功能
时间: 2023-12-05 12:05:22 浏览: 155
要实现摄像头自建HTML直播,需要使用WebRTC技术。WebRTC是一种开放源代码项目,它提供了实时通信(RTC)功能,允许浏览器和移动应用程序之间进行语音通话,视频聊天和P2P文件共享,而无需插件或其他软件。
下面是一个基于WebRTC实现调用本地摄像头实时视频和拍照的示例H5代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>摄像头直播</title>
<style>
#video {
width: 640px;
height: 480px;
}
</style>
</head>
<body>
<h1>摄像头直播</h1>
<video id="video" autoplay></video>
<br>
<button id="btn-photo">拍照</button>
<canvas id="canvas"></canvas>
<script>
// 获取video元素
var video = document.getElementById('video');
// 获取拍照按钮
var btnPhoto = document.getElementById('btn-photo');
// 获取canvas元素
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 获取用户媒体设备(摄像头)
navigator.mediaDevices.getUserMedia({
video: true,
audio: false
})
.then(function (stream) {
// 将媒体流绑定到video元素上
video.srcObject = stream;
video.play();
})
.catch(function (error) {
console.log('获取摄像头失败:', error);
});
// 拍照事件
btnPhoto.addEventListener('click', function () {
// 将canvas的大小设置为和video一样大
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
// 将video中的图像绘制到canvas上
context.drawImage(video, 0, 0, canvas.width, canvas.height);
// 将canvas中的图像保存为图片
var imgUrl = canvas.toDataURL('image/png');
// 显示图片
var img = new Image();
img.src = imgUrl;
document.body.appendChild(img);
});
</script>
</body>
</html>
```
上述代码中,首先获取了video元素、拍照按钮和canvas元素。然后通过`navigator.mediaDevices.getUserMedia()`方法获取用户媒体设备(摄像头),将媒体流绑定到video元素上,并播放视频。当用户点击拍照按钮时,将canvas的大小设置为和video一样大,将video中的图像绘制到canvas上,然后将canvas中的图像保存为图片,并显示在页面上。
需要注意的是,由于涉及到摄像头和麦克风等敏感设备的访问,需要使用HTTPS协议或localhost来访问页面,否则浏览器会提示用户授权访问设备。
阅读全文