超低延迟/无延迟直播（PRTC Web SDK移动端）兼容性说明
图 / 无延迟直播观看效果
PRTC Web SDK 是基于 WebRTC 实现音视频通信的，因此依赖于浏览器对 WebRTC 的支持。 尽管移动端主流的浏览器都支持 WebRTC，但是由于平台和一些应用内置浏览器的实现各不相同，移动端对音视频编解码的支持情况比较复杂，本文简单介绍移动端各种应用场景下对发送和接收音视频流的支持。
PRTC Web SDK移动端兼容的浏览器，具体如下表所示：
| 平台 | 浏览器 |
|---|---|
| Android 5.0+ | Chrome 60+ 华为手机浏览器 10+ 微信公众号/微信浏览器 7+ 内嵌 WebView 的应用（部分设备） |
| iOS 13+ | 苹果Safari 13+ 微信公众号/微信浏览器 7+（仅支持接收） Chrome 60+（仅支持接收） 内嵌 WebView 的应用（仅支持接收） |
| iOS 14.3+ | 苹果Safari 13+ 微信公众号/微信浏览器 7+ Chrome 60+ 内嵌 WebView 的应用 |
- iOS 14.3以下的系统有限制，仅允许 苹果safari 浏览器 使用麦克风、摄像头设备；不允许 其他浏览器 使用麦克风、摄像头设备，因此iOS 14.3以下的系统中的微信浏览器、谷歌Chrome浏览器中无法发布视频流，仅支持接收。
- iOS 14.3及以上的系统放开了设备权限，除了 苹果safari 浏览器，其他浏览器 如 微信浏览器、谷歌Chrome浏览器，可以申请 麦克风、摄像头设备的使用权限，因此iOS 14.3及以上的系统中的 微信浏览器、谷歌Chrome浏览器 可以支持连麦。
- 保利威无延迟直播增加的逻辑：iOS 13以下降级为CDN观看
- ios 11 ～ 12 理论上支持无延迟，但只支持同时一个视频在播，并且存在较多兼容性问题所以降级为CDN播放
- ios 14.2.x 版本因为ios系统的故障，存在声音异常的问题，所以降级为CDN播放
- 无延迟需要在https下播放
iOS平台的兼容性
iOS 平台上所有的应用内置浏览器只能使用系统提供的 WebView，iOS 14.3以下版本不支持发送音视频流，仅支持接收；iOS 14.3及以上版本支持连麦。
| 浏览器 | VP8 | H.264 |
|---|---|---|
| Safari 浏览器（支持发送和接收） | iOS 12.2 及以后版本 | iOS 11 及以后版本 |
| 微信公众号/微信浏览器 7+（支持发送和接收） | iOS 14.3 及以后版本 | iOS 14.3 及以后版本 |
| Chrome 60+（支持发送和接收） | iOS 14.3 及以后版本 | iOS 14.3 及以后版本 |
| 内嵌 WebView 的应用（支持发送和接收） | iOS 14.3 及以后版本 | iOS 14.3 及以后版本 |
| 微信公众号/微信浏览器 7+（仅支持接收） | iOS 12.2 及以后版本 | iOS 12.1.4 及以后版本 |
| Chrome 60+（仅支持接收） | iOS 12.2 及以后版本 | iOS 12.1.4 及以后版本 |
| 内嵌 WebView 的应用（仅支持接收） | iOS 12.2 及以后版本 | iOS 12.1.4 及以后版本 |
Android平台的兼容性
安卓平台原生的 WebView 支持自定义，因此不同设备、不同应用的 WebView 实现可能不同。下面列出三种浏览器对编解码格式的支持：
| 浏览器 | VP8 | H.264 |
|---|---|---|
| Chrome 60+ | 支持发送和接收 | 部分设备支持发送和接收 |
| 微信公众号/微信浏览器 7+ | 支持发送和接收 | 部分设备支持发送和接收 |
| 内嵌 WebView 的应用 | 部分设备支持发送和接收 | 部分设备支持发送和接收 |
无延迟直播快速接入
// 初始化SDK
var liveSdk = new PolyvLiveSdk({
channelId: channelId,
sign: sign, // 频道验证签名
timestamp: timestamp, // 毫秒级时间戳
appId: appId, // polyv 后台的appId
user: {
userId: userId,
userName: 'polyv-test',
pic: 'https://livestatic.videocc.net/assets/wimages/missing_face.png'
}
});
// 监听频道信息并初始化播放器，并加入lowLatency参数开启无延迟观看
liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT, (event, data) => {
liveSdk.setupPlayer({
pptEl: '#ppt',
el: '#player',
type: 'live',
lowLatency: true // 必须添加该参数
});
});
相关API
liveSdk.setupPlayer 方法增加参数
lowLatency: boolean: 是否使用无延迟播放，开启后若当前频道为无延迟频道并且当前设备支持无延迟播放则使用无延迟播放lowLatencyConfig?: { controls: boolean; hideNickname: boolean; drag: boolean; }: 无延迟播放设置
liveSdk.setupPlayer({
// ...
lowLatency: true,
lowLatencyConfig: {
// 是否显示频道中每个人(讲师、嘉宾、其他连麦者)的控制栏, 默认显示，如果没有视频流或者关闭摄像头则固定显示
controls: true,
//是否隐藏控制栏的昵称, 默认显示
hideNickname: false,
/*
* 默认按非无延迟直播的主讲模式排版，在人数少于13包含13人时非主讲按播放器 1/6 宽度，16:9的比例显示，大于6人时分行显示
* 大于13人时非主讲按播放器 1/8 宽度，16:9的比例显示，大于8人时分行显示
* 设置后非主讲按每个人宽 1/3, 宽高 16/9显示，在一行显示，鼠标或者左右滑切换,建议在小尺寸和移动端使用
*/
drag: isMobile
}
// ...
});切换失败会继续使用无延迟模式观看
if (liveSdk.player.lowLatency) {
liveSdk.player.switchToCDNPlayer(function() {
console.log('切换成功')
}, function(err) {
console.error(err); // 切换失败，可能是cdn播放器加载失败，可能是当前正在播cdn
});
}监听无延迟网络状态
// interface Stats { downlink: 1|2|3 }
// downlink为1时代表网络状态良好，
// 2代表网络状态不佳，可能存在卡顿情况
// 3代表网络状态糟糕，可提示用户切换网络观看或者尝试降级到cdn播放
// 事件大约20秒触发一次，注意多次调用的情况，只在无延迟状态下回调
liveSdk.player.on('networkQuality', function(Stats) {
if (Stats.downlink === 3) {
console.log('当前网络状态较差，建议切换网络观看');
}
});无延迟下视频区域人数更新, 如本地流被切换到第一画面该人数也会包含本地流。
在当前频道主讲、嘉宾以及其他连麦者总人数变化时触发，这时可根据人做做一下样式调整以便有更好的显示效果
liveSdk.player.on('rtcUsersUpdated', function(data) {
// 可根据人数设置界面样式
// 比如设置lowLatencyConfig.drag = true 后可在人数大于1时将播放器区域设置为4:3，等于1时设置为16:9
// data = { users: 3, hasLocalStream: true }
console.log('当前视频区域人数为', data.users);
console.log('是否包含本地流', data.hasLocalStream);
});连麦实例初始化完成
// 连麦实例初始化完成，可以进行连麦相关代码调用，无延迟，普通直播并支持连麦的情况下会回调
liveSdk.player.on('rtcInitialized', function(rtc){
// 也可以这样获取实例 liveSdk.player.rtcInstance
console.log('连麦sdk实例', rtc);
// 连麦sdk加载后调用相关代码
});
我的文章推荐：
- [视频+图文] 线上研讨会是什么，企业对内对外培训可以用线上研讨会吗？
- [图文] 企业直播对网络带宽有什么要求？
- [图文]OBS如何实现毫秒级超低延时直播
- 直播播放器API（播放器调用方法、参数、接口和事件）
-
企业直播要如何做？硬件设备、网络环境有哪些要求？