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

背景信息

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

直播管理平台功能概述

低代码音视频工厂直播管理平台,提供互动直播全流程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,将您低代码音视频工厂控制台中的appIdappKey填入相应位置。
  2. 如果需要本地开发服务代理跨域,您可以修改根目录的vue.config.js文件中的devserver.proxy配置项,填入自己的服务端域名。具体操作,请参见VueCli配置devserver
    说明 此种方法仅适用于开发环境,线上部署请使用其他方法解决跨域问题,如服务端对接口配置跨源资源共享(CORS)等。

步骤三、开发操作

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