实时音视频
  • iOS
  • Android
  • macOS
  • Windows
  • HarmonyOS
  • Linux
  • Web : JavaScript
  • 小程序
  • Flutter
  • Electron
  • Unity3D
  • uni-app
  • React Native
  • Cocos2D
  • 产品简介
  • 下载
  • 体验 App
  • 快速开始
    • 跑通示例源码
    • 集成 SDK
    • 实现视频通话
  • 基础功能
  • 进阶功能
  • 最佳实践
  • 常见错误码
  • 服务端 API
  • 客户端 API
  • 常见问题

浏览器兼容性说明

更新时间:2022-02-09 14:10

1 概述

WebRTC 是一个支持网页浏览器进行实时语音对话或视频对话、进行实时数据传输(Web Real-Time Communication)的 JavaScript API。

ZEGO Express Web SDK 使用了 WebRTC 技术实现实时音视频功能。因此,在当前浏览器中能否使用 Web SDK,依赖于当前浏览器对 WebRTC 能否兼容。目前 WebRTC 主要在桌面端的 Chrome、 Firefox、Safari 等浏览器,以及移动端的 Safari 浏览器上有较为完整的支持。本文将分别介绍桌面端和移动端的浏览器兼容性情况。

由于平台和一些应用内置浏览器的实现各不相同,无法涵盖所有浏览器,以下文档中未列举的浏览器并不代表不支持。开发者如有疑问,请联系 ZEGO 技术支持咨询。

2 桌面端

2.1 浏览器兼容性

目前 ZEGO Express Web SDK 在桌面端支持的浏览器及版本如下:

WebRTC 技术在 Chrome 平台支持度最好,建议开发者使用最新版本的 Chrome 浏览器,下载最新版本的 Web SDK

操作系统 浏览器 版本兼容性 拉流 推流 屏幕共享
macOS
Safari 浏览器
11 或以上版本
✔️
✔️
✔️(需要 Safari 13 或以上版本)
Chrome 浏览器
56 或以上版本
✔️
✔️
✔️(需要 Chrome 72 或以上版本)
Firefox 浏览器
56 或以上版本
✔️
✔️
✔️(需要 Firefox 66 或以上版本)
Edge 浏览器
80 或以上版本
✔️
✔️
✔️
微信内置浏览器
-
✔️
✔️
企业微信内置浏览器
-
✔️
Windows
Chrome 浏览器
56 或以上版本
✔️
✔️
✔️(需要 Chrome72 或以上版本)
QQ 浏览器
(极速内核)
10.4 或以上版本
✔️
✔️
Firefox 浏览器
56 或以上版本
✔️
✔️
✔️(需要 Firefox 66 或以上版本)
Edge 浏览器
80 或以上版本
✔️
✔️
✔️
微信内置浏览器
-
✔️
企业微信内置浏览器
-
✔️

2.2 兼容性限制

不同的浏览器存在差异,导致支持的功能可能有所不同。

出于隐私安全考虑,Chrome 较新的版本(81 及以上版本)、Safari 和 Firefox 浏览器需要在获得媒体设备权限后才能获取设备 ID,详情请参考 为什么在 Chrome 81 及以上版本浏览器上无法获取设备 ID

浏览器 限制
Chrome
WebRTC 技术是由 Google 最先提出,Chrome 也是最先支持的浏览器,所以在 Chrome 上的限制较少。

  • 版本:Chrome 版本要求 58 或以上,建议使用 Chrome 65 或以上版本。
  • API:部分 API 的功能需要 Chrome 较高版本才支持,详情请参考 客户端 API
  • 设备:在一些 Windows 设备上,Chrome 使用 H.264 编码时,发送码率可能达不到设定值,可以尝试关闭硬件加速或者使用 “VP8” 编码。
  • 分辨率:部分 Windows 系统使用 Chrome 90 以上(不包括 90),播放第三方视频、且视频分辨率不为 8 的倍数时,可能出现画面失真问题。
Firefox
  • 帧率:Firefox 视频帧率只支持 30 fps。
  • 视频编码:Firefox 在部分设备上设置视频编码不生效。目前已知的设备有:Windows 10 (MI)、MacBook Pro (13-inch, 2016, Two Thunderbolt 3 ports)。
  • 编码格式:Firefox 在 使用 Apple M1 芯片的 Mac 设备上不支持 H.264 编解码,详见 Firefox 官方说明
  • 流质量检测:Firefox 上获取流质量相关统计数据时,多个字段的值为 “0”,例如 “frameWidth”。
  • 视频画面:在Firefox 上使用 Web SDK 与某些设备通话时,可能会出现所看到的对端画面发生了旋转。
