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

主要介绍了使用 WebRTC 进行实时通信过程中，音频流和视频流不显示、音视频无法播放等等方面的兼容性问题和解决方案。例如 IOS 15.x Safari 声音忽大忽小、IOS 音频播放无声、切后台音视频中断问题、IOS APP 嵌入 H5 视频播放问题等等。

5. IOS 15.x Safari 声音忽大忽小

问题描述：

（1）iphone 手机 ios15.X safari浏览器中实时音频流声音轻，忽大忽小；而播放视频声音很小

（2）订阅远端音频流声音响亮，但打开本地音频后，声音会立刻变得很轻（至少轻了2/3），之后再关闭本地音频也不会改善

（3）全程都戴耳机操作，音频也会变轻，但比不戴效果要好一点

问题解决：目前来看这个是系统的问题，只能等 IOS 后续的开级版本，看有没有解决该问题。

6. IOS 音频播放无声

问题描述：Safari 浏览器和谷歌浏览器中音频流；第一次开启声音，可以正常听到声音；关闭后再开启，就听不到声音了。

问题分析：Safari 因为音频隐私的原因不是直接自动播放，需要应用层手动交互触发才可以。

问题解决：关闭时，使用 mutedMicrophone 静音方法，而不是 closeMicrophone 关闭方法。关闭后，需要重新进行手动交互才行。

7. 切后台音视频中断问题

问题描述：

（1）IOS：会中切到后台去，音视频均断开了，音频播放完毕才断开，视频显示直接会黑屏；切回后正常显示播放

（2）Android：会中切到后台去，音视频均断开，但是视频画面会显示到最后一帧的画面；切回后正常显示播放

问题解决：监听 visibilitychange 方法，进行播放处理

iPhone 手机上，QQ 浏览器、搜狗浏览器、火狐浏览器等切换到后台再切回前台，或接听电话后，音视频控件的播放状态会变成暂停，通过监听进行处理

js 复制代码

document.addEventListener("visibilitychange", () => {
  if (document.hidden) {
    console.info("页面切到后台了～");
    //从后台切换到前台时就会触发
  } else {
    console.info("页面切回前台了");
    video.play();
    audio.play();
  }
});

8. IOS APP 嵌入 H5 视频播放问题

问题描述（一）：只能放大全屏播放，放大后再缩小，视频流会卡住

问题解决（一）：需要 APP 配置 allowsInlineMediaPlayback 属性

问题描述（二）：远端视频流不显示问题

问题解决（一）：第一次进入弹框，需要与用户进行交互之后，才能正常播放

9. 预览视频黑屏，无法显示

有些浏览器可以直接播放 mp4 文件，有些浏览器必须转为 blob 播放，需要进行灵活处理。

转为 blob：QQ浏览器（MQQBrowser）
直接赋值 src：百度浏览器（baiduboxapp）
以上两种均可：火狐（Firefox），谷歌（Chrome），vivo 自带浏览器（VivoBrowser），Safari浏览器

js 复制代码

// 直接通过url地址播放
const agent = navigator.userAgent;
if (agent.indexOf("baiduboxapp") > 0 || agent.indexOf("iPhone OS") > 0) {
  videoRef.current.src = url;
  return;
}

// 转成blob 进行播放
const xhr = new XMLHttpRequest();
xhr.open("get", url);
xhr.responseType = "blob";
xhr.send();
xhr.onload = function () {
  try {
    videoRef.current.src = URL.createObjectURL(xhr.response);
  } catch (e) {
    Toast.info("视频加载失败");
  }
};