TRTC TRTC Vue Demo + 后端密钥鉴权
原创TRTC TRTC Vue Demo + 后端密钥鉴权
原创
不禁感叹，Web的技术栈可真多啊，Vue是现行最流行的前端框架之一，相较于它的竞争对手React具有更加容易上手的特点。这里先发布一版Vue版本的Demo，因为当时写的时候没有太多去规划模块，设置太多全局函数，不过既然是Demo确实应该快速阅读的特点，也许反而是件好事。
本文的Vue Demo将不从前端进行密钥计算，如果有需要在前端进行密钥计算的朋友可以参考前一篇的官方Web SDK demo，使用的是Jquery库，直接用script标签进行引入，如果是Vue的话需要用import的方式引入库，这里用服务端进行密钥计算并返回，也给各位进行一下参考
Vue在音视频的实现上相较于官方网站的Jquery版本并无太大差异，由于减少了大量DOM的操作，代码上反而会显得比较精简，但是有几个的点需要特别注意，容易踩坑
（1）路由组件间传值
Vue作为单页面应用框架，对于（伪）跨页面信息需要用组件传值，由于该项目中，登录与初始化需要用到userSig以及SDKAPPID、用户名、房间号等通用信息可以通过组件化传值的方式统一化。当然也可以通过全局变量或者缓存，这里大家根据自己的场景而定即可
（2）先授权才能初始化
初始化的时候才能获取到麦克风和摄像头权限（然后初始化的时候又需要麦克风和权限的参数），所以相当于要初始化两次，建议一次在进入房间前登录时进行初始化获取麦克风和视频的授权，然后在房间页再初始化，这样初始化后的客户端就不需要跨页面操作了。
后端服务如下：
1. 后端密钥计算有npm包：tls-sig-api-v2
2. 本案例用的是Koa和Koa router的node框架来优化
3. koa2-cors用于处理跨域问题，koa-bodyparser用于解析传递过来的参数
4. 直接new一个TLSSigAPIv2的实例得到api，api.genSig传入userid和expire得到sig并返回
前端调用(axios):
体验代码如下：www.readercyc.club/chatroom(最近好像欠费了不一定能用）
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。