您可以在直播管理平台对直播场景进行管理操作，比如创建直播、观看直播、查看在线人数等。本文为您介绍Web端直播管理平台的集成步骤。

背景信息

  • 已经通过控制台创建应用并获取客户端集成需要的信息（appId、appKey、低代码集成服务地址和低代码集成服务密钥）。关于如何创建应用，请参见创建应用。
  • 如果您需要进行自定义UI开发，请先了解集成服务端SDK、Web端标准集成。

直播管理平台功能概述

低代码音视频工厂直播管理平台，提供互动直播全流程Demo，您可以创建、观看和管理直播。针对互动直播、互动课堂、企业直播、电商直播等不同的业务场景，直播管理平台提供了不同的业务流程Demo，并以UI开源的方式交付。

您可以使用服务端OpenAPI和Web端标准集成SDK以及本Demo的开源UI，实现相同的直播业务平台，您也可以使用服务端OpenAPI扩展开发更多功能。

表 1. 功能列表
模块 功能描述
创建直播 创建直播时默认展示以下字段：直播标题、主播昵称、开始时间、直播封面、主播头像、主播简介、直播简介、公告。
使用创建直播接口的Extension字段灵活传递所需要的字段。
直播列表 默认展示以下字段：直播标题、状态、主播昵称、直播ID、UV、PV、在线人数、操作（进入直播间观看和管理直播间）。
推流工具 支持下载Windows、Mac端推流工具，用于主播端开启直播。
主播推流 支持呼起推流工具，开启直播。详细功能请参见PC端推流工具功能。
观看直播 支持跳转播放页、观看直播、消息互动、点赞。
直播管理平台 直播信息展示：
  • 主播信息：主播ID、主播昵称。
  • 直播间信息：创建时间、结束时间。
  • 直播地址：推流地址播放地址（hls、flv、低延迟rts-h5、低延迟rts）。
  • 其他参数。
直播数据展示：直播时长、在线人数、PV、UV。
直播间管理：
  • 开启直播、结束直播。
  • 直播画面监控。
  • 直播消息管理：禁言、踢人。
  • 发布公告。
场景化信息Demo可自定义实现，如报名信息。

在线体验直播管理平台

点我去体验

接入说明

直播管理平台提供的能力包含两个部分：

  • 使用低代码服务端SDK提供的OpenAPI接口，实现直播业务后台管理功能，包括查看直播列表、创建直播、生成低代码样板间链接、PC推流等功能。
  • 使用Web标准集成SDK，实现直播管理平台功能，实现开始直播、查看直播状态、查看聊天等功能。

如果想实现Demo里类似的直播管理能力，您需要集成服务端SDK，并提供接口给业务代码使用，请参见实现服务端功能。

说明 目前Demo中的接口是使用Mock.js生成的示例数据，您可以按照项目中指示的方法替换成您自己的接口。

环境要求

支持node 12.0以上版本的Mac和Windows系统。

步骤一、Demo源码下载

下载直播管理平台。

步骤二、初始化配置

  1. 修改src/constants/config.js，将您低代码音视频工厂控制台中的appId、appKey填入相应位置。
  2. 如果需要本地开发服务代理跨域，您可以修改根目录的vue.config.js文件中的devserver.proxy配置项，填入自己的服务端域名。具体操作，请参见VueCli配置devserver。
    说明 此种方法仅适用于开发环境，线上部署请使用其他方法解决跨域问题，如服务端对接口配置跨源资源共享（CORS）等。

步骤三、开发操作

  1. 在命令行工具中进入项目根目录。
  2. 在命令行工具中执行npm install && npm start。
  3. 在浏览器中打开http://localhost:8000即可查看页面。