本文基于电商直播开源Demo示例，介绍Web观众端开发的前提条件、环境要求、Demo源码下载和初始化配置等。

前提条件

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

接入说明

电商直播方案通过Web端接入，可有两种接入方式：低代码集成和标准集成。
  • 低代码集成：极少开发量，适用于期望快速上线，默认UI和功能满足诉求的场景。集成方式，请参见Web观众端集成。
  • 标准集成：有一定开发量，对自定义UI和功能有强诉求的场景。标准集成不需要在集成配置中做Web端低代码集成相关配置，并且在选择低代码集成方式后也可以进行标准集成，两者共用同一个appId。我们提供了标准集成的UI源码，以供您快速接入，接入方式请参见下方文档。

环境要求

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

步骤一：下载Demo源码

下载Web端电商直播开源代码。

步骤二：初始化配置

  1. 修改src/constants/config.js，将您低代码音视频工厂控制台中的appId、appKey填入相应位置。
  2. 文件中的origin字段填写的是您自己的服务端地址，用于在src/App.js中获取WebSDK建立长连接Token。
    说明 该操作属于直接向此域名进行请求，在浏览器中会跨域，需要服务端对接口配置跨源资源共享（CORS）。如果服务端不方便配置，您可以参考第三步进行操作。
  3. 如果需要本地开发服务代理跨域，您可以修改根目录webpackDevServer.config.js文件中的proxy配置项，填入您自己的服务端域名。具体操作，请参见Umi配置proxy。
    说明 该方法仅适用于开发环境，线上部署时请使用其他方法解决跨域问题。

步骤三：开发操作

  1. 在命令行工具中进入项目根目录。
  2. 在命令行工具中执行npm install && npm start命令。
  3. 在浏览器中打开http://localhost:3001即可查看页面。
  4. 将您创建的直播ID、用户ID和用户昵称按照Query的方式传入到页面中，例如：http://localhost:3001?liveId=****&userId=****&nick=****。

页面布局介绍

整个直播间页面包含roomInfo（直播间信息模块），interaction（互动模块）。

web端布局