主要介绍了使用 WebRTC 进行实时通信过程中，音频流和视频流不显示、音视频无法播放等等方面的兼容性问题和解决方案。例如切换摄像头没有反应、IOS mp4 文件无法播放、IOS 360 浏览器视频播放卡住、微信浏览器中视频无画面和音频无声等等。
1. 切换摄像头没有反应
问题描述：之前的文章WebRTC 之媒体设备列表 enumerateDevices介绍了通过更换 deviceId 来实现摄像头的切换。但是有些手机切换了之后，摄像头画面或者麦克风声音是没有变化的
问题分析：排查后发现没有发生变化的 deviceId 都具有相同的 groupId。也就是说通过enumerateDevices获取的设备列表中，deviceId 是唯一的，但是 groupId 不唯一。
问题解决：对于同一组（相同 groupId）下的设备，任意选择一个用于切换，不要都放在切换列表中。
2. IOS video 标签部分 mp4 文件无法播放
问题描述：有些 mp4 文件在 IOS 的微信浏览器中无法播放，但是在安卓手机下播放正常。
问题分析：h264 编码的压缩级别太高导致的。如果压缩级别高于苹果能支持的压缩级别，就会出现 IOS 下无法播放的问题。
问题解决：查看视频的压缩级别，选择合适的级别，尽量不要选择 high4.2 以上的。
视频编码有两种，h264 和 vp8。
小程序必须使用 h264，设置为 vp8 的话，就需要做转码。
除了 Android 端浏览器，其他浏览器全部都支持 h264。
IOS使用的vp8，android显示IOS的视频流时，就需要转码处理。
3. IOS 360 浏览器视频播放卡住
问题描述：iPhone 手机上, 360 浏览器中，第一次接入时，视频流画面卡在第一帧，不能自动播放
问题解决：浏览器需要进行自动播放配置。还有一个坑就是，360浏览器没法调试，增加了问题排查难度
IOS手机 中配置：360 浏览器中, 设置>视频设置>网页播放>开启, 默认是关闭的
android手机 中配置：360 浏览器中，设置->视频播放->默认播放设置->自动播放
4. 微信浏览器中视频无画面，音频无声
问题描述：某些手机微信浏览器中，进行 WebRTC 实时通信时，可能会出现视频流无画面，音频流没有声音的问题。
问题解决：监听微信的WeixinJSBridge事件，使用代码触发自动播放，需要进行play()操作
// 微信浏览器自动播放
if (window.WeixinJSBridge) {
doPlay(remoteVideoElement);
} else {
document.addEventListener(
"WeixinJSBridgeReady",
function () {
doPlay(remoteVideoElement);
},
false
);
}
function doPlay(remoteVideoElement) {
WeixinJSBridge.invoke("getNetworkType", {}, function (e) {
if (remoteVideoElement) {
// 需要play一下
remoteVideoElement.play();
}
});
}
5. IOS 15.1.1 iPhone13 自动刷新问题
问题描述：视频流一加载，Safari浏览器就自动刷新了
问题分析：浏览器强制刷新了导致的，也有可能是瞬时内存不够，可能是同时运行进程太多了，导致入会时达到峰值，浏览器或者系统强制杀掉进程，刷新页面了
问题排查：
- 清除缓存重试
- 换浏览器重试
- 重启手机重试
- 升级 IOS 系统版本
问题解决：最后 1，2，3 都不行，4 成功了
6. IOS 16.3.1 摄像头列表选择不对问题
IOS 16.3.1 版本之前，获取摄像头列表，只有一个前置和一个后置的。
IOS 16.3.1 开始，获取摄像头列表时，会出现多个前置摄像头和后置摄像头，导致将后置摄像头（桌上视角相机）当作前置渲染了。
如下为16.3.1之后获取的摄像头列表，需要处理区分前后置：
const cameraList = [
{ id: "EB9CCC72316D817DC94D36FA055485D1F9DB6585", name: "前置相机" },
{ id: "0C7FB951A2C7E2716B8FB8661D1310CFFB70ACE1", name: "后置相机" },
{ id: "5C4C2932240DD770034B0388512CC48F1FE98E2A", name: "后置长焦相机" },
{ id: "3301E73C0C8050C5E694CB11886BDE34E8064C0E", name: "后置超广角相机" },
{ id: "6EEACCE48F2A89741FAD872A374994082D16FC16", name: "桌上视角相机" },
];
