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