竖屏样式

前提条件

AppServer

您已经搭建AppServer并获取了访问域名。搭建步骤，请参见服务端集成。

主播端

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

开发框架

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

快速集成

环境准备

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

源码下载

下载地址请参见开源项目地址。

配置AppServer域名

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

方式1：配置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。

uni-app H5 集成

除了上述 Web 版工程外，AUI Kits 还提供了基于 uni-app 的工程，支持编译为 H5 页面。

环境准备

推荐下载使用可视化编辑器 HBuilderX 进行开发，参见 快速上手文档 配置相关程序路径。

源码下载

下载地址请参见开源项目地址。

配置参数

使用 HBuilderX 打开开源工程，请在 config.js 中配置所需的参数，目前支持配置 AppServer 域名

export default {
 // AppServer 域名，注意：结尾请勿包含 / 
 appServer: 'https://your-appserver-origin',
};

本地运行

开发环境搭建完成并配置好参数后，击工具栏的运行 -> 运行到浏览器 -> 选择浏览器，即可体验。

页面是竖屏 H5 页面，因此可以打开浏览器控制台，切换为移动端模式。

发布

请参考 uni-app 官方文档 发布为 Web 网站 。

其它

本项目依赖的服务及需要由您实现的部分基本上与 Web 端工程一致，请参考上述的文档。