h5摄像实现
使用HTML5实现摄像头功能
HTML5提供了getUserMedia API，可以直接在网页中调用设备的摄像头和麦克风。以下是一个基础实现方案：
<!DOCTYPE html>
<html>
<head>
<title>H5摄像头示例</title>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">拍照</button>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById('snap');
// 访问摄像头
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(error) {
console.error("无法访问摄像头:", error);
});
}
// 拍照功能
snap.addEventListener('click', function() {
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, 640, 480);
});
</script>
</body>
</html>实现进阶功能
- 前后摄像头切换
let currentFacingMode = 'user'; // 默认前置摄像头
function switchCamera() { currentFacingMode = currentFacingMode === 'user' ? 'environment' : 'user';
const constraints = {
video: {
facingMode: currentFacingMode
}
};
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
video.srcObject = stream;
});}
2. 拍照保存
```javascript
function savePhoto() {
const imageData = canvas.toDataURL('image/png');
const link = document.createElement('a');
link.href = imageData;
link.download = 'photo.png';
link.click();
}- 视频录制
let mediaRecorder; let recordedChunks = [];
function startRecording() { recordedChunks = []; mediaRecorder = new MediaRecorder(video.srcObject);
mediaRecorder.ondataavailable = function(e) {
if(e.data.size > 0) {
recordedChunks.push(e.data);
}
};
mediaRecorder.start();}
function stopRecording() { mediaRecorder.stop(); mediaRecorder.onstop = function() { const blob = new Blob(recordedChunks, {type: 'video/webm'}); const videoUrl = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = videoUrl; a.download = 'recorded.webm'; a.click(); }; }
### 注意事项
- 网站必须通过HTTPS协议访问，本地开发时`localhost`例外
- 首次使用时会请求用户授权摄像头权限
- 不同浏览器对视频格式的支持可能不同
- 移动设备上需要考虑横竖屏适配问题
- 使用前应检测浏览器兼容性
### 兼容性检测
```javascript
function checkCompatibility() {
return !!(navigator.mediaDevices &&
navigator.mediaDevices.getUserMedia &&
window.MediaRecorder);
}
if(!checkCompatibility()) {
alert('您的浏览器不支持HTML5摄像头功能');
}安全考虑
- 明确告知用户摄像头用途
- 提供关闭摄像头的选项
- 敏感操作需要二次确认
- 遵守GDPR等隐私法规
以上代码提供了基础的H5摄像头实现方案，可根据实际需求扩展更多功能如滤镜效果、人脸识别等高级特性。