Safari
  • 分辨率:Safari 11 只支持 480p 及以上的分辨率。
  • 编码格式:Safari 12.1(或以下版本)仅支持 H.264 编解码格式。
  • 推流:Safari 浏览器不支持推第三方流。
  • 拉流:Safari 13 可能听不到拉流的声音。
  • 流质量检测:Safari 上获取流质量相关统计数据时,有些字段不支持,如 “audioSendLevel”。
  • 音频播放:macOS Safari 14.0.1 上音频可能断断续续。
  • 输出设备:由于 enumDevices 方法获取的 “speakers” 为空,Safari 无法获取输出设备(扬声器)信息。

3 移动端

3.1 Android

3.1.1 浏览器兼容性

Android 平台原⽣ WebView 可⽀持⾃定义,因此不同平台不同设备以及不同应⽤的 WebView 实现可能存在差异,ZEGO Express Web SDK 在 Android 支持的情况如下:

由于不同手机产商对自带浏览器或多或少会对其浏览器内核做出改动,无法保证自带浏览器能够很好地支持 WebRTC,建议开发者使用 Chrome 浏览器。

操作系统 浏览器拉流推流屏幕共享
Android
Chrome 浏览器
✔️
✔️
Firefox 浏览器
✔️
✔️
QQ 浏览器
✔️
✔️
UC 浏览器
微信内置浏览器
(TBS 内核)
✔️
✔️
微信内置浏览器
(XWEB 内核)
✔️
✔️
企业微信内置浏览器
✔️
✔️

3.1.2 兼容性限制

Web SDK 在 Android 上的兼容性限制如下:

浏览器 限制
所有浏览器/应用内嵌 WebView(例如微信内置浏览器、QQ 浏览器、UC 浏览器等)
  • 屏幕共享:不支持屏幕共享。
  • device label:部分 Android 设备上可能无法获取到媒体设备的 device label。
  • 兼容说明:浏览器是否兼容,和浏览器版本、运行内核,设备芯片等都相关,ZEGO 强烈建议开发者在使用前,先进行兼容性检测。
Chrome
编码格式:部分 Android 设备(如华为)上,Chrome 浏览器不支持 H.264 编解码格式。
Firefox
  • 流质量检测:Firefox 上获取流质量相关统计数据时,多个字段的值为 “0”,例如 “frameWidth”。
  • 视频画面:在Firefox 上使用 Web SDK 与某些设备通话时,可能会出现所看到的对端画面发生了旋转。

部分 Android 设备不支持 H.264 编解码。开发者可以通过 checkSystemRequirements 接口检测,如果当前设备不支持该编码格式时,可以使用 “VP8” 编码。同时会有部分浏览器不支持 WebRTC 的技术,建议开发者使用 Chrome 浏览器。

3.2 iOS

3.2.1 浏览器兼容性

⽬前 iOS 平台上所有应⽤内置 WebView 只能使⽤系统提供的,具有⼀定的局限性。

操作系统 浏览器版本兼容性接收(播放)发送(上麦)屏幕共享
iOS 11.1.2 或以上版本
Safari 浏览器
11 或以上版本
✔️
✔️
iOS 12.1.4 或以上版本
Chrome 浏览器
-
✔️
iOS 14.3 或以上版本
Chrome 浏览器
-
✔️
✔️
iOS 12.1.4 或以上版本
微信内置浏览器
-
✔️
iOS 14.3 或以上版本
微信内置浏览器
6.5 或以上版本
(微信版本)
✔️
✔️
iOS 12.1.4 或以上版本
企业微信内置浏览器
-
✔️

3.2.2 兼容性限制

Web SDK 在 iOS 上的兼容性限制如下:

浏览器 限制
所有浏览器/应用内嵌 webview
  • 屏幕共享:不支持屏幕共享。
  • 推流:在 iOS 推音视频流,被其它应用打断后,无法自动恢复视频流的发送,需要重新采集重新推流。
Safari
  • 编码格式:iOS Safari 12.1 及之前版本仅支持 H.264 编解码格式。
  • 分辨率:iOS Safari 11 只支持 480p 及以上分辨率。
  • 媒体轨道:第二次调用浏览器的 “getUserMedia” 接口获取相同媒体类型的轨道,会导致第一次获取的媒体轨道静音或黑屏。
  • 音量:iOS 13 版本中可能出现拉流音量大小随机变化的问题。
  • 音频路由切换:声音路由随机切换,即可能出现没有插耳机却从听筒出声或者插上了耳机仍然从扬声器出声的情况。
  • 采集音视频:(偶现)使用过其它音视频输入设备的 App 后(例如 Siri),无法采集本地音频或视频。
  • 音频播放:iOS Safari 14.2 和 macOS Safari 14.0.1 上音频可能断断续续。

4 浏览器兼容性检测

4.1 接入检测

开发者可以通过 ZEGO Express Web SDK 提供了 checkSystemRequirements 接口,检测当前浏览器的兼容性情况,该接口可检测 WebRTC、视频编码、自定义采集、摄像头、麦克风以及屏幕共享的支持情况。

