WebRTC 入门：是什么、能做什么、核心模块

WebRTC 入门是什么、能做什么、核心模块WebRTC 让浏览器和 App 不用装插件就能实现实时音视频通话。这篇从零讲起WebRTC 是什么、能做什么、整体架构、核心模块以及一个最简单的例子跑起来。大家好我是黒漂技术佬。做音视频的WebRTC 绕不开。以前要做网页视频通话得装 Flash 插件或者用专门的客户端。现在有了 WebRTC浏览器原生支持几行 JS 就能开摄像头、做视频通话。不仅是浏览器移动端、PC 端都有 WebRTC 的实现跨平台的实时通信基本都用它。这篇是 WebRTC 系列的第一篇讲基础概念、能做什么、核心模块有哪些。一、WebRTC 是什么全称WebReal-TimeCommunication网页实时通信。是什么一套开放的标准和技术让浏览器和移动应用之间可以直接进行实时音视频和数据通信不需要中间插件或第三方软件。谁搞的最早是 Google 收购 GIPS 公司后开源的现在由 W3C 和 IETF 标准化Chrome、Firefox、Safari、Edge 全部支持特点免费开源免费使用代码开源浏览器原生支持不用装插件JS API 直接用点对点P2P数据直接在两端传输不经过服务器打洞成功的话低延迟实时通信延迟一般几百毫秒跨平台Web、Android、iOS、Windows、Mac 都支持二、WebRTC 能做什么1. 视频通话 / 语音通话最常见的场景一对一视频聊天、多人视频会议。2. 屏幕共享远程协作、在线教育、技术支持共享屏幕给对方看。3. 实时数据传输DataChannel 可以传任意数据文件传输游戏同步白板协作实时消息4. 直播低延迟直播场景比 RTMP/HLS 延迟低很多。5. 物联网设备之间实时传输音视频和数据。典型应用视频会议Zoom、腾讯会议、飞书会议底层很多用了 WebRTC 技术在线教育一对一辅导、小班课社交应用视频聊天远程医疗远程问诊云游戏低延迟传输游戏画面三、WebRTC 整体架构三大核心模块┌─────────────────────────────────────────┐ │ WebRTC 整体架构 │ │ │ │ ┌─────────────┐ ┌─────────────────┐ │ │ │ getUserMedia│ │ RTCPeerConn │ │ │ │ 音视频采集 │ │ 连接与传输 │ │ │ └──────┬──────┘ └───────┬─────────┘ │ │ │ │ │ │ └────────┬────────┘ │ │ │ │ │ ┌────────┴────────┐ │ │ │ RTCDataChannel │ │ │ │ 数据通道 │ │ │ └─────────────────┘ │ │ │ │ 底层音视频编解码、网络传输、NAT穿透 │ └─────────────────────────────────────────┘1. MediaStream媒体流音视频数据的抽象包含多个轨道Track视频轨、音频轨来源摄像头、麦克风、屏幕共享、本地文件2. RTCPeerConnection点对点连接WebRTC 的核心负责建立和管理两端的连接处理 NAT 穿透STUN/TURN处理音视频编解码处理网络传输SRTP处理带宽估计、丢包重传等3. RTCDataChannel数据通道在点对点连接上传输任意数据支持可靠和不可靠两种模式低延迟适合实时数据传输四、关键技术点1. 音视频编解码视频VP8 / VP9Google 推的免版税WebRTC 默认H.264硬件支持好兼容性好AV1新一代压缩率高正在普及音频OpusWebRTC 默认音质好码率范围大G.711 / G.722传统电话用的兼容性好WebRTC 会自动协商两端都支持的编解码器。2. NAT 穿透STUN / TURN / ICE大部分设备在 NAT 后面路由器、防火墙不能直接连接。STUN帮你发现自己的公网 IP 和端口TURN打洞失败时的中继服务器数据转一下ICE整合 STUN 和 TURN自动选最好的连通路径后面专门一篇讲这个。3. 信令SignalingWebRTC 不管怎么交换联系方式这部分要自己实现交换 SDP媒体协商信息交换 ICE Candidate网络候选地址控制通话的开始、结束信令服务器可以用 WebSocket、HTTP 随便实现WebRTC 标准不管这个。4. 安全媒体流用 SRTP 加密传输数据通道用 DTLS 加密必须 HTTPS 才能用localhost 除外五、最简单的例子打开摄像头不用建立连接先看看怎么获取本地摄像头!DOCTYPEhtmlhtmlbodyvideoidlocalVideoautoplayplaysinline/videoscript// 获取摄像头和麦克风asyncfunctionstartCamera(){try{conststreamawaitnavigator.mediaDevices.getUserMedia({video:true,audio:true});// 显示到 video 标签constvideodocument.getElementById(localVideo);video.srcObjectstream;console.log(摄像头已打开);}catch(err){console.error(打开摄像头失败:,err);}}startCamera();/script/body/html就这么几行浏览器就能打开摄像头显示画面。这就是 WebRTC 的 MediaStream API。六、一次完整的通话流程两个浏览器建立视频通话大致分几步第一步信令服务器连通两边都连上信令服务器能互相发消息。第二步发起方创建 OfferA 创建 RTCPeerConnection A 调用 createOffer() 生成 SDP A 设置本地描述 setLocalDescription A 通过信令把 Offer SDP 发给 B第三步接收方回复 AnswerB 收到 Offer设置远端描述 setRemoteDescription B 创建 Answer SDP B 设置本地描述 B 通过信令把 Answer SDP 发给 A第四步交换 ICE 候选两边各自收集 ICE Candidate自己的网络地址 通过信令服务器互相转发 两边尝试连接STUN打洞、TURN中继 找到可用的连接路径第五步媒体流传输连接建立成功 两边把音视频流通过 PeerConnection 发送 对方收到流显示出来简化流程图A 信令服务器 B │ │ │ │─── 加入房间 ──────────▶│ │ │ │──── 有人加入 ──────────▶│ │ │ │ │─── Offer SDP ────────▶│ │ │ │──── Offer SDP ────────▶│ │ │ │── 创建Answer │ │◀─── Answer SDP ────────│ │◀── Answer SDP ────────│ │ │ │ │ │─── ICE Candidate ────▶│ │ │ │── ICE Candidate ──────▶│ │ │◀── ICE Candidate ──────│ │◀── ICE Candidate ─────│ │ │ │ │ │◀════════════ P2P 音视频数据 ═══════════════════▶│看起来复杂其实核心就是交换 SDP 协商媒体、交换 ICE 建立连接、然后传数据。七、WebRTC 的难点在哪1. NAT 穿透复杂网络环境千差万别不同路由器、不同运营商、防火墙、对称 NAT……有些环境 STUN 打洞打不通必须用 TURN 中继。2. 多人通话架构复杂一对一简单多人就麻烦了Mesh每个人连每个人人多了上行带宽扛不住SFU转发服务器每个人发一路服务器转发给其他人MCU混流服务器把多路合成一路后面专门一篇讲多人架构。3. 网络波动处理实时网络不稳定丢包、抖动、带宽变化。WebRTC 有很多机制处理拥塞控制GCC、BBR丢包重传NACK前向纠错FEC自适应码率4. 设备兼容性不同浏览器、不同版本API 有差异。一般用 adapter.js 抹平差异。5. 移动端适配Android/iOS 上的 WebRTC后台、锁屏、权限处理都有坑。八、本系列内容安排这个系列 10 篇从基础到实战WebRTC 入门是什么、核心模块音视频采集getUserMedia 与设备管理媒体流与轨道MediaStream / MediaTrackRTCPeerConnection 连接建立SDP 与 ICENAT 穿透详解STUN / TURN / ICE音视频编解码VP8 / VP9 / H.264 / Opus数据通道DataChannel 可靠与不可靠传输信令服务器设计与实现多人会议架构Mesh / SFU / MCU 对比实战一对一视频通话完整实现九、本篇小结WebRTC 网页实时通信浏览器原生支持开源免费三大核心MediaStream采集、RTCPeerConnection连接传输、DataChannel数据关键技术音视频编解码、NAT 穿透STUN/TURN/ICE、信令、加密通话流程信令交换 SDP → 交换 ICE → 建立连接 → 传输媒体难点NAT 穿透、多人架构、网络波动、兼容性最简单的应用getUserMedia 几行代码打开摄像头下一篇讲音视频采集getUserMedia 详细用法、设备管理、参数控制、屏幕共享。我是黒漂技术佬。