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 以上的。

视频编码有两种,h264vp8

小程序必须使用 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();
    }
  });
}
相关推荐
吞掉星星的鲸鱼38 分钟前
使用高德api实现天气查询
前端·javascript·css
lilye6641 分钟前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
zhougl9963 小时前
html处理Base文件流
linux·前端·html
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_3 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之6 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端6 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡6 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木7 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5