HTML5 使用 navigator.mediaDevices.getUserMedia 调用手机摄像头和 WebRTC

一、背景与问题

随着移动互联网的发展，越来越多的 Web 应用需要直接访问设备的摄像头和麦克风。HTML5 提供了 navigator.mediaDevices.getUserMedia API 来获取用户媒体设备，而 WebRTC 则提供了端到端的实时通信能力。这两者结合可以实现视频通话、实时监控、在线教育等场景。

然而，实际开发中开发者常遇到以下问题：

如何在不同设备上兼容性处理
如何处理视频流的实时传输
如何保证传输的稳定性
如何处理网络环境变化
如何保障用户隐私安全

这些问题需要从底层原理和实际工程实践两个维度深入分析。

二、基本原理

1. getUserMedia 的工作原理

navigator.mediaDevices.getUserMedia 是通过调用设备的媒体采集接口获取视频/音频流。其核心流程如下：

用户授权：通过 constraints 对象指定设备类型和参数
系统调用：操作系统调用底层媒体驱动获取原始数据
编码处理：将原始数据编码为视频帧（H.264/H.265）
流式传输：通过 MediaStream 接口传输到前端应用

关键参数包括：

video: { width: 640, height: 480 }：指定分辨率
audio: true：启用麦克风
deviceId: 指定设备ID

2. WebRTC 的工作原理

WebRTC 是基于 SDP（Session Description Protocol）和 ICE（Interactive Connectivity Establishment）的协议栈，其核心机制如下：

信令交换：通过 STUN/TURN 服务器建立网络连接
冰候选收集：收集本地网络信息（公网IP、端口等）
冰候选交换：通过信令服务器交换对端的 ICE 候选
媒体传输：通过 UDP 或 TCP 进行实时传输

关键组件包括：

RTCPeerConnection：建立点对点连接
RTCDataChannel：传输任意数据
MediaStreamTrack：处理视频/音频轨道

三、环境准备

1. 开发环境

浏览器支持：Chrome 47+、Firefox 46+、Edge 12+、Safari 11+
设备要求：支持 WebRTC 的移动设备（iOS 8+、Android 4.4+）
开发工具：VS Code、Chrome DevTools

2. 依赖库（可选）

simple-peer：简化 WebRTC 实现
webrtc-adapter：兼容性适配
janus-gateway：后端信令服务器

四、核心实现

1. 获取摄像头流

// 基础用法
navigator.mediaDevices.getUserMedia({ 
  video: true,
  audio: false 
}).then(stream => {
  // 播放视频流
  const video = document.getElementById('video');
  video.srcObject = stream;
}).catch(error => {
  console.error('获取摄像头失败:', error);
});

关键点：

必须通过 HTTPS 或 localhost 环境运行
需要用户显式授权
可以通过 constraints 控制分辨率、帧率等参数

2. 处理视频流

// 获取视频流并处理
const constraints = {
  video: {
    width: 1280,
    height: 720,
    facingMode: 'user' // 前置摄像头
  },
  audio: {
    noiseSuppression: true,
    echoCancellation: true
  }
};

navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {
    // 播放视频
    const video = document.getElementById('video');
    video.srcObject = stream;
    
    // 监听轨道变化
    stream.getTracks().forEach(track => {
      track.onended = () => {
        console.log('轨道结束:', track.label);
      };
    });
  })
  .catch(err => {
    console.error('获取媒体流失败:', err);
  });

关键点：

可以通过 facingMode 指定前置/后置摄像头
音频参数可配置降噪和回声消除
需要处理轨道的生命周期

3. WebRTC 通信

// 建立 WebRTC 连接
const peer = new RTCPeerConnection();

// 处理媒体轨道
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    // 添加媒体轨道
    stream.getTracks().forEach(track => {
      peer.addTrack(track, stream);
    });
    
    // 监听远程媒体流
    peer.ontrack = (event) => {
      const video = document.getElementById('remote-video');
      video.srcObject = event.stream;
    };
    
    // 创建 Offer
    return peer.createOffer();
  })
  .then(offer => {
    return peer.setLocalDescription(offer);
  })
  .then(() => {
    // 发送 Offer 到对端
    const signal = {
      type: 'offer',
      sdp: peer.localDescription
    };
    sendToServer(signal);
  });