const result = await zg.checkSystemRequirements();
// 返回的 result 为兼容性检测结果。 webRTC 为 true 时表示支持 webRTC,其他属性含义可以参考接口 API 文档。
console.log(result);
// {
//   webRTC: true,
//   customCapture: true,
//   camera: true,
//   microphone: true,
//   videoCodec: { H264: true, H265: false, VP8: true, VP9: true },
//   screenSharing: true,
//   errInfo: {}
// }

4.2 在线检测

ZEGO 提供了一个 在线检测工具,帮助开发者自动检测设备浏览器能否正常运行 WebRTC 应用。

该工具支持检测以下项目:

  • 浏览器兼容性
  • 设备获取能力
  • H264 视频编码检测
  • VP8 视频编码检测
  • 扬声器播放是否正常
  • 当前设备可支持哪些分辨率

在线检测工具是通过调用 zg.checkSystemRequirements 接口,自动检测浏览器是否支持当前的语音、视频通话,下面将逐项说明其原理。


1. WebRTC 检测

Web SDK 是基于 WebRTC 实现音视频通信的,故对 WebRTC 检测是必不可少的。

在线检测页面中,通过 zg.checkSystemRequirements 接口获取到检测结果对象,对象中存在 webRTC,该项用于检测当前页面是否支持 WebRTC 基本能力。如果返回结果为 “true” 表示支持 WebRTC;结果为 “false” 表示不支持,无法正常使用 Web SDK。

const result = await zg.checkSystemRequirements();
console.log(result.webRTC)

2. 设备获取能力

通过 zg.enumDevices 接口获取到设备列表,设备列表包括摄像头、麦克风以及扬声器的设备 ID、标签等信息。开发者可以通过设备列表的长度,判断当前页面是否具备获取设备信息的能力。

const devicesInfo = await zg.enumDevices();
console.log(devicesInfo);

3. H264 视频编码检测

通过 zg.checkSystemRequirements 接口获取对 H264 的兼容性。返回结果为 “true” 表示当前页面支持 H264 编码;结果为 “false” 表示不支持,若不支持则会有可能出现无法互通的问题。

const result = await zg.checkSystemRequirements();
console.log(result.videoCodec.H264)

4. VP8 视频编码检测

通过 zg.checkSystemRequirements 接口获取对 VP8 的支持度。返回结果为 “true” 表示当前页面支持 VP8 编码;结果为 “false” 表示不支持,若不支持则会有可能出现无法互通的问题。

const result = await zg.checkSystemRequirements();
console.log(result.videoCodec.VP8)

5. 麦克风检测

通过 zg.checkSystemRequirements 接口检测能否正常采集到麦克风的声音。

开发者可以通过 zg.enumDevices() 接口获取到麦克风设备列表,并拿到相应的麦克风设备 ID 与 label。若检测的返回结果中,参数 “microphone” 为 “true”,且枚举设备列表中麦克风设备列表长度大于 0,则表示当前页面支持麦克风采集。

const result = await zg.checkSystemRequirements();
console.log(result.microphone);

const devicesInfo = await zg.enumDevices();
console.log(devicesInfo.microphones);

6. 扬声器检测

通过 HTML5 音频组件播放一段音乐,由用户点击播放后,确认是否听到了正在播放的声音。


7. 摄像头检测

通过 zg.checkSystemRequirements 接口判断当前页面是否支持采集摄像头。

开发者可以通过 zg.enumDevices 获取到摄像头设备列表,并拿到相应的摄像头设备 ID 与 label。若检测的返回结果中,参数 “camera” 为 “true”,且枚举设备列表中摄像头设备列表长度大于 0,则表示当前页面支持摄像头采集。

const result = await zg.checkSystemRequirements();
console.log(result.camera);

const devicesInfo = await zg.enumDevices();
console.log(devicesInfo.cameras);

8. 当前设备可支持哪些分辨率

通过 zg.createStream 接口,基于不同的分辨率参数,创建视频流。

开发者可以通过 videoTrack.getSettings 获取视频分辨率,若获取的分辨率与参数相同,则测试通过,否则提示不支持。

const stream = await zg.createStream({camera: {width, height}});

const settings = stream.getVideoTracks()[0].getSettings()

9. 连通性

调用 zg.createStream 接口创建流,调用 zg.startPublishingStream 接口,连接 ZEGO 服务,开始推流,以检测当前网络链路的可用性。

如果提示不支持,请检查当前的网络状态或联系 ZEGO 技术支持。

const stream = await zg.createStream();
zg.startPublishingStream('streamID', stream);

zg.on("publisherStateUpdate", result => {
    console.log('publisherStateUpdate: ', result.streamID, result.state);

    if (result.state == 'PUBLISHING') {
        console.info(' publish  success ' + result.streamID);
    }
})