WebRTC 在线检测工具，测试浏览器是否支持WebRTC

为帮助开发者自动检测设备浏览器能否正常运行 WebRTC 应用，ZEGO 提供了一个WebRTC 在线检测工具。

该工具支持检测以下项目：

• 浏览器兼容性
• 设备获取能力
• H264 视频编码检测
• VP8 视频编码检测
• 麦克风检测
• 扬声器检测
• 摄像头检测
• 当前设备可支持哪些分辨率
• 连通性检测

在线检测工具是通过调用 zg.checkSystemRequirements 接口，自动检测浏览器是否支持当前的语音、视频通话，下面将逐项说明其原理。

ZEGO Web SDK 是基于 WebRTC 实现音视频通信的，故对 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);

H264 视频编码检测

通过 zg.checkSystemRequirements 接口获取对 H264 的兼容性。返回结果为 “true” 表示当前页面支持 H264 编码；结果为 “false” 表示不支持，若不支持则会有可能出现无法互通的问题。

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

VP8 视频编码检测

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

了解 WebRTC 浏览器兼容性和已知更多问题，请访问文档 https://doc-zh.zego.im/article/12047