关键点：

需要信令服务器进行 Offer/Answer 交换
必须处理 ICE 候选交换
需要处理网络环境变化（NAT、防火墙）

五、完整案例

1. 简单视频通话应用

前端代码（index.html）

<!DOCTYPE html>
<html>
<head>
  <title>WebRTC 视频通话</title>
</head>
<body>
  <video id="local-video" autoplay playsinline></video>
  <video id="remote-video" autoplay playsinline></video>
  <button id="call-btn">呼叫</button>
  <script src="app.js"></script>
</body>
</html>

前端逻辑（app.js）

const localVideo = document.getElementById('local-video');
const remoteVideo = document.getElementById('remote-video');
const callBtn = document.getElementById('call-btn');

let peer = null;

// 获取媒体流
function getMediaStream() {
  return navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
  });
}

// 创建 WebRTC 连接
function createPeerConnection() {
  return new RTCPeerConnection({
    iceServers: [
      { urls: 'stun:stun.l.google.com:19302' }
    ]
  });
}

// 处理媒体轨道
function handleTracks(stream) {
  stream.getTracks().forEach(track => {
    peer.addTrack(track, stream);
  });
  
  peer.ontrack = (event) => {
    remoteVideo.srcObject = event.stream;
  };
  
  peer.onicecandidate = (event) => {
    if (event.candidate) {
      sendToServer({
        type: 'candidate',
        candidate: event.candidate
      });
    }
  };
}

// 发送信令
function sendToServer(signal) {
  // 这里需要实现与信令服务器的通信
  console.log('发送信令:', signal);
}

callBtn.addEventListener('click', async () => {
  try {
    const stream = await getMediaStream();
    localVideo.srcObject = stream;
    
    peer = await createPeerConnection();
    await handleTracks(stream);
    
    const offer = await peer.createOffer();
    await peer.setLocalDescription(offer);
    
    sendToServer({
      type: 'offer',
      sdp: offer
    });
  } catch (err) {
    console.error('创建连接失败:', err);
  }
});

信令服务器（Node.js 示例）

// server.js
const http = require('http');
const WebSocket = require('ws');

const server = http.createServer((req, res) => {
  res.writeHead(200);
  res.end();
});

const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
  console.log('客户端连接');
  
  ws.on('message', (message) => {
    console.log('收到信令:', message.toString());
    wss.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });
});

server.listen(8080, () => {
  console.log('信令服务器运行在 http://localhost:8080');
});

六、源码解析

1. WebRTC 连接建立流程

创建 RTCPeerConnection 实例
调用 createOffer 生成 SDP offer
通过信令服务器交换 SDP 信息
交换 ICE 候选（网络地址）
建立媒体流传输通道

关键点：

RTCPeerConnection 是核心对象
createOffer/Answer 用于协商媒体参数
ICE 候选交换是建立连接的关键

2. 网络地址收集（ICE）

// 冰候选收集
peer.onicecandidate = (event) => {
  if (event.candidate) {
    sendToServer({
      type: 'candidate',
      candidate: event.candidate
    });
  }
};

关键点：

包括本地 IP 地址、端口、网络类型等信息
需要通过 STUN/TURN 服务器进行验证
候选交换完成后才能建立连接

七、进阶使用

1. 多点视频会议

使用 RTCPeerConnection 的 addTrack 方法，支持多路视频流：

// 添加多路视频流
const tracks = [
  { id: '1', label: '用户1' },
  { id: '2', label: '用户2' }
];

tracks.forEach(track => {
  const track = new MediaStreamTrack();
  peer.addTrack(track, stream);
});

2. 数据通道传输

// 创建数据通道
const dataChannel = peer.createDataChannel('chat');

// 监听消息
dataChannel.onmessage = (event) => {
  console.log('收到消息:', event.data);
};

// 发送消息
dataChannel.send('Hello, WebRTC!');

3. 高级编码参数

// 自定义编码参数
const constraints = {
  video: {
    width: 1280,
    height: 720,
    frameRate: 30,
    facingMode: 'user',
    resizeMode: 'fill',
    aspectRatio: 16 / 9
  },
  audio: {
    sampleRate: 44100,
    channelCount: 2
  }
};

