vue加入腾讯实时音视频TRTC Web SDK

受疫情的影响,各大教育机构都有了直播的需求,但是教育行业跟普通直播有一些不同,在线教育一般都需要学员的互动,于是我们选择了腾讯的实时音视频,当需要学生互动的时候,就让学生上麦发言。

1. 腾讯云配置

首先注册腾讯云,然后下载官方给的demo:
实时音视频快速跑通Demo

下载上面github地址的所有文件,debug/GenerateTestUserSig.js是用来生成UserSig的(加入直播间必须要这个),里面需要配置自己的腾讯云账号SDKAPPID,SECRETKEY。

SECRETKEY根据每个userid来生成,一般我们都是在后端生成,如果只是测试可以先用下面这个工具,
在实时音视频控制台->开发辅助->UserSig生成&校验
直达链接:SECRETKEY生成工具

2. 接入Vue

直接把下载的文件trtc.js和rtc-client.js放到vuecli创建的任意目录,使用的页面直接引入即可,举例:
import RtcClient from "../trc/rtc-client";

rtc-client.js里面封装了一个类,已经写了大部分api功能,我们直接根据逻辑调用就可以了

3. 踩雷避坑
  1. stream.play就是流播放的方法,只能传入一个div的id,因此在vue环境下,需要注意每次必须得等待dom刷新完毕,才能执行。也就是要用this.$nextTick() , 由于是多人音视频,学员上线下线断线重连等等地方都要加上,可以写个通用的处理
  2. 注意流的事件触发,如果取消一个流的订阅会触发的不是流删除,而是流更新事件,详情请仔细阅读官方文档
    实时音视频sdk api 文档地址
  3. 如果流用一个vue的对象数组data渲染,一旦某个流断开,页面肯定会重新渲染,这样一来用vue就会更新整个节点,造成流会断开重新再加载,目前不清楚该如何解决

之后可能更新一个简单的Demo代码

发布了6 篇原创文章 · 获赞 4 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/gogogodeng/article/details/105209544