用这个开源工具,提前为你的 WebRTC 应用排个雷(二)

阅读数:105 2019 年 11 月 30 日 22:38

用这个开源工具,提前为你的 WebRTC 应用排个雷(二)

检测麦克风

第一步:使用 AgoraRTC.createStream 创建音频流

第二步:使用 stream.getAudioLevel 来检测当前的音量

/** create an audio stream and try to init/play it /
AgoraRTC.createStream(): stream
/
*

  • accumulate audio level to check
  • if it is in an ideal range
    */
    stream.getAudioLevel(): number

检测扬声器

在这里,我们直接使用了 HTML5 的音频组件,让用户来确认是否听到了正在播放的音频。

测分辨率

第一步:使用 AgoraRTC.createStream 基于不同的参数创建视频流

第二步:使用 HTMLVideoElement 来获取视频的分辨率

复制代码
/** Create stream with different video profiles */
AgoraRTC.createStream(): stream
/** Get actual resolution from html element */
HTMLVideoElement.videoHeight
HTMLVideoElement.videoWidth

检测网络连接

第一步:使用 AgoraRTC.createClient 来创建一个发送客户端和一个接收客户端
第二步:使用 AgoraRTC.createStream 创建流
第三步:使用 client.publish 从发送客户端发布流
第四步:使用 client.subscribe 将发送的流订阅至接收客户端
第五步:使用 stream.getStats 获取网络连接状态数据

复制代码
/**
* Create two clients: a sender which will publish
* a regular stream, and a receiver which will subscribe the
* stream published by the sender.
*/
AgoraRTC.createStream(): stream
/** Get stream tranfer info by using getStats */
stream.getStats(callback: (stats:any) => void): void

检测摄像头

向用户询问是否开启摄像头,如果确认开启,则在画面中显示用户摄像头采集到的图像。

测试工具的修改
如果你是 Agora 开发者,想要修改出一个适用于自己应用的测试工具,可以按照以下步骤操作:

1. 将你的 App ID 填写到 ./src/utils 目录下的 settings.js 文件中。

2. 安装 dependencies

复制代码
npm install

3. 在本地运行应用

复制代码
npm run dev

在浏览器访问 localhost:8080

4.Build 应用

复制代码
npm run build

创建文件需要 HTTP 服务器。

完成以上步骤后,你也可以将它集成到自己的应用中,并根据需要,修改 UI。在用户使用产品之前,可以进行运行环境的检测,帮你提前排雷,提高用户体验。

本文转载自公众号声网 Agora(ID:shengwang-agora)。

原文链接:

https://mp.weixin.qq.com/s/BPaj4p1auMb_1JyazhpElQ

评论

发布