实时音视频 Web 监播

概述
本文档主要介绍如何快速跑通 LiveMonitor 监播工程。
﻿
﻿
﻿
﻿
﻿
特色功能
多路直播间同屏监播：支持同时展示8+路直播画面（具体数量可定制）。
低延迟播放：实时拉取直播流，画面延迟≤3秒。
独立音频控制：可单独开启/关闭任意一路直播间的声音，避免干扰。
一键查看详情：点击任意直播间窗口，快速进入详情页，查看主播信息等关键信息。
一键解散违规直播间：在详情页或监播面板直接操作，快速关停违规直播间，提升处置效率。
环境准备
Node.js 版本 18.0+ （推荐使用官方 LTS 版本，npm 版本请与 node 版本匹配）。
现代浏览器，支持 WebRTC APIs。
注意：
参考本文档前，请确保您已开通 TUILiveKit 服务。
下载 Demo
1. 打开终端复制输入示例命令克隆 仓库。
git clone https://github.com/Tencent-RTC/TUIKit_Vue3.git﻿
2. 进入 live-monitor-vue3 工程。
cd TUIKit_Vue3/demos/live-monitor-vue3
启动服务端工程
1. 进入 server 目录。
cd server
2. 安装依赖。
npm install
3. 打开 TUIKit_Vue3/demos/live-monitor-vue3/server/config/index.js 文件，输入您 TUILiveKit 服务的 SDKAppID 和 SDKSecretKey。
const Config = {
  SdkAppId: 0,    // 输入您 TUILiveKit 服务的 SDKAppID
  SecretKey: '',  // 输入您 TUILiveKit 服务的 SDKSecretKey
  Identifier: 'administrator',
  Protocol: 'https://',
  Domain: 'console.tim.qq.com',
  Port: 9000,
};
﻿
module.exports = { Config };
参数
类型
说明
SDKAppID
Number
在 TRTC 控制台 创建的音视频应用的唯一标识。
SDKSecretKey
String
在 TRTC 控制台 创建的音视频应用的 SecretKey。
4. 打开终端执行如下命令启动服务。
npm run start
说明：
此时服务端 API 默认访问地址为：http://localhost:9000/api。
启动前端工程
1. 进入 live-monitor-vue3 目录。
cd TUIKit_Vue3/demos/live-monitor-vue3
2. 安装依赖。
npm install
3. 打开 TUIKit_Vue3/demos/live-monitor-vue3/src/config/index.ts 文件，输入您 TUILiveKit 服务的 SDKAppID 和 SDKSecretKey。
import { getBasicInfo } from './basic-info-config';
﻿
const sdkAppId = 0;         // 输入您 TUILiveKit 服务的 SDKAppID 
const secretKey = '';       // 输入您 TUILiveKit 服务的 SDKSecretKey
const defaultCoverUrl = ''; // 配置您直播封面的默认图片地址
﻿
const createBasicAccount = (userId?: string) => {
  return getBasicInfo(userId || `live_${Math.ceil(Math.random() * 10000000)}`, sdkAppId, secretKey);
};
﻿
export { sdkAppId, secretKey, createBasicAccount, defaultCoverUrl };
4. 打开 TUIKit_Vue3/demos/live-monitor-vue3/src/views/live-monitor.vue 组件，在 init 方法的 baseUrl 中输入您启动服务端工程时的 API 访问地址 http://localhost:9000/api。
<template>
  <div class="live-monitor">
    <Header />
    <LiveList />
    <Pagination class="live-pagination" />
  </div>
</template>
﻿
<script setup lang="ts">
import { useLiveMonitorState } from 'tuikit-atomicx-vue3';
import { createBasicAccount } from '../config';
import Header from '../components/Header.vue';
import LiveList from '../components/LiveList.vue';
import Pagination from '../components/Pagination.vue';
﻿
// createBasicAccount 方法支持自定义 userID 作为参数传入，不传时默认会随机生成账户进入监播系统
const account = createBasicAccount(); 
const { init } = useLiveMonitorState();
﻿
if (account) {
  init({
    baseUrl: '', // 在此处输入 http://localhost:9000/api
    account: {
      sdkAppId: account.sdkAppId,
      userId: account.userId,
      password: account.userSig,
    },
  });
}
</script>
参数
类型
说明
userID
String
用户的唯一标识符，由您定义，只允许包含大小写英文字母(a-z A-Z)、数字(0-9)及下划线和连词符。
userSig
String
一种安全保护签名，用于对用户进行登录鉴权认证，确认用户是否真实，阻止恶意攻击者盗用您的云服务使用权。
userSig 说明：
开发环境：如果您正在本地跑通 Demo、开发调试，可以采用 config 文件中的 createBasicAccount 函数生成 userSig。该方法中 SDKSecretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量。
生产环境：如果您的项目要发布上线，请采用 服务端生成 UserSig 的方式。
如何对接到您的登录系统：
可以参考以下步骤操作：
1. 用户在您的系统登录成功后，可以在后台通过 服务的生成 UserSig 的方式生成与该用户对应的 userId 和 userSig。
2. 用户使用监播服务时，在 init 方法的 account 字段中传入 步骤1 中与该用户对应的 userId 和 userSig。
  account: {
    sdkAppId: 0,     // 您 TUILiveKit 服务的 SDKAppID
    userId: '',   // 该用户在 步骤1 中的 userId
    password: '', // 该用户在 步骤1 中的 userSig
  }
