Web端接入

前提条件

AppServer

主播端

目前Web端直播间仅为观看端，暂未支持推流，如需体验完整的功能，需要您接入移动端的AUI Kits低代码集成工具。接入方式请参见Android端接入、iOS端接入。

开发框架

本项目使用UmiJS框架开发，技术栈为React + TypeScript，如需了解更多框架信息，请参见UmiJS官方文档。

快速集成

环境准备

配置本地Node环境，配置说明请参见UmiJS快速上手。如您本地已经安装好了Node环境请跳过此步骤。

源码下载

AUI Kits提供Web端集成互动直播-观众端的方案，开源地址请参见开源项目地址。

配置AppServer域名

本项目中的依赖使用了多个AppServer接口，所以需要根据配置的域名生成直播间推流URL和拉流URL。根据不同的部署方式，我们提供了两种接入方案，您可以根据实际业务需求选择。

• 方式一：配置proxy
  若前端页面与AppServer服务部署在同一域名路径下时，只需要本地开发时进行接口代理即可。请打开根目录下的.umirc.ts文件，参考下方示例根据您实际情况配置proxy。

  export default {
    // 省略其他配置参数
    proxy: {
      '/api': {
        'target': '您的接口域名路径',
        'changeOrigin': true,
      },
    },
  }

• 方式2：在代码中写入AppServer服务域名

  若前端页面与AppServer服务部署在不同域名路径下时，无法使用proxy解决。

  此时请参考下方示例修改src > services > base.ts 文件，配置对应的AppServer服务域名。另外，页面、接口在不同环境下时，AppServer服务端需要开启跨域设置。

  说明 当前提供的AppServer服务已开启跨域设置。

  // 配置直播间AppServer服务域名
  export const ServicesOrigin = '您的AppServer服务域名';
  
  // 配置API接口路径前缀，若修改了直播间AppServer接口的路径，请对应修改这里
  export const ApiPrefixPath = '/api/v1/live/';

  如果测试环境与线上环境使用的接口域名不一致时，可以根据当前域名来设置ServicesOrigin。

  export const ServicesOrigin =
    location.hostname === '页面测试域名' ? 'AppServer 测试域名' : 'AppServer 线上域名';

本地运行

配置完接口域名后，打开终端，进入工程文件夹，执行下述命令，即可在本地运行。

// 安装npm包（安装速度慢）
npm install
// 若已安装cnpm 、pnpm、tnpm等工具，请使用选择以下某个指令安装
cnpm install
pnpm install
tnpm install

// 安装完成后，执行dev指令，运行成功后根据提示使用浏览器访问对应的地址即可
npm run dev

构建配置

// 运行build指令即可构建最终产物至./dist目录下
npm run build

构建的文件主要为index.html 、umi.js、umi.css，其余的是按需加载的资源文件。

请根据您部署生产环境、加载资源的情况配置.umirc.ts的publicPath 。若您最终访问的页面是单独加载生成的js、css资源的话，无需配置publicPath。如果是直接使用index.html则请参考下面的例子，根据您实际情况进行配置。

import fs from 'fs';
import path from 'path';

const packagejson = fs.readFileSync(path.resolve('./package.json'));
const json = JSON.parse(packagejson.toString());

export default {
  // 省略其他配置参数

  // 生成的index.html里使用的umi.js 、umi.css地址的公共路径的默认值是 /
  // 若index.html部署的地址是http://g.alicdn.com/publicPath/aui-web-liveroom/0.0.1/index.html
  // 若不配置publicPath直接访问测试、线上环境index.html，所加载的umi.js将会是 http://g.alicdn.com/umi.js
  // 显然不是跟index.html目录下了，所以请根据您实际情况配置
  // 例子中使用了项目的name 、version在部署目录中，请根据您实际情况配置
  publicPath:
    process.env.NODE_ENV === 'production'
      ? `/publicPath/${json.name}/${json.version}/`
      : '/',
}

由您实现

本项目着重直播间模块的开发，其余配套的模块还需要您自行完善才能真正对外服务终端客户。

登录

当前项目中的登录模块为示例代码，直播间AppServer服务提供了以明文发送用户名及密码的login接口来获取身份Token，这部分逻辑仅仅只能作为本地开发、体验使用，切勿在实际生产环境中使用，登录功能实现请自行请接入SSO单点登录、OAuth2等方案。

当前项目中的进入直播列表、直播间等页面时会先校验是否已登录，若未登录会先重定向到登录页，该部分逻辑位于src > wrappers > auth > index.tsx中，请根据您的实际业务情况进行修改。

直播列表

项目直播列表页面代码位于src > pages > room-list文件夹中，当前逻辑比较简单，需要您按实际情况自行优化。

依赖服务及第三方包

VConsole

plugin.ts中引入VConsole SDK ，用于在移动端测试，目前默认不会开启，当URL中包含vconsole=1的参数时才会开启。

AliPlayer

plugin.ts中引入AliPlayer SDK，用于在直播间中播放直播流，详细内容请参见Web播放器简介。

aliyun-interaction-sdk

plugin.ts中引入了aliyun-interaction-sdk用于直播间互动消息的收发，直播间AppServer所提供的Token接口会返回互动SDK认证所需的Token。更多说明，请参见Web端集成。

axios

开源的HTTP请求npm包，用于调用直播间AppServer接口，详细内容请参见axios。