Web SDK compatibility
Introduction
WebRTC is a JavaScript API that supports Web browsers to implement real-time audio or video calling and Web real-time Communications.
The ZEGO Web SDK implements the real-time audio and video features based on the WebRTC. Therefore, whether the Web SDK can be used in the current browser depends on whether the current browser is compatible with WebRTC. At present, WebRTC works well in Chrome, Firefox, and Safari on desktop clients and Safari on mobile clients.
This article describes the browser compatibility on both the desktop client and mobile client.
This document does not cover all browsers because platforms and some in-app browsers work differently, and those not listed in the following do not indicate not supported. For any questions, contact ZEGO technical support.
Desktop browsers
Supported browsers
Currently, the ZEGO Express Web SDK supports the following browsers on desktop devices:
WebRTC is currently best supported on Chrome. We recommend you use the latest version of Chrome and download the latest version of the Web SDK.
OS | Browser | Version compatibility | Stream playing | Stream publishing | Screen sharing |
---|---|---|---|---|---|
macOS |
Safari |
11 or later |
✔️ |
✔️ |
✔️ (Safari 13 or later) |
Chrome |
56 or later |
✔️ |
✔️ |
✔️ (Chrome 72 or later) |
|
Firefox |
56 or later |
✔️ |
✔️ |
✔️ (Firefox 66 or later) |
|
Edge |
80 or later |
✔️ |
✔️ |
✔️ |
|
WeChat built-in browser |
- |
✔️ |
✔️ |
✖️ |
|
WeCom built-in browser |
- |
✔️ |
✖️ |
✖️ |
|
Windows |
Chrome |
56 or later |
✔️ |
✔️ |
✔️ (Chrome72 or later) |
QQ |
10.4 or later |
✔️ |
✔️ |
✖️ |
|
Firefox |
56 or later |
✔️ |
✔️ |
✔️ (Firefox 66 or later) |
|
Edge |
80 or later |
✔️ |
✔️ |
✔️ |
|
WeChat built-in browser |
- |
✔️ |
✖️ |
✖️ |
|
WeCom built-in browser |
- |
✔️ |
✖️ |
✖️ |
Restrictions
Differences between browsers dictate that the features supported may vary.
To ensure privacy, Chrome 81 or later, Safari, and Firefox browsers need to obtain the device ID only after you have granted the media device permission. For details, contact ZEGO technical support.
Browser | Restrictions |
---|---|
Chrome |
WebRTC technology was first proposed by Google, and Chrome was the first browser to support it, so there are fewer restrictions on Chrome.
|
Firefox |
|
Safari |
|
Android browsers
Supported browsers
Android supports customized WebView, so the WebView varies by device and application.
Currently, the ZEGO Express Web SDK supports the following browsers on Android devices:
We recommend you use Chrome because there is no guarantee that your native browser will support WebRTC well, as different phone manufacturers will make more or fewer changes to the browser kernel.
OS | Browser | Stream playing | Stream publishing | Screen sharing |
---|---|---|---|---|
Android |
Chrome |
✔️ |
✔️ |
✖️ |
Firefox |
✔️ |
✔️ |
✖️ |
|
QQ |
✔️ |
✔️ |
✖️ |
|
UC |
✖️ |
✖️ |
✖️ |
|
WeChat bunilt-in browser (TBS Kernel) |
✔️ |
✔️ |
✖️ |
|
WeChat bunilt-in browser (XWEB kernel) |
✔️ |
✔️ |
✖️ |
|
WeCom bunilt-in browser |
✔️ |
✔️ |
✖️ |
Restrictions
The following are the compatibility restrictions of the Web SDK on Android:
Browser | Restrictions |
---|---|
All browsers/In-app WebView (WeChat built-in browser, QQ, UC browsers, etc.) |
|
Chrome |
Video codec: Chrome does not support H.264 codec on some Android devices, such as Huawei. |
Firefox |
|
Some Android devices do not support H.264
codec. To check whether this codec can be used, call the checkSystemRequirements
method.
If H.264
is not supported, use the VP8
codec instead.
At the same time, some browsers do not support WebRTC technology, try Chrome if this happens.
iOS browsers
Supported browsers
On iOS, all apps with built-in browsers use the system WebView, so support for the Web SDK relies only on the iOS system version.
OS | Browser | Version compatibility | Receive (Stream playing) | Send (Stream publishing) | Screen sharing |
---|---|---|---|---|---|
iOS 11.1.2 or later |
Safari |
11 or later |
✔️ |
✔️ |
✖️ |
iOS 12.1.4 or later |
Chrome |
- |
✔️ |
✖️ |
✖️ |
iOS 14.3 or later |
Chrome |
- |
✔️ |
✔️ |
✖️ |
iOS 12.1.4 or later |
WeChat bunilt-in browser |
- |
✔️ |
✖️ |
✖️ |
iOS 14.3 or later |
WeChat bunilt-in browser |
WeChat 6.5 or later |
✔️ |
✔️ |
✖️ |
iOS 12.1.4 or later |
WeCom bunilt-in browser |
- |
✔️ |
✖️ |
✖️ |
Restrictions
The following are the compatibility restrictions of the Web SDK on iOS:
Browser | Restrictions |
---|---|
All browsers/In-app WebView |
|
Safari |
|
Browser compatibility testing
Test browser compatibility with manual settings
To check the current browser compatibility, you can call the checkSystemRequirements
method, and this can be used for testing compatibility of the WebRTC, video codec, custom capture, camera, microphone and screensharing.
const result = await zg.checkSystemRequirements();
// The returned [result] is the compatibility result. [webRTC] is [true] indicates webRTC is supported, for more details, see the API documents.
console.log(result);
// {
// webRTC: true,
// customCapture: true,
// camera: true,
// microphone: true,
// videoCodec: { H264: true, H265: false, VP8: true, VP9: true },
// screenSharing: true,
// errInfo: {}
// }
Test browser compatibility online
For your convenience, ZEGO provides an online detection tool, to help you automatically test whether the browser can run WebRTC applications properly. To use this tool, contact the ZEGO technical support.
The tool supports testing the following:
- Browser compatibility
- Device acquisition capability
- H264 video codec
- VP8 video codec
- Speaker testing
- Resolutions supported
This online testing tool realizes its testing function by calling zg.checkSystemRequirements
method. The following describes the principle in detail.
1. WebRTC testing
The ZEGO Web SDK implements the real-time audio and video features based on the WebRTC. Therefore, it is essential to test the WebRTC.
To check whether the current browser supports WebRTC, do the following:
- Call the
zg.checkSystemRequirements
method to get the result objectwebRTC
. - You can tell by the returned results:
- The current browser supports WebRTC when the result is
true
. - The current browser does not support WebRTC when the result is
false
, and the Web SDK can't be used normally.
- The current browser supports WebRTC when the result is
const result = await zg.checkSystemRequirements();
console.log(result.webRTC)
2. Device acquisition capability testing
To check whether the current browser supports data acquisition by the devices (camera, microphone, and speaker), call the zg.enumDevices
method to get the device ID, label, and etc. You can tell based on the returned length of the device list.
const devicesInfo = await zg.enumDevices();
console.log(devicesInfo);
3. H264 video codec testing
To check whether the H264
is supported, call the zg.checkSystemRequirements
method. You can tell by the returned results:
- The current webpage supports H264
when the result is true
.
- The current webpage does not support H264
when the result is false
, and in this case, the connectivity can't be guaranteed.
const result = await zg.checkSystemRequirements();
console.log(result.videoCodec.H264)
4. VP8 video codec testing
To check whether the VP8
is supported, call the zg.checkSystemRequirements
method. You can tell by the returned results:
- The current browser supports VP8
when the result is true
.
- The current browser does not support VP8
when the result is false
, and in this case, the connectivity can't be guaranteed.
const result = await zg.checkSystemRequirements();
console.log(result.videoCodec.VP8)
5. Mircophone testing
To check whether the current browser supports collecting sound with a microphone, do the following:
- Call the
zg.checkSystemRequirements
method. - And call the
zg.enumDevices()
method to obtain the microphone device list, and get the corresponding microphone device ID and label. It indicates the current browser does support collecting sound with a microphone when the following shows in the returned results:- The
microphone
property istrue
. - The length of the microphone device list in the enumerated list is greater than 0.
- The
const result = await zg.checkSystemRequirements();
console.log(result.microphone);
const devicesInfo = await zg.enumDevices();
console.log(devicesInfo.microphones);
6. Speaker testing
To test the speaker, play music with the HTML5 audio component, and see if you can hear what's playing.
7. Camera testing
To check whether the current browser supports collecting images with a camera, do the following:
- Call the
zg.checkSystemRequirements
method. - And call the
zg.enumDevices()
method to obtain the camera device list, and get the corresponding camera device ID and label. It indicates the current browser does support collecting images with a camera when the following shows in the returned results:- The
camera
property istrue
. - The length of the camera device list in the enumerated list is greater than 0.
- The
const result = await zg.checkSystemRequirements();
console.log(result.camera);
const devicesInfo = await zg.enumDevices();
console.log(devicesInfo.cameras);
8. Resolutions supported
To test what resolutions the current device supports, do the following:
Call the
zg.createStream
method to create video streams of different resolutions.And call the
videoTrack.getSettings
method to get the video resolution. If the returned resolution is the same as the stream you created, the test passes, and the resolution is supported; otherwise, the returned result shows it is not supported instead.
const stream = await zg.createStream({camera: {width, height}});
const settings = stream.getVideoTracks()[0].getSettings()
9. Check the connectivity
To check whether the connectivity has been established, call the zg.createStream
method to create a stream, and then call the zg.startPublishingStream
method to start publishing the stream.
If the testing fails, contact ZEGO technical support.
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);
}
})