WebRTC 音视频兼容问题汇总（一）

主要介绍了使用 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()操作

js 复制代码

// 微信浏览器自动播放
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();
    }
  });
}