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();
    }
  });
}
相关推荐
乖女子@@@44 分钟前
css3新增-网格Grid布局
前端·css·css3
伐尘1 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向
不想吃饭e2 小时前
在uniapp/vue项目中全局挂载component
前端·vue.js·uni-app
非凡ghost2 小时前
AOMEI Partition Assistant磁盘分区工具:磁盘管理的得力助手
linux·运维·前端·数据库·学习·生活·软件需求
UrbanJazzerati2 小时前
前端入门:margin居中、border、box-radius、transform、box-shadow、mouse事件、preventDefault()
前端·面试
蝎子莱莱爱打怪2 小时前
🚀🚀🚀嗨,一起来开发 开源IM系统呀!
前端·后端·github
Enddme2 小时前
《前端笔试必备:JavaScript ACM输入输出模板》
前端·javascript·面试
前端鱼2 小时前
前端面试中值得关注的js题
前端·面试
00后程序员张2 小时前
iOS App 混淆与资源保护:iOS配置文件加密、ipa文件安全、代码与多媒体资源防护全流程指南
android·安全·ios·小程序·uni-app·cocoa·iphone
UnnamedOrange2 小时前
有来前后端部署
前端·后端