专栏首页腾讯云终端专家服务TRTC TRTC Vue Demo + 后端密钥鉴权
原创

TRTC TRTC Vue Demo + 后端密钥鉴权

不禁感叹,Web的技术栈可真多啊,Vue是现行最流行的前端框架之一,相较于它的竞争对手React具有更加容易上手的特点。这里先发布一版Vue版本的Demo,因为当时写的时候没有太多去规划模块,设置太多全局函数,不过既然是Demo确实应该快速阅读的特点,也许反而是件好事。

本文的Vue Demo将不从前端进行密钥计算,如果有需要在前端进行密钥计算的朋友可以参考前一篇的官方Web SDK demo,使用的是Jquery库,直接用script标签进行引入,如果是Vue的话需要用import的方式引入库,这里用服务端进行密钥计算并返回,也给各位进行一下参考

vue架构图

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):

前端调用接口并返回Sig(axios)

体验代码如下:www.readercyc.club/chatroom(最近好像欠费了不一定能用)

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 云开发系列(二)—— 在容器开发一个论坛

    云的底层技术,是虚拟化,云服务器主机本身就是实体服务器虚拟出来的主机(虚拟机),而容器出现则是更进一步将虚拟机的资源再次隔离开,创造多个不同的环境供给开发。而在...

    楚歌
  • 云终端系列(一)—— 实时音视频Web端接入体验(Vue基础音视频通话篇)

    这个系列呢,主要给各位观众老爷看看目前有较大趋势的SaaS应用的SDK在各种主流Web终端的使用姿势和异常分析,如果想要纯粹了解开发的或者云原生,云开发的可以去...

    楚歌
  • 云开发系列(一):实现验证码登录

    终端作为所有用户的真正使用设备,终端开发者也是离用户最近的开发人员,它肩负着将后方提供的一个又一个独立服务整合为体验良好的产品的使命。面对不同的场景,所挑选的后...

    楚歌
  • MATLAB借助openai gym环境训练强化学习模型

    虽然openai的gym强化学习环境底层绘图库是pyglet,不太方便自定义,但是已有的环境还是很好用的,有了前面的python环境准备之后,只需要安装gym就...

    万木逢春
  • ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解

    本文实例讲述了ThinkPHP框架整合微信支付之Native 扫码支付模式二。分享给大家供大家参考,具体如下:

    砸漏
  • 裴健教授当选 SIGKDD 主席,继刘兵后,又一华人荣膺此位

    又一名华人当选 ACM SIGKDD 主席! ? 裴健:加拿大西蒙弗雷泽大学计算机学院教授,专注于数据挖掘、数据仓库和在线分析处理、数据库系统、生物信息学等领...

    AI科技大本营
  • npm install的代理问题

    我在windows的命令行里使用命令npm install jsdom想安装jsdom时,遇到如下错误:

    Jerry Wang
  • Linux 命令总结

    小闫同学啊
  • Python使用xadmin注意事项

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    bering
  • 镜像的自动化制作设计 原

    终极的目标是为了缩短构建时间和发布时间,为此增加一些镜像层数是情有可原的,另外目前尚不清楚到底镜像可以叠加多少层,操作层数之后会有什么样的麻烦? ####技术研...

    domain0

扫码关注云+社区

领取腾讯云代金券