Browser compatibility and known issues

Web SDK implements audio and video communication based on WebRTC, so WebRTC detection is essential.

In the online detection page, the detection result object is obtained through the zg.checkSystemRequirements interface. There is a webRTC item in the object, which is used to detect whether the current page supports basic WebRTC capabilities. If the returned result is "true", it means WebRTC is supported; if the result is "false", it means it is not supported, and Web SDK cannot be used normally.

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

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

Get the device list through the zg.enumDevices interface. The device list includes device IDs, labels, etc. for cameras, microphones, and speakers. Developers can determine whether the current page has the ability to obtain device information by the length of the device list.

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

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

Get compatibility with H264 through the zg.checkSystemRequirements interface. A returned result of "true" means the current page supports H264 encoding; a result of "false" means it is not supported, and if not supported, there may be interoperability issues.

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

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

Get compatibility with H265 through the zg.checkSystemRequirements interface. A returned result of "true" means the current page supports H265 encoding; a result of "false" means it is not supported, and if not supported, there may be interoperability issues.

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

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

Get support for VP8 through the zg.checkSystemRequirements interface. A returned result of "true" means the current page supports VP8 encoding; a result of "false" means it is not supported, and if not supported, there may be interoperability issues.

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

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

Detect whether the microphone sound can be normally captured through the zg.checkSystemRequirements interface.

Developers can obtain the microphone device list through the zg.enumDevices() interface and get the corresponding microphone device ID and label. If the parameter "microphone" in the detection result is "true" and the length of the microphone device list in the enumerated device list is greater than 0, it means the current page supports microphone capture.

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

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

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

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

Play a piece of music through the HTML5 audio component, and after the user clicks to play, confirm whether the playing sound is heard.

Determine whether the current page supports camera capture through the zg.checkSystemRequirements interface.

Developers can obtain the camera device list through zg.enumDevices and get the corresponding camera device ID and label. If the parameter "camera" in the detection result is "true" and the length of the camera device list in the enumerated device list is greater than 0, it means the current page supports camera capture.

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

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

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

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

Create a video stream through the zg.createZegoStream interface based on different resolution parameters.

Developers can obtain the video resolution through videoTrack.getSettings. If the obtained resolution is the same as the parameter, the test passes; otherwise, it indicates that it is not supported.

const zegoLocalStream = await zg.createZegoStream({
    camera: {
        video: {
            width,
            height
        }
    }
});

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

const zegoLocalStream = await zg.createZegoStream({
    camera: {
        video: {
            width,
            height
        }
    }
});

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

Call the zg.createZegoStream interface to create a stream, and call the zg.startPublishingStream interface to connect to the ZEGO server and start publishing to detect the availability of the current network link.

If it indicates not supported, please check the current network status or 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);
    }
})

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