WebRTC 是一个支持网页浏览器进行实时语音对话或视频对话、进行实时数据传输(Web Real-Time Communication)的 JavaScript API。
ZEGO Express Web SDK 使用了 WebRTC 技术实现实时音视频功能。因此,在当前浏览器中能否使用 Web SDK,依赖于当前浏览器对 WebRTC 能否兼容。目前 WebRTC 主要在桌面端的 Chrome、 Firefox、Safari 等浏览器,以及移动端的 Safari 浏览器上有较为完整的支持。本文将分别介绍桌面端和移动端的浏览器兼容性情况。
由于平台和一些应用内置浏览器的实现各不相同,无法涵盖所有浏览器,以下文档中未列举的浏览器并不代表不支持。开发者如有疑问,请联系 ZEGO 技术支持咨询。
目前 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 或以上版本 |
✔️ |
✔️ |
✔️ |
|
微信内置浏览器 |
- |
✔️ |
✖ |
✖ |
|
企业微信内置浏览器 |
- |
✔️ |
✖ |
✖ |
不同的浏览器存在差异,导致支持的功能可能有所不同。
出于隐私安全考虑,Chrome 较新的版本(81 及以上版本)、Safari 和 Firefox 浏览器需要在获得媒体设备权限后才能获取设备 ID,详情请参考 为什么在 Chrome 81 及以上版本浏览器上无法获取设备 ID。
浏览器 | 限制 |
---|---|
Chrome |
WebRTC 技术是由 Google 最先提出,Chrome 也是最先支持的浏览器,所以在 Chrome 上的限制较少。
|
Firefox |
|
Safari |
|
已知问题 | 建议规避方案 |
---|---|
调用 getStatus 方法报错:“Failed to execute getStats on 'RTCPeerConnection': The callback-based getStatss() method is no longer supported.”,无法正常获取推拉流质量。 |
请升级 Express Web SDK 至 2.25.1 或以上版本。 |
使用第三方媒体流时,如果两次对同一个 HTMLMediaElement 调用 captureStream 方法,第一次获取的媒体流会被停掉。 |
请避免该类用法。如果需要重新采集第三方媒体流,请及时替换后续采集的流的轨道。 |
已知问题 | 建议规避方案 |
---|---|
在 Firefox 浏览器上修改了音频码率,不生效。 |
请升级 Firefox 至最新版本,或更换其它浏览器。 |
已知问题 | 建议规避方案 |
---|---|
在 Safari 14.0.1 和 14.2 版本上,音频可能出现断断续续。 |
请升级 Safari 至最新版本,或更换其它浏览器。 |
Android 平台原⽣ WebView 可⽀持⾃定义,因此不同平台不同设备以及不同应⽤的 WebView 实现可能存在差异,ZEGO Express Web SDK 在 Android 支持的情况如下:
由于不同手机产商对自带浏览器或多或少会对其浏览器内核做出改动,无法保证自带浏览器能够很好地支持 WebRTC,建议开发者使用 Chrome 浏览器。
操作系统 | 浏览器 | 拉流 | 推流 | 屏幕共享 |
---|---|---|---|---|
Android |
Chrome 浏览器 |
✔️ |
✔️ |
✖ |
Firefox 浏览器 |
✔️ |
✔️ |
✖ |
|
QQ 浏览器 |
✔️ |
✔️ |
✖ |
|
UC 浏览器 |
✖ |
✖ |
✖ |
|
微信内置浏览器 (TBS 内核) |
✔️ |
✔️ |
✖ |
|
微信内置浏览器 (XWEB 内核) |
✔️ |
✔️ |
✖ |
|
企业微信内置浏览器 |
✔️ |
✔️ |
✖ |
Web SDK 在 Android 上的兼容性限制如下:
浏览器 | 限制 |
---|---|
所有浏览器/应用内嵌 WebView(例如微信内置浏览器、QQ 浏览器、UC 浏览器等) |
|
Chrome |
编码格式:部分 Android 设备(如华为)上,Chrome 浏览器不支持 H.264 编解码格式。 |
Firefox |
视频画面:在Firefox 上使用 Web SDK 与某些设备通话时,可能会出现所看到的对端画面发生了旋转。 |
部分 Android 设备不支持 H.264 编解码。开发者可以通过 checkSystemRequirements 接口检测,如果当前设备不支持该编码格式时,可以使用 “VP8” 编码。同时会有部分浏览器不支持 WebRTC 的技术,建议开发者使用 Chrome 浏览器。
⽬前 iOS 平台上所有应⽤内置 WebView 只能使⽤系统提供的,具有⼀定的局限性。
操作系统 | 浏览器 | 版本兼容性 | 接收(播放) | 发送(上麦) | 屏幕共享 |
---|---|---|---|---|---|
iOS 版本 >= 11.1.2 |
Safari 浏览器 |
11 或以上版本 |
✔️ |
✔️ |
✖ |
iOS 版本 >= 12.1.4 且 < 14.3 |
Chrome 浏览器 |
- |
✔️ |
✖ |
✖ |
iOS 版本 >= 14.3 |
Chrome 浏览器 |
- |
✔️ |
✔️ |
✖ |
iOS 版本 >= 12.1.4 且 < 14.3 |
微信内置浏览器 |
- |
✔️ |
✖ |
✖ |
iOS 版本 >= 14.3 |
微信内置浏览器 |
6.5 或以上版本 (微信版本) |
✔️ |
✔️ |
✖ |
iOS 版本 >= 12.1.4 |
企业微信内置浏览器 |
- |
✔️ |
✖ |
✖ |
Web SDK 在 iOS 上的兼容性限制如下:
浏览器 | 限制 |
---|---|
所有浏览器/应用内嵌 webview |
|
Safari |
|
⽬前鸿蒙系统(HarmonyOS)只支持 Mate 60 Pro 机型,且需升级至 HarmonyOS NEXT 5.0 版本,同时需使用华为浏览器才能使用 WebRTC 音视频推拉流。
操作系统 | 浏览器 | 版本兼容性 | 接收(播放) | 发送(上麦) | 屏幕共享 |
---|---|---|---|---|---|
版本 >= NEXT 5.0 |
华为浏览器 |
- |
✔️ |
✔️ |
✖ |
Web SDK 在 HarmonyOS 华为浏览器上的兼容性限制如下:
浏览器 | 限制 |
---|---|
华为浏览器 |
|
已知问题 | 建议规避方案 |
---|---|
iPad 微信的内置浏览器,在 7.0.12 版本推流中开/关摄像头,拉流端会闪现一下 90 度的旋转画面。 |
请升级微信至最新版本。 |
“荣耀”系列手机端的微信内置浏览器,拉流渲染后没有声音。 |
请升级 Express Web SDK 至 2.26.0 或以上版本。 |
iOS 17 部分系统的微信内置浏览器使用混音或音质增强功能时,<audio> 标签播放器播放没有声音。 |
建议不要使用混音、音质增强等功能。如果必须使用,请升级至 iOS 17.1.1 或以上版本。 |
已知问题 | 建议规避方案 |
---|---|
在 iOS 16.0、16.1 版本上,只要初始化时使用了 AudioContext ,使用麦克风推流没有声音。 |
请升级至 iOS 16.2 或以上版本。 |
使用混音或音质增强功能时,<audio> 标签播放器播放没有声音。 |
建议不要使用混音、音质增强等功能;如果必须使用,请升级至 iOS 17.1.1 或以上版本。 |
已知问题 | 建议规避方案 |
---|---|
在部分 Android 设备上,由于设备不支持 H.264 编码,使用低版本的 Chrome 浏览器会出现推流报错。 |
请升级 Chrome 浏览器至最新版本。 |
已知问题 | 建议规避方案 |
---|---|
在鸿蒙系统上,使用 Firefox 浏览器推第三方视频流,推流/预览正常,但拉流时画面黑屏。 |
开发者可以通过 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: {}
// }
ZEGO 提供了一个 在线检测工具,帮助开发者自动检测设备浏览器能否正常运行 WebRTC 应用。
该工具支持检测以下项目:
在线检测工具是通过调用 zg.checkSystemRequirements
接口,自动检测浏览器是否支持当前的语音、视频通话,下面将逐项说明其原理。
Web SDK 是基于 WebRTC 实现音视频通信的,故对 WebRTC 检测是必不可少的。
在线检测页面中,通过 zg.checkSystemRequirements
接口获取到检测结果对象,对象中存在 webRTC
,该项用于检测当前页面是否支持 WebRTC 基本能力。如果返回结果为 “true” 表示支持 WebRTC;结果为 “false” 表示不支持,无法正常使用 Web SDK。
const result = await zg.checkSystemRequirements();
console.log(result.webRTC)
通过 zg.enumDevices
接口获取到设备列表,设备列表包括摄像头、麦克风以及扬声器的设备 ID、标签等信息。开发者可以通过设备列表的长度,判断当前页面是否具备获取设备信息的能力。
const devicesInfo = await zg.enumDevices();
console.log(devicesInfo);
通过 zg.checkSystemRequirements
接口获取对 H264 的兼容性。返回结果为 “true” 表示当前页面支持 H264 编码;结果为 “false” 表示不支持,若不支持则会有可能出现无法互通的问题。
const result = await zg.checkSystemRequirements();
console.log(result.videoCodec.H264)
通过 zg.checkSystemRequirements
接口获取对 VP8 的支持度。返回结果为 “true” 表示当前页面支持 VP8 编码;结果为 “false” 表示不支持,若不支持则会有可能出现无法互通的问题。
const result = await zg.checkSystemRequirements();
console.log(result.videoCodec.VP8)
通过 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);
通过 HTML5 音频组件播放一段音乐,由用户点击播放后,确认是否听到了正在播放的声音。
通过 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);
通过 zg.createZegoStream
接口,基于不同的分辨率参数,创建视频流。
开发者可以通过 videoTrack.getSettings
获取视频分辨率,若获取的分辨率与参数相同,则测试通过,否则提示不支持。
const zegoLocalStream = await zg.createZegoStream({
camera: {
video: {
width,
height
}
}
});
const settings = zegoLocalStream.stream.getVideoTracks()[0].getSettings();
调用 zg.createZegoStream
接口创建流,调用 zg.startPublishingStream
接口,连接 ZEGO 服务,开始推流,以检测当前网络链路的可用性。
如果提示不支持,请检查当前的网络状态或联系 ZEGO 技术支持。
const zegoLocalStream = await zg.createZegoStream();
zg.startPublishingStream('streamID', zegoLocalStream);
zg.on("publisherStateUpdate", result => {
console.log('publisherStateUpdate: ', result.streamID, result.state);
if (result.state == 'PUBLISHING') {
console.info(' publish success ' + result.streamID);
}
})
联系我们
文档反馈