h5实现摄像头实时播放
使用HTML5的getUserMedia API实现摄像头实时播放
HTML5的getUserMedia API允许网页访问用户的摄像头和麦克风，实现实时视频流播放。以下是具体实现方法：
基本实现步骤
在HTML中创建一个<video>元素用于显示摄像头视频流
<video id="video" width="640" height="480" autoplay></video>JavaScript代码获取摄像头权限并播放视频
const video = document.getElementById('video');
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
video.srcObject = stream;
})
.catch(error => {
console.error('无法访问摄像头:', error);
});
} else {
console.error('浏览器不支持getUserMedia API');
}添加权限请求提示
现代浏览器要求用户明确授权后才能访问摄像头
// 在getUserMedia调用前可以添加权限状态检查
navigator.permissions.query({name: 'camera'})
.then(permissionStatus => {
console.log('摄像头权限状态:', permissionStatus.state);
});处理不同浏览器兼容性
为兼容旧版浏览器需要添加前缀处理
// 兼容性处理
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;添加视频约束参数
可以指定视频分辨率、前后摄像头等参数
const constraints = {
video: {
width: { ideal: 1280 },
height: { ideal: 720 },
facingMode: 'environment' // 使用后置摄像头
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
video.srcObject = stream;
});错误处理与反馈
添加更完善的错误处理机制
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
video.srcObject = stream;
})
.catch(err => {
if (err.name === 'PermissionDeniedError') {
alert('请允许摄像头访问权限');
} else if (err.name === 'NotFoundError') {
alert('未找到可用的摄像头设备');
} else {
alert(`发生错误: ${err.message}`);
}
});完整示例代码
结合HTML和JavaScript的完整实现
<!DOCTYPE html>
<html>
<head>
<title>摄像头实时播放</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<script>
const video = document.getElementById('video');
const constraints = {
video: {
width: { ideal: 640 },
height: { ideal: 480 }
}
};
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
video.srcObject = stream;
})
.catch(err => {
console.error('摄像头访问错误:', err);
});
} else {
alert('您的浏览器不支持摄像头访问功能');
}
</script>
</body>
</html>注意事项
- 网站必须通过HTTPS协议访问，本地开发时localhost例外
- 某些浏览器可能需要用户手势(如点击)后才能触发摄像头访问
- 不同设备和浏览器对视频约束参数的支持可能不同
- 使用完毕后应该关闭视频流以释放资源
停止摄像头访问
当不再需要摄像头时应该停止视频流
function stopCamera() {
const stream = video.srcObject;
const tracks = stream.getTracks();
tracks.forEach(track => {
track.stop();
});
video.srcObject = null;
}以上方法实现了H5摄像头实时播放的基本功能，可以根据具体需求添加更多功能如拍照、录像、滤镜处理等。
