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.

Desktop browsers

Supported browsers

Currently, the ZEGO Express Web SDK supports the following browsers on desktop devices:

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.

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:

Restrictions

The following are the compatibility restrictions of the Web SDK on Android:

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.

Restrictions

The following are the compatibility restrictions of the Web SDK on iOS:

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 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:

1. Call the checkSystemRequirements method to get the result object webRTC.
2. 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.

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 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 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 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:

1. Call the checkSystemRequirements method.
2. And call the 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 is true.
   • The length of the microphone device list in the enumerated list is greater than 0.

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:

1. Call the checkSystemRequirements method.
2. And call the 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 is true.
   • The length of the camera device list in the enumerated list is greater than 0.

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:

1. Call the createZegoStream method to create video streams of different resolutions.

2. 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 zegoLocalStream = await zg.createZegoStream({
    camera: {
        video: {
            width,
            height
        }
    }
});

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

9. Check the connectivity

To check whether the connectivity has been established, call the createZegoStream method to create a stream, and then call the startPublishingStream method to start publishing the stream.

If the testing fails, contact ZEGO technical support.

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);
    }
})