本文基于企业直播开源demo示例,介绍Web观众端开发的前提条件、环境要求、Demo源码下载和初始化配置等。
前提条件
接入说明
企业直播方案通过Web端接入,可有两种接入方式:低代码集成和标准集成。
- 低代码集成:极少开发量,适用于期望快速上线,默认UI和功能满足诉求的场景。集成方式,请参见Web观众端集成。
- 标准集成:有一定开发量,对自定义UI和功能有强诉求的场景。标准集成不需要在集成配置中做Web端低代码集成相关配置,并且在选择低代码集成方式后也可以进行标准集成,两者共用同一个appId。我们提供了标准集成的UI源码,以供您快速接入,接入方式请参见下方文档。
环境要求
支持node 12.0以上版本的Mac和Windows系统。
步骤一:下载Demo源码
下载Web端企业直播开源代码。
步骤二:初始化配置
步骤三:开发操作
- 在命令行工具中进入项目根目录。
- 在命令行工具中执行
yarn && yarn start
命令。 - 在浏览器中打开
http://localhost:8000
即可查看页面。 - 将您创建的直播ID、用户ID和用户昵称按照Query的方式传入到页面中,例如:
http://localhost:8000?liveId=****&userId=****&nick=****
。
项目介绍
Web端企业直播Demo分为移动端UI和PC端UI,通过对UI判断实现在手机浏览器和Web浏览器中使用相应端的UI。开发时,也可以通过Chrome浏览器开发者工具的Device Toolbar查看移动端UI。
两端UI的业务逻辑在页面src/pages/room/index.tsx中复用。
移动端UI
移动端UI引入了AntDesign Mobile,源码在src/components/mobile/index.tsx中。
PC端UI
PC端UI引入了AntDesign,源码在src/components/pc/index.tsx中。