八、性能与工程实践

1. 性能优化

硬件加速：使用 GPU 渲染视频帧
带宽控制：通过 RTCRtpTransceiver 调整传输参数
帧率控制：通过 requestAnimationFrame 控制渲染频率
资源回收：及时关闭不再使用的轨道

2. 异常处理

// 错误处理
navigator.mediaDevices.getUserMedia(constraints)
  .catch(err => {
    if (err.name === 'ConstraintNotSatisfiedError') {
      console.error('约束条件不满足:', err.constraint);
    } else if (err.name === 'NotAllowedError') {
      console.error('用户拒绝访问:', err);
    } else {
      console.error('未知错误:', err);
    }
  });

3. 安全风险

隐私泄露：未加密的视频数据可能被嗅探
身份冒充：未验证的终端可能伪造身份
数据篡改：未加密的传输可能被篡改

解决方案：

使用 HTTPS 传输信令
对媒体流进行加密（SRTP）
使用数字证书验证身份

九、常见问题与踩坑

1. 权限问题

错误示例：

navigator.mediaDevices.getUserMedia({ video: true });

问题原因：

必须通过 HTTPS 或 localhost 环境运行
需要用户显式授权（弹窗提示）

解决方案：

确保运行环境为 HTTPS
使用 chrome://flags/#enable-media-rtsp 开启相关权限

2. 网络问题

错误示例：

// 未设置 STUN 服务器
const peer = new RTCPeerConnection();

问题原因：

缺少 STUN/TURN 服务器配置
导致 ICE 候选收集失败

解决方案：

const peer = new RTCPeerConnection({
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' }
  ]
});

3. 安全问题

错误示例：

// 未使用 HTTPS 传输信令
const ws = new WebSocket('ws://example.com');

问题原因：

明文传输可能被中间人攻击
需要使用 HTTPS/WSS 端点

解决方案：

const ws = new WebSocket('wss://example.com');

十、最佳实践

信令服务器：建议使用 Node.js 实现，支持 WebSockets
媒体参数：根据设备性能动态调整分辨率和帧率
错误处理：全面捕获异常并提供用户反馈
安全传输：使用 HTTPS/WSS，对媒体流进行加密
资源回收：在不再需要时关闭媒体轨道和连接
性能监控：监控网络带宽和延迟，动态调整传输策略

十一、总结

navigator.mediaDevices.getUserMedia 与 WebRTC 的结合为 Web 应用提供了强大的实时通信能力。通过深入理解其工作原理，开发者可以构建出高质量的视频通话、实时监控等应用。实际开发中需要注意兼容性、安全性、性能优化等问题，同时结合具体业务场景选择合适的实现方案。

在项目选择时，应考虑以下因素：

是否需要点对点通信（WebRTC）
是否需要服务器中转（如媒体转码、录制）
是否需要支持大量并发连接
是否需要高安全性要求

通过合理的架构设计和工程实践，可以充分发挥 WebRTC 的优势，构建稳定可靠的实时通信系统。

HTML5 使用 navigator.mediaDevices.getUserMedia 调用手机摄像头和 WebRTC

HTML5 使用 navigator.mediaDevices.getUserMedia 调用手机摄像头和 WebRTC

一、背景与问题

二、基本原理

1. getUserMedia 的工作原理

2. WebRTC 的工作原理

三、环境准备

1. 开发环境

2. 依赖库（可选）

四、核心实现

1. 获取摄像头流

2. 处理视频流

3. WebRTC 通信

五、完整案例

1. 简单视频通话应用

前端代码（index.html）

前端逻辑（app.js）

信令服务器（Node.js 示例）

六、源码解析

1. WebRTC 连接建立流程

2. 网络地址收集（ICE）

七、进阶使用

1. 多点视频会议

2. 数据通道传输

3. 高级编码参数

八、性能与工程实践

1. 性能优化

2. 异常处理

3. 安全风险

九、常见问题与踩坑

1. 权限问题

2. 网络问题

3. 安全问题

十、最佳实践

十一、总结

评论已关闭

推荐阅读