3. 完成以上配置后，监播服务即可正常使用。
5. 在终端输入如下命令启动工程。
npm run dev
6. 点击终端内的高亮链接启动项目。以最新版本的 Vite 构建工具为例，默认访问地址为：http://localhost:5173。
﻿
注意：
由于您本地机器的 5173 端口可能会被其他工程占用，最终的访问地址以终端内高亮链接为准。
功能演示
1. 在列表页可针对违规直播间强制关播。
﻿
2. 点击视频区域进入详情页。
﻿
3. 进入详情页后，您可高效完成以下操作：
快速获取关键信息：通过房间信息标签，实时查看麦上用户详情，快速掌握直播间动态。
精准音频审核：支持单独开启直播间音频，独立审核音频内容是否违规。
一键处理违规连麦直播间：
若当前直播间存在违规行为，可直接在当前详情页一键解散直播间。
若当前直播间无违规，但与之跨房连线的对端直播间存在违规行为，您可直接在当前详情页一键解散对端直播间，无需切换页面，操作更高效。
﻿
生产环境部署
步骤1：部署服务端工程
说明：
本文档以部署到腾讯云函数 为例，server 工程已经包含了部署到云函数所必要的 scf_bootstrap 文件，参照指引您便可将服务正常部署。
1. 本地构建服务端代码。
# 进入 server 工程
cd server
﻿
# 构建产物
npm run build
注意：
构建产物默认存放在 dist 目录。
2. 登录 Serverless 控制台，点击左侧导航栏到函数服务。
3. 在主界面上方单击新建，进入函数创建流程。
4. 选择从头开始来新建函数，并填写函数基础配置。如下图所示： 
﻿
函数类型：选择 “Web 函数”。
函数名称：填写您自己的函数名称。
地域：填写您的函数部署地域。
运行环境：选择 “Node.js 18.15”。
5. 在函数服务中进入您刚刚创建的 Web 函数。
6. 在函数管理页面的函数代码的提交方法中选择本地上传文件夹，将步骤1构建的 dist 目录内的 src 文件夹上传后点击部署。
﻿
7. 等待函数代码加载完毕，检查 src/config/index.js 文件内的 SdkAppId 和 SecretKey 是否填写。
﻿
8. 按如下指引新建终端。
﻿
9. 进入src目录安装依赖。
cd src
﻿
npm install
10. 依赖安装完毕后点击部署。
﻿
11. 部署完成后点击左侧函数 URL，复制内网访问链接（http 或者 https 协议的链接均可）。
﻿
12. 进入接口测试工具（以 ApiFox 为例），在刚刚复制链接的最后加上 /api/test，点击发送后查看响应结果。
﻿
说明：
部署云函数成功后，假设您的函数 URL 访问链接为 https://live-monitor-test.tencentscf.com。
步骤2：部署前端工程
1. 调整 TUIKit_Vue3/demos/live-monitor-vue3/src/views/live-monitor.vue 组件中 init 方法内的 baseUrl 为：https://live-monitor-test.tencentscf.com/api。
2. 构建前端代码。
# 进入 live-monitor-vue3 目录
cd TUIKit_Vue3/demos/live-monitor-vue3
﻿
# 构建项目
npm run build
3. 将 dist 目录的内容部署到您的服务器。
注意：
生产环境要求使用 HTTPS 域名，参见下图：
﻿
其他文档
﻿TUILiveKit 开通服务﻿
﻿TUILiveKit 跑通 Demo﻿
﻿TUILiveKit 快速接入﻿
﻿云函数新手指引﻿
﻿
﻿
参数	类型	说明
SDKAppID	Number	在 TRTC 控制台创建的音视频应用的唯一标识。
SDKSecretKey	String	在 TRTC 控制台创建的音视频应用的 SecretKey。
Web 监播

本页目录：

概述

特色功能

环境准备

下载 Demo

启动服务端工程

启动前端工程

功能演示

生产环境部署

步骤1：部署服务端工程

步骤2：部署前端工程

其他文档
