JavaScript调用摄像头实现视频通话教程

本文详解了如何使用WebRTC在网页中实现视频通话，从调用摄像头获取本地音视频流、配置STUN/TURN服务器完成NAT穿透，到通过RTCPeerConnection建立点对点连接、交换SDP与ICE候选者完成信令协商，再到绑定远程流实现双向视频播放；同时强调了HTTPS强制要求、autoplay/muted策略、浏览器兼容性等实战中极易忽略却至关重要的细节，为开发者提供了一站式、可落地的WebRTC入门与排错指南。

获取摄像头权限并显示本地视频流

使用 MediaDevices.getUserMedia() 是 WebRTC 视频通话的第一步。它请求用户授权访问摄像头和麦克风，并返回一个 MediaStream 对象：

• 确保页面通过 HTTPS 或 localhost 提供服务（现代浏览器强制要求）
• 调用时传入约束对象，例如 { video: true, audio: true }
• 将返回的 stream 赋值给 元素的 srcObject 属性即可实时显示画面

示例代码：

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    const video = document.getElementById('localVideo');
    video.srcObject = stream;
  })
  .catch(err => console.error('访问摄像头失败:', err));

创建对等连接（PeerConnection）并交换信令

RTCPeerConnection 是 WebRTC 的核心，负责媒体传输。但它本身不处理连接发现和协商，需要你自行实现信令（signaling）——即在两个客户端之间传递 SDP 和 ICE 候选者。

• 初始化连接时需配置 STUN/TURN 服务器（如 stun:stun.l.google.com:19302），用于 NAT 穿透
• 一方调用 createOffer() 生成本地会话描述（SDP），设置为本地描述后通过信令通道发送给对方
• 另一方收到后调用 setRemoteDescription()，再调用 createAnswer() 返回应答 SDP
• 双方还需监听 icecandidate 事件，将各自收集到的 ICE 候选者通过信令通道互发

将远程视频流绑定到页面元素

当远端成功加入连接并开始传输媒体流时，RTCPeerConnection 会触发 track 事件（或旧版的 addstream）：

• 监听 pc.ontrack，从事件参数中提取 event.streams[0]
• 将其赋给另一个 元素的 srcObject，即可播放对方视频
• 注意：需在 setRemoteDescription 之后再添加 track 监听，否则可能错过初始流

处理常见问题与基础优化

实际开发中容易遇到黑屏、无声、连接失败等问题，关键点在于：

• 检查浏览器兼容性（Chrome/Firefox/Edge 支持良好，Safari 需注意版本和权限策略）
• 确保 video 元素设置了 autoplay 和 muted（尤其在自动播放策略严格的环境下）
• 调试时打开 chrome://webrtc-internals 查看连接状态、带宽、丢包等实时指标
• 若需跨域通信，信令服务器可用 WebSocket 实现（如 Node.js + Socket.IO），但 WebRTC 本身不依赖服务器中转媒体

不复杂但容易忽略

今天关于《JavaScript调用摄像头实现视频通话教程》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！