持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情
阅读本文大约需要 6 分钟
前言
本文将从以下几个方面聊下项目中如何使用 WebRTC 的。
- 兼容性问题：我的目标是 PC端 和 手机端 均能使用该功能
- 易用性：WebRTC API 直接用起来略显繁琐，我会搞一个类似于 建造者模式 的方式，不用深入理解 Peerconnection、Candidate，只需关注实现层面即可
兼容性问题
关于兼容性，官方推荐的 adapter.js 就能满足。 使用起来也很简单，只需要 install 库之后
import adapter from 'webrtc-adapter';
是的，只要 import 进来之后，就什么都不需要做了。可以理解为：它已经重写了你要用到的所有方法，在你调用时自动做了兼容。
易用性
实际应用中，我并不关心 WebRTC API 中的什么 CreateOffer，setDescription 等。
我更希望只需要简单的配置，调用一个 start 就能完成音视频通话。 所以我封装了一个 webrtc.peerconnection.ts，基本的使用方法就是：
- new 一个实例
- 参数设置（最基本的参数：设置为音频、还是视频）
- 调用 create 方法，表示参数设置完毕，可以开始了
- 拿到 sdp，发送给对端
- 收到 candidate 回调，发送给对方
- 杀青
async function startVideo() {
// 新建一个实例
const videoPC = new PeerConnectionCreater()
// 设置音频，还是视频
videoPC.setTrackOrKind('video')
// 添加三个回调
videoPC.onIceCandidate((candidate) => {
// 拿到本地的接收 candidate，发送给对方
if (candidate) {
sendCandidate(candidate)
}
})
videoPC.onTrack((e) => {
// 接收到对方的流，用来显示对方音、视频
})
// 此回调可有可无
videoPC.onStateChange((iceGatheringState: RTCIceGatheringState) => {
if (iceGatheringState === 'complete') {
// 这一趴结束，恭喜杀青
console.log('create over')
}
})
const sdp = await videoPC.create()
sendSDP(sdp)
}
至于视频分辨率、码率等参数，都可以在调用 create 方法之前预置好。
其他
项目中，webrtc 相关的操作，目前一共封装了三个文件
| 文件名 | 功能说明 |
|---|---|
| webrtc.device-control.ts | 操作外设，如外接的麦克风、摄像头等 |
| webrtc.stream.ts | 操作流，如获取流，释放流，设置流“静音” |
| webrtc.peerconnection.ts | 音视频通话相关 |
后续会不断完善其功能，并附上详细的使用说明文档
源码地址为 gitee.com/bigflowerfa…
