新知实验室TRTC初体验

小记

一次偶然的邂逅,让我知道了TRTC实时音视频这个神奇的东西,于是便开始研究起来这个鬼东西,接下来将详细记录一下开发过程,以便后期使用.

正文

实时音视频（TRTC）

是腾讯云提供的一套低延时、高质量的音视频通讯服务，致力于为腾讯云客户提供稳定、可靠和低成本的音视频传输能力。您可以使用该服务快速构建“视频通话”、“在线教育”、“直播连麦”、“在线会议”等对通信延时要求比较苛刻的音视频应用。

如和使用

1. 注册腾讯云账号

2. 登录实时音视频控制台，选择 开发辅助 > 快速跑通Demo。

3. 单击 新建应用 输入应用名称，例如 TEST；若您已创建应用可单击 选择已有应用。

4. 查看应用

5. 下载 Web 端 SDK 及配套的 Demo 源码。

这里有一个坑点需要注意
为啥我没有用uniapp 而是选择web 的呢 ?
首先如果选择uniapp 或者小程序的话需要你自己注册一个企业版的小程序账号 ,并开通音视频相关的外部接口, 然而我并没有.因此我无奈的选择了web 的sdk进行开发,进一步感受丝滑 ,哈哈哈

6. 获取 SDKAppId 和 密钥（SecretKey) ,这两个值相当于用户的token ,识别用户用的 ,在调用sdk 的时候 需要给个输入框让其输入 ,
7. 接下来就是运行项目了 比较简单
8. 在这里输入 appid和秘钥进入房间就可以了 .

运行效果展示

还是棒棒的哦!!!

代码分析

1.复制可使用链接

通过switchCase 来进行分流管理

 switch (this.label) {
      case 'userId': {
        const userId = getUrlParam('userId');
        this.infoValue = userId ? userId : `user_${parseInt(Math.random() * 100000000, 10)}`;
        break;
      }
      case 'roomId': {
        const roomId = getUrlParam('roomId');
        this.type = 'number';
        this.infoValue = roomId ? roomId : parseInt(Math.random() * 100000, 10);
        break;
      }
      case 'sdkAppId': {
        const sdkAppId = getUrlParam('sdkAppId');
        this.type = 'number';
        this.infoValue = sdkAppId ? sdkAppId : '';
        break;
      }
      case 'secretKey': {
        const secretKey = getUrlParam('secretKey');
        this.infoValue = secretKey ? secretKey : '';
        break;
      }
      default:
        break;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

将传过来的参数通过getUrlParam 方法快速生成分享链接
2. 获取用户签名

   <!-- rtc 房间 -->
      <comp-room
        :sdkAppId="Number(sdkAppId)"
        :secretKey="secretKey"
        :userId="userId"
        :roomId="Number(roomId)"
        :cameraId="cameraId"
        :microphoneId="microphoneId"></comp-room>
1
2
3
4
5
6
7
8

调用组件,将相关参数传入
组件内通过 new LibGenerateTestUserSig(sdkAppId, secretKey, 604800); 将 sdkAppid,secretKey,有效时间 传入到封装好的方法中, 这个封装的方法官网提供,直接使用便可
同时 new LibGenerateTestUserSig 调用之后会返回一个函数 , 我们通过函数中的genTestUserSig 来获取用户的签名,代码如下

const { sdkAppId, secretKey, roomId } = this;
      const inviteUserId = `user_${parseInt(Math.random() * 100000000, 10)}`;
      const userSigGenerator = new LibGenerateTestUserSig(sdkAppId, secretKey, 604800);
      const inviteUserSig = userSigGenerator.genTestUserSig(inviteUserId);
1
2
3
4

ok! , 关键代码就是这些

测试反馈及问题解决

1.推拉流问题

Web 端 SDK 日志中报错 NotFoundError、NotAllowedError、NotReadableError、OverConstrainedError 以及 AbortError 分别是什么意思？

2.播放问题
音视频互通过程中出现有画面没有声音问题？

因浏览器自动播放策略限制，音频播放会出现 PLAY_NOT_ALLOWED 异常，此时业务层需要引 导用户手动操作 Stream.resume() 来恢复音频播放，自动播放受限处理建议 。
未知异常导致，请通过监控仪表盘查询收发两端的 audioLevel & audioEnergy。

运行 Web 端 SDK 时，出现错误：“RtcError: no valid ice candidate found”该如何处理？

出现该错误说明 TRTC Web SDK 在建立媒体传输通道时失败，请检查防火墙配置。

总结

对接起来还是有一定的难度, 自定义开发的话,缺少必要的文档, 需要自己多查查相关文献,
针对线上会议,或者多人会议的情况,有是会出现NotReadableError 错误 , 不过疫情当下,能够推出这个sdk还是很牛的 ,希望后期官方可以完善一下api文档,