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();
    }
  });
}
相关推荐
neter.asia16 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫17 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年36 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_37 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891139 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾40 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu43 分钟前
前端 Canvas 绘画 总结
前端
安步当歌44 分钟前
【WebRTC】视频编码链路中各个类的简单分析——VideoStreamEncoder
音视频·webrtc·视频编解码·video-codec
CodeToGym1 小时前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫1 小时前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js