二、核心技术WebRTC简介

WebRTC（Web Real-Time Communication）是支持浏览器进行实时音视频通讯的开放标准。其核心API包括：

• MediaDevices.getUserMedia()：获取媒体设备访问权限
• RTCPeerConnection：建立点对点连接
• RTCDataChannel：实现数据传输

三、基础实现代码

javascript
// 获取DOM元素
const video = document.getElementById('videoElement');
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');

let mediaStream = null;

// 启动摄像头
startBtn.addEventListener('click', async () => {
try {
mediaStream = await navigator.mediaDevices.getUserMedia({
video: {
width: 1280,
height: 720,
facingMode: 'user' // 前置摄像头
},
audio: false
});
video.srcObject = mediaStream;
} catch (err) {
console.error(摄像头访问失败: ${err});
alert('无法访问摄像头，请检查权限设置');
}
});

// 关闭摄像头
stopBtn.addEventListener('click', () => {
if (mediaStream) {
mediaStream.getTracks().forEach(track => track.stop());
video.srcObject = null;
}
});

四、必须注意的6个关键细节

1. HTTPS环境要求
   现代浏览器仅允许在安全上下文（HTTPS或localhost）中调用摄像头

2. 权限处理最佳实践
   javascript // 检查权限状态 const checkCameraPermission = async () => { const permissionStatus = await navigator.permissions.query({ name: 'camera' }); console.log(permissionStatus.state); };

3. 多设备选择方案
   javascript // 获取可用设备列表 const devices = await navigator.mediaDevices.enumerateDevices(); const videoDevices = devices.filter(device => device.kind === 'videoinput');

4. 性能优化技巧

   
   
   
   • 设置合适的视频分辨率
   • 使用requestFrame()进行节流处理
   • 非活动状态时暂停流传输

5. 移动端适配要点

   
   
   
   • 处理屏幕旋转事件
   • 考虑省电模式限制
   • 添加触摸对焦功能

6. 异常处理方案
   javascript // 典型错误处理结构 const initCamera = async () => { try { // 尝试获取媒体流 } catch (err) { switch(err.name) { case 'NotAllowedError': // 权限拒绝处理 break; case 'NotFoundError': // 设备不存在处理 break; default: // 其他错误处理 } } };

五、5个实际应用场景扩展

1. 实时滤镜效果

javascript
// 使用Canvas处理视频帧
const applyFilter = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = video.videoWidth;
canvas.height = video.videoHeight;

ctx.filter = 'sepia(80%) contrast(120%)';
ctx.drawImage(video, 0, 0);

return canvas.toDataURL('image/jpeg');
};

2. 运动检测系统

javascript
// 通过帧差异检测运动
let lastFrame = null;

const detectMotion = () => {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
ctx.drawImage(video, 0, ......

（因篇幅限制，完整代码实现请参考WebRTC官方文档）