【新知实验室】腾讯云TRTC接入测试以及状态同步功能重点验证
1、背景介绍
由于文章内容涉及公司业务,关于具体业务部分均使用代称,请知悉。
某学习机,是一款主打学生自主学习的教育产品。老师上传课件、视频资料、练习题等,作为一个独立完整的学习单元。学员首先自主学习,学习结束之后进行测评,通过测评,则进入下一个学习环节,类似游戏中的通关模式。如果不能通过评测或者在学习过程中存在疑问,可以向班主任老师提问,老师可以通过IM消息、语音连麦方式给学习答疑。答疑时间基本都在5~10分钟以内。
项目已上线,整体效果不错,但是仍有学员和老师均有反馈问题,主要包括如下:
- 学生反馈:使用文字和语音方式答疑,对于某些复杂场景,不够直观。
- 老师反馈:连麦过程中,主要多人连麦,有出现过显示学生在线,实际已经退出连麦的情况,服务不稳定。
2、需求匹配
针对老师、学生的反馈,对目前的功能进行了梳理,基本如下:
分功能说明:
IM功能,目前系统已经接入腾讯独立的IM服务。这部分功能稳定,能覆盖大部分场景的要求,不需要调整。
连麦功能,主要问题在1对多连麦,目前音频服务商存在学生已经离线,服务端回调不及时或者不回掉的情况,安卓设备情况比较严重。老师反馈比较多,需要重点解决。
视频答疑功能,是目前需要新增加的功能
1对1视频答疑,带屏幕分享功能,这部分是重点需求功能。
1对多视频答疑,使用比较少,但是有需求,作为补充功能,逐步完善。
无意中看到,CSDN联合腾讯云推出的新知实验室,粗略过了一遍文档,提供的服务能够满足我们目前的需求,同时腾讯本身以IM起家,稳定性应该能保证,最重要的提供比较长的免费的使用时长,对于前期测试很方便很友好。不需要走公司开通服务流程申请,比较麻烦…
3、Demo体验
3.1 开通服务
点击专属链接地址: 注册/开通产品专属链接,进入腾讯云官网,需要微信扫码进入,提示开通腾讯音视频服务,点击【同意】,就可以获取10000分钟的试用时间,这点还是很不错的,再次手动点赞。
3.2 创建应用
按照提示创建应用就可以,很基础的操作。
3.3 下载SDK
因为本次测试,只是一个初步的测试,所以选择了其中最简单的Web SDK
。同时因为目前已经有具体的产品形态,不需要含UI的集成方案
,直接选择无UI集成方案
。
下载源码或者zip压缩包都可以,都能正常使用。这里我们选择ZIP包下载
。
3.4 本地运行
解压文件,发现里面其实有6个文件夹,具体的功能以及说明,帮助文档里面说明的很清楚,这里就不过多赘述了。我们选择世面使用比较多vue2版本进行测试,后续应该会迁移到vue3上面。
[niefajun@Mac webrtc]$ tree -L 1
.
├── README-zh_CN.md
├── README.md
├── SDK
├── base-js
├── base-react-next
├── quick-demo-js
├── quick-demo-vue2-js # 选择vue2版本
└── quick-demo-vue3-ts6 directories, 2 files
因为本地已经有node环境,可以直接运行
使用npm start
运行,没有问题,启动很丝滑
[niefajun@Mac webrtc]$ cd quick-demo-vue2-js
[niefajun@Mac quick-demo-vue2-js]$ npm start> quick-vue2@0.1.0 start
> npm install && npm run serveup to date in 2s> quick-vue2@0.1.0 serve
> vue-cli-service serveINFO Starting development server...DONE Compiled successfully in 4813ms App running at:- Local: http://localhost:8080- Network: http://localhost:8080Note that the development build is not optimized.To create a production build, run npm run build.
执行完以后,会自动在当前系统默认浏览器,打开地址:http://localhost:8080
,显示demo页面,具体页面如下:
第一次打开页面,会有授权摄像头、麦克风权限的提示。需要完成授权页面才能正常运行。
除了授权以外,还需要从腾讯云复制SDKAppID
和SDKSecretKey
,如下图:
将复制出来的SDKAppID
和SDKSecretKey
粘贴到指定的输入框中,demo就可以正常运行。
如果需要在局域网多个设备中测试Demo程序,因为程序默认在本地运行,需要修项目根目录下的配置文件vue.config.js
,具体修改内容:
devServer: {open: true,host: '0.0.0.0',port: 8080,},
将host地址从localhost
调整成0.0.0.0
,允许其他主机访问。
修改配置文件,需要手动停止,并再次运行项目
App running at:- Local: http://localhost:8080 - Network: http://192.168.1.7:8080Note that the development build is not optimized.To create a production build, run npm run build.
可以发现,提示信息中的Network发生了变化:
变更之前:Network: http://localhost:8080
变更之后:Network: http://192.168.1.7:8080
这样局域网里面的其余设备就可以访问了,但是有一个小问题,需要处理一下,因为修改了配置文件,浏览器地址启动以后会变成了0.0.0.0:8080
,本地运行需要调整为localhost:8080
,这样才能正常获取摄像头和麦克风的权限,完成后续功能。
还有一个需要注意的问题:因为程序默认本机启动,分享地址的固定为http://localhost:8080/
。
当只需要本地测试,不需要修改,直接使用。
当需要多个设备进行音视频通话时,需要将分享连接最前面的域名信息调整为:
http://192.168.1.7:8080
(具体地址以各自所在环境IP为准),后面保持不变。这样安卓、苹果等设备就可以在一个局域网里面进行视频以及语音通话。
3.5 整体感受
在本地环境中,测试效果不太好,会出现推流一段时间以后,自己中断的情况,这个时候停止推流,然后重新推流,就会恢复正常。过一会,又会有类似现象,应该是本地环境造成,后面再继续观察。
补充:后续服务器测试过程中,没有出现本地测试过程中出现的问题。大概率是本地环境运行导致。
4、重点功能验证
考虑到目前学习机项目的具体问题,本次测试的重点在于:用户状态同步,即监听服务端时间回调。
无论是老师还是学生,进入、离校room,推流、停止推流都应该通过服务端接口,进行回调,保证界面展示和用户正式状态能够保持一致。
4.1 Demo程序打包发送云服务
因为本次测试后端回调功能,对前端要求不高,之前测试的demo程序还能继续使用,实际生产环境,请勿直接使用demo。
对前端程序进行打包
[niefajun@Mac quick-demo-vue2-js]$ npm run build> quick-vue2@0.1.0 build
> vue-cli-service build
......DONE Build complete. The dist directory is ready to be deployed.INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
当前目录会生成dist
文件夹,打包成压缩包,上传服务器指定目录,然后解压。
4.2 开发简单回调接收程序
这次我们使用Python
语言中Flask
框架作为后端web框架,用于接收腾讯云TRTC服务异步回调。
import base64
import hmac
from hashlib import sha256from flask import Flask, request, jsonifyapp = Flask(__name__)@app.route("/")
def hello_world():return "ok"@app.route("/room_callback", methods=['POST'])
def room_callback():print("--" * 10)print("room_callback")json_data = request.get_json()print(json_data)event_type = json_data.get("EventType", 0)event = json_data.get("EventInfo", {})user_id = event.get("UserId", 0)reason = event.get("Reason", 0)if event_type == 103: # 进入房间print("{}进入房间".format(user_id))elif event_type == 104: # 退出房间print("{}退出房间".format(user_id))# 通用返回return jsonify({"code":0})@app.route("/media_callback", methods=['POST'])
def media_callback():print("--" * 10)print("media_callback")json_data = request.get_json()print(json_data)# 通用返回return jsonify({"code": 0})@app.route("/record_callback")
def record_callback():passdef check_callback_sign(key, body, sign):back = {'code': 1, 'msg': "校验失败"}comp_sign = base64.b64encode(hmac.new(key.encode('utf-8'),body.encode('utf-8'), digestmod=sha256).digest()).decode('utf-8')print(comp_sign)if comp_sign == sign:back.update({'code': 0, 'msg': '校验通过'})return backif __name__ == "__main__":# 仅用于测试app.run(host='0.0.0.0', port='5050', debug=True)
很简单的程序,直接打印回调内容,虽然有校验签名方法,但是实际没有用到。Flask以Debug方式启动,方便看到运行日志。
真实生产环境下,需要在腾讯云后台配置回调密钥,用服务器保存的密钥,对回调请求进行签名验证,只有签名一致,才进行后续操作。
4.3 设置域名解析以及Nginx配置
根据文档中关于URL域名协议限制的描述,如果需要测试屏幕分享
功能,就只能使用https
协议。
注意:以下子域名仅用于测试TRTC功能,后续会删除。
使用个人域名:miebug.net
来进行测试,增加两个子域名:
域名对应SSL证书,是在Let's Encrypt
申请的免费泛域名证书,虽然单次时间很短,但是可以通过脚本无限续费,比云厂商提供的一年免费证书更香。具体参考最下面的参考链接。
Nginx配置示意
server {listen 80;listen 443 ssl;server_name trtcapi.miebug.net;server_tokens off;# https相关设置location / {proxy_pass http://127.0.0.1:5050/;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;proxy_set_header X-Forwarded-Host $host;proxy_set_header X-Forwarded-Prefix /;}
}server {listen 80;listen 443 ssl;server_name trtc.miebug.net;server_tokens off;# https相关设置location / {root /path/to/trtc/trtc_quick_demo_vue2/;index index.html index.htm;}
}
配置文件中的实际路径,以各自服务器为准。
4.4 腾讯云设置回调地址
只有在腾讯云设置了回调地址,才能收到腾讯云的回调。需要房间、媒体、录制的回调,按需配置就可以。注意需要配置回调密钥,并且使用回调密钥,会回调数据,校验签名之后,才进行具体操作,防止伪造数据的恶意请求。
4.5 功能测试
- 进入线上域名:
https://trtc.miebug.net/#/
- 按照之前的步骤,复制
SDKAppID
和SDKSecretKey
- 进入房间,执行相关操作
- 查看线上回调,打印日志,看是否能正常对应。
线上日志打印效果:
回调效果:为突出重点,部分内容简写
操作 | 回调内容 | 说明 |
---|---|---|
老师正常进入room |
room_callback-101-创建room room_callback-103-进入room media_callback-203-开始推送音频数据 media_callback-201-开始推送视频数据 |
老师进入room,首先先创建,然后开始推音频、视频 |
老师异常退出room |
room_callback-104-退出房间 room_callback-102-解散房间 |
老师自身先退出room,然后整个room解散 |
老师开启屏幕分享 |
room_callback-103-share_user_2313635 media_callback-201-开始推送视频数据 |
屏幕分享会产生一个分享用户,先开始进入room,然后只推送视频数据,没有音频数据 |
老师关闭屏幕分享 |
media_callback-202-停止推送视频数据 room_callback-104-share_user_2313635 |
首先停止推送视频数据,然后分享用户退出room |
学生正常进入room |
room_callback-103-进入房间 media_callback-201-开始推送视频数据 media_callback-203-开始推送音频数据 |
学生先进入room,然后首先推视频,音频。这个顺序和老师进入room推送的音视频顺序不一样。 |
学生正常离开room |
media_callback-204-停止推送音频数据 media_callback-202-停止推送视频数据 room_callback-104-退出房间 |
先停止推送音频数据,然后停止推送视频数据,然后学生退出room |
学生异常离开room | room_callback-104-退出房间 | 学生异常退出,需要等待10~20秒的时间,才会收到退出room的通知。因为是异常退出,没有停止推送视频、音频的回调。相比官网提示的时间要长。 |
5、整体总结
云主机https环境下,音视频以及屏幕分享都很流畅,针对目前最关心的服务端状态回调问题进行了重点测试,各种情况都能正常回调通知,达到预期的测试要求。学生异常退出的情况,虽然等待时间稍长,但是多次测试,也都能正常回调。
后续会继续进行多SDK、统一SDK多设备以及room成员多成员情况下的多种操作的测试。后续测试结果会继续分享,希望对大家有所帮助,谢谢!
相关代码都已经上传Gitee,请自行获取,仓库地址: trtc_package_demo: 接入腾讯云实时音视频demo程序
相关链接地址:
- 活动简介页
- 房间与媒体回调文档
- 基于Let’s Encrypt生成免费证书-支持多域名泛域名证书
备注:
更多精彩文章,请访问 灭bug网-消灭bug
【新知实验室】腾讯云TRTC接入测试以及状态同步功能重点验证相关推荐
- 腾讯云TRTC接入测试以及状态同步功能重点验证
1.背景介绍 此项目用于实时视频语音,例如学生与老师进行网课,可以通过视频进行沟通,了解学生动态.老师并且通过视频进行网上授课,更加直观.学生课下自主学习,有问题可及时通过视频语音进行沟通.项目已经上 ...
- 【新知实验室】腾讯云TRTC实时音视频体验
新知实验室 腾讯云TRTC实时音视频体验 在我们的日常生活中,音视频通话.直播及视频会议等诸多音视频场景已经很常见,腾讯发布的 实时音视频(Tencent RTC) 产品,基于腾讯多年来在网络与音视 ...
- 【新知实验室】——腾讯云TRTC实时音视频体验
[新知实验室]--腾讯云TRTC实时音视频体验 前言 一.腾讯实时音视频TRTC是什么? 二.DEMO体验 1.注册腾讯云账号 2.使用实时音视频(需先开通) 3.查看项目(查看密钥和快速上手操作) ...
- 【新知实验室】腾讯云TRTC服务体验
前言 什么是腾讯云TRTC 腾讯云实时音视频(Tencent RTC,简称 TRTC)是一项低延时.高并发.稳定可靠的音视频 PaaS云服务,主要提供多人实时通话以及低延时互动直播能力.TRTC 将腾 ...
- 新知实验室 腾讯云实时音视频产品体验
新知实验室 腾讯云实时音视频TRTC产品体验 接入腾讯云实时音视频 TRTC基本实现逻辑 创建实时音视频应用 获取APPID 下载含UI的集成方案代码 方案中重要代码结构简析 index.vue co ...
- 腾讯云TRTC服务实现小程序语音/视屏会议
腾讯云TRTC服务的入门 TRTC 是腾讯云主打全平台互通的多人音视频通话和低延时互动直播解决方案.TRTC服务有多种客户端的支持,对于IOS.Android.React native等都支持的比较好 ...
- 腾讯云TRTC服务实现Web视频会议
腾讯云TRTC服务实现Web视频会议 背景 近期公司承接了某高校智慧校园的项目建设工作,其中在家校协作的板块中需要进行视频教学,以及线上屏幕共享,为了完成这一需求,我在自研与第三方服务的选择之间选择了 ...
- 腾讯云 TRTC 监控仪表盘实用指南
腾讯云实时音视频(Tencent RTC,简称 TRTC)是一项低延时.高并发.稳定可靠的音视频 PaaS 云服务,主要提供多人实时通话以及低延时互动直播能力.TRTC 将腾讯 21 年来在网络与音视 ...
- 腾讯云TRTC web sdk实践
实时音视频(TRTC) 是腾讯云提供的一套低延时.高质量的音视频通讯服务,致力于为腾讯云客户提供稳定.可靠和低成本的音视频传输能力.您可以使用该服务快速构建"视频通话"." ...
- Android开发-在Android里接入腾讯云推流SDK实现直播推流的功能
前 言 如今,在国内移动互联网发展了几年的时间,移动开发技术也相对的成熟,在咱们日常使用的手机App中也少不了直播的功能,不管是娱乐类.游戏类.体育类还是教育类等的App都会有直播的功能,可以说直播的 ...
最新文章
- 电路设计中电阻电容电感的选择原则
- 公司喜欢什么样的程序员?三个特点吸引HR!
- centos 5.5 mysql 5.5.39_CentOS 5.5 下安装 Mysql 5.5
- php蜘蛛池搭建教程,【小旋风教程】万能蜘蛛池x4安装教程 _ 惠州SEO
- python的setup.py文件及其常用命令
- openssl生成https证书 (转)
- 我做的小学二年级公开课《生命,生态和安全》的教案
- java命令模式返回值_JAVA 设计模式 命令模式
- IOS开发UI篇—导航控制器属性和基本使用
- 如何导出导入自定义的zendstudio配置文件
- 【迅为6818开发板资料】安卓7.1 系统编译手册
- matlab绘制椭球ellipsoid函数
- 工厂方法模式应用场景
- 17个好用免费的ftp软件工具推荐,支持中文
- Android studio通过科大讯飞的SDK实现文字转语音功能
- Java成长第五集--面向对象设计的五大原则
- 果壳格言——偶像的力量近在眼前
- 流量充值解决方案(附代码)
- 小米红米6Pro线刷兼救砖_解账户锁_纯净刷机包_教程
- 周末作业-循环练习题(未完)
热门文章
- JavaWeb项目启动时,自动执行指定方法
- 国风PPT自制卷轴动效,你的PPT也能很“香“
- python类方法重写和重载的区别_python 重载和重写的区别
- python 对两列互补的数据合并
- JS 表单提交信息加密
- element树形Tree组件控制allow-drop拖拽
- 修改macOS中鼠标滚轮方向
- 精益生产管理中如何进行库存成本控制?
- oracle 月增长率,oracle同比增长怎么算,同比增长率怎么算?
- 查看本机计算机id,win7电脑如何用命令查看本机IP地址