【新知实验室】腾讯云TRTC接入测试以及状态同步功能重点验证

1、背景介绍

由于文章内容涉及公司业务，关于具体业务部分均使用代称，请知悉。

某学习机，是一款主打学生自主学习的教育产品。老师上传课件、视频资料、练习题等，作为一个独立完整的学习单元。学员首先自主学习，学习结束之后进行测评，通过测评，则进入下一个学习环节，类似游戏中的通关模式。如果不能通过评测或者在学习过程中存在疑问，可以向班主任老师提问，老师可以通过IM消息、语音连麦方式给学习答疑。答疑时间基本都在5~10分钟以内。

项目已上线，整体效果不错，但是仍有学员和老师均有反馈问题，主要包括如下：

• 学生反馈：使用文字和语音方式答疑，对于某些复杂场景，不够直观。
• 老师反馈：连麦过程中，主要多人连麦，有出现过显示学生在线，实际已经退出连麦的情况，服务不稳定。

2、需求匹配

针对老师、学生的反馈，对目前的功能进行了梳理，基本如下：

分功能说明：

1. IM功能，目前系统已经接入腾讯独立的IM服务。这部分功能稳定，能覆盖大部分场景的要求，不需要调整。

2. 连麦功能，主要问题在1对多连麦，目前音频服务商存在学生已经离线，服务端回调不及时或者不回掉的情况，安卓设备情况比较严重。老师反馈比较多，需要重点解决。

3. 视频答疑功能，是目前需要新增加的功能

   • 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
1
2
3
4
5
6
7
8
9
10
11
12

因为本地已经有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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

执行完以后，会自动在当前系统默认浏览器，打开地址：http://localhost:8080,显示demo页面，具体页面如下：

第一次打开页面，会有授权摄像头、麦克风权限的提示。需要完成授权页面才能正常运行。

除了授权以外，还需要从腾讯云复制SDKAppID和SDKSecretKey,如下图：

将复制出来的SDKAppID和SDKSecretKey粘贴到指定的输入框中，demo就可以正常运行。

如果需要在局域网多个设备中测试Demo程序，因为程序默认在本地运行，需要修项目根目录下的配置文件vue.config.js,具体修改内容：

  devServer: {
    open: true,
    host: '0.0.0.0',
    port: 8080,
  },
1
2
3
4
5

将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.
1
2
3
4
5
6

可以发现，提示信息中的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
1
2
3
4
5
6
7
8

当前目录会生成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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

很简单的程序，直接打印回调内容，虽然有校验签名方法，但是实际没有用到。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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

配置文件中的实际路径，以各自服务器为准。

4.4 腾讯云设置回调地址

只有在腾讯云设置了回调地址，才能收到腾讯云的回调。需要房间、媒体、录制的回调，按需配置就可以。注意需要配置回调密钥，并且使用回调密钥，会回调数据，校验签名之后，才进行具体操作，防止伪造数据的恶意请求。

4.5 功能测试

• 进入线上域名：https://trtc.miebug.net/#/
• 按照之前的步骤，复制SDKAppID和SDKSecretKey
• 进入房间，执行相关操作
• 查看线上回调，打印日志，看是否能正常对应。

线上日志打印效果：

回调效果：为突出重点，部分内容简写

5、整体总结

云主机https环境下，音视频以及屏幕分享都很流畅，针对目前最关心的服务端状态回调问题进行了重点测试，各种情况都能正常回调通知，达到预期的测试要求。学生异常退出的情况，虽然等待时间稍长，但是多次测试，也都能正常回调。

后续会继续进行多SDK、统一SDK多设备以及room成员多成员情况下的多种操作的测试。后续测试结果会继续分享，希望对大家有所帮助，谢谢！

相关代码都已经上传Gitee，请自行获取，仓库地址： trtc_package_demo: 接入腾讯云实时音视频demo程序

---

相关链接地址：

1. 活动简介页
2. 房间与媒体回调文档
3. 基于Let’s Encrypt生成免费证书-支持多域名泛域名证书

备注：
更多精彩文章，请访问 灭bug网-消灭bug