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-ts
6 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 serve
up to date in 2s
> quick-vue2@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
DONE Compiled successfully in 4813ms
App running at:
- Local: http://localhost:8080
- Network: http://localhost:8080
Note 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:8080
Note 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 sha256
from flask import Flask, request, jsonify
app = 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():
pass
def 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 back
if __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程序
相关链接地址:
备注:
更多精彩文章,请访问 灭bug网-消灭bug