How to use ZEGO Express Web SDK on mobile?

Overview

ZEGO Express Web SDK is based on WebRTC to implement audio and video calls. Therefore, the support of this SDK depends on the browser's or Webview's support for WebRTC. Currently, most PC browsers and mainstream mobile browsers on the market support WebRTC.

However, it should be noted that the implementation methods of mobile browsers on different platforms and their support for video encoding are different. Currently, ZEGO Express Web SDK supports VP8 and H.264 encoding formats. Most PC browsers also support these two encodings, but mobile is more complex. Therefore, if you need to use the Web SDK on mobile, developers need to pay attention to the support of different application scenarios on mobile for VP8 and H.264 encoding formats. This article will provide a detailed introduction to this.

Encoding Format Support

Android

Currently, on the Android platform, except for Firefox browser which no longer installs OpenH264 after version 68, mainstream browsers support VP8 and H.264 video encoding formats.

Unlike iOS, the Android platform's native WebView can be customized, so different platforms, different devices, and different applications' WebView implementations may vary. The following table is for reference only.

iOS

Currently, on the iOS platform, all in-app WebViews can only use the system-provided ones, which have certain limitations. Except for Safari browser, they do not support audio and video publishing.

Encoding Format Selection

You need to choose the appropriate video encoding format based on your actual situation.

• If both the publisher and audience are using ZEGO Express Web SDK, it is usually recommended to use VP8 video encoding format for publishing and playing. If there is a conflict between the two ends, that is, one end only supports H.264 and the other end only supports VP8 (such as Android Firefox 68 and iOS 11 Safari), it is recommended to use mixed stream transcoding. For details, please refer to Mixed Stream Transcoding Sample Demo.
• If one end of the publisher and audience uses Native SDK, the video encoding of the Native end and Web end must be consistent.

Detect whether the current browser supports VP8 and H.264 video encoding

Since different platforms, different browsers, and different applications have different support for video encoding formats, you need to call the checkSystemRequirements interface before publishing and playing to detect the current browser or WebView's support for VP8 and H.264.

const res = await zg.checkSystemRequirements();
if (!result.videoCodec.H264) {
alert('The current browser does not support H264 video encoding')
} else if (!result.videoCodec.VP8) {
alert('The current browser does not support VP8 video encoding')
}

const res = await zg.checkSystemRequirements();
if (!result.videoCodec.H264) {
alert('The current browser does not support H264 video encoding')
} else if (!result.videoCodec.VP8) {
alert('The current browser does not support VP8 video encoding')
}

Choose the appropriate video encoding format for publishing

You can call the publishing interface startPublishingStream and choose the appropriate video encoding format for publishing based on your actual situation.

zg.startPublishingStream(streamID, localStream, {videoCodec: 'VP8'})

zg.startPublishingStream(streamID, localStream, {videoCodec: 'VP8'})

Choose the appropriate video encoding format for playing

You can call the playing interface startPlayingStream and choose the appropriate video encoding format for playing based on your actual situation.

const remoteStream = await zg.startPlayingStream(streamId,
{videoCodec: 'VP8'})

const remoteStream = await zg.startPlayingStream(streamId,
{videoCodec: 'VP8'})