前提條件

AppServer

您已經(jīng)搭建AppServer并獲取了訪問域名，搭建步驟請參見服務(wù)端集成。

主播端

目前Web端直播間僅為觀眾端，暫未支持推流，如需體驗完整的功能，需要您接入移動端的AUI Kits。接入方式請參見Android端豎屏樣式、iOS端橫屏樣式。

開發(fā)框架

本項目使用UmiJS框架開發(fā)，技術(shù)棧為React + TypeScript，如需了解更多框架信息，請參見UmiJS官方文檔。

快速集成

環(huán)境準備

配置本地Node環(huán)境，配置說明請參見UmiJS快速上手。如您本地已經(jīng)安裝好了Node環(huán)境請?zhí)^此步驟。

源碼下載

下載地址請參見開源項目地址。

配置

請在src/config.ts文件中的config對象配置項目所需參數(shù)。

配置Appserver

在config.appServer中配置AppServer所需的參數(shù)。

appServer: {
  // 配置 APPServer 服務(wù)域名，結(jié)尾字符請勿是 /，服務(wù)端需要開啟可跨域設(shè)置
  origin: 'https://xxx.xxx.xxx',
}

配置imServer

在config.imServer中配置IM 服務(wù)所需的參數(shù)，注意需要前后端統(tǒng)一修改。

imServer: {
  // 舊版互動消息服務(wù)，后續(xù)將逐步下線，不建議開啟使用
  // 開啟時，需要通過 script 引入 aliyun-interaction-sdk
  aliyunIMV1: {
    enable: false, // 是否開啟使用
    primary: false, // 是否是主通道
  },
  // 新版互動消息服務(wù)，建議開啟使用
  // 開啟時，需要通過 script 引入 alivc-im-sdk
  aliyunIMV2: {
    enable: true, // 是否開啟使用
    primary: true, // 是否是主通道
  },
}

本地運行

配置完接口域名后，打開終端，進入工程文件夾，執(zhí)行下方指令，即可在本地運行。

// 安裝npm包（安裝速度慢）
npm install
// 若已安裝cnpm 、pnpm、tnpm等工具，請使用選擇以下某個指令安裝
cnpm install
pnpm install
tnpm install

// 安裝完成后，執(zhí)行dev指令，運行成功后根據(jù)提示使用瀏覽器訪問對應(yīng)的地址即可
npm run dev

構(gòu)建配置

// 運行build指令即可構(gòu)建最終產(chǎn)物至./dist目錄下
npm run build

構(gòu)建的文件主要為index.html 、umi.js、umi.css，其余的是按需加載的資源文件。

請根據(jù)您部署生產(chǎn)環(huán)境、加載資源的情況配置.umirc.ts的publicPath 。若您最終訪問的頁面是單獨加載生成的js、css資源的話，無需配置 publicPath。如果是直接使用index.html則請參考下面的例子，根據(jù)您實際情況進行配置。

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

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

export default {
  // 省略其他配置參數(shù)

  // 生成的index.html里使用的umi.js 、umi.css地址的公共路徑的默認值是 /
  // 若index.html部署的地址是http://g.alicdn.com/publicPath/aui-web-liveroom/0.0.1/index.html
  // 若不配置publicPath直接訪問測試、線上環(huán)境index.html，所加載的umi.js將會是 http://g.alicdn.com/umi.js
  // 顯然不是跟index.html目錄下了，所以請根據(jù)您實際情況配置
  // 例子中使用了項目的name 、version在部署目錄中，請根據(jù)您實際情況配置
  publicPath:
  process.env.NODE_ENV === 'production'
  ? `/publicPath/${json.name}/${json.version}/`
  : '/',
}

由您實現(xiàn)

本項目著重直播間模塊的開發(fā)，其余配套的模塊還需要集成方自行完善才能真正對外服務(wù)終端用戶。

登錄

當前項目中的進入直播列表、直播間等頁面時會先校驗是否已登錄，若未登錄會先重定向到登錄頁，該部分邏輯位于src > wrappers > auth > index.tsx中，請根據(jù)您的實際業(yè)務(wù)情況進行修改。

直播列表

項目直播列表頁面代碼位于src > pages > room-list文件夾中，當前邏輯比較簡單，需要您按實際情況自行優(yōu)化。

依賴服務(wù)及第三方包

VConsole

plugin.ts中引入VConsole SDK ，用于在移動端測試，目前默認不會開啟，當URL中包含vconsole=1的參數(shù)時才會開啟。

AliPlayer

plugin.ts中引入AliPlayer SDK，用于在直播間中播放直播流，詳細內(nèi)容請參見Web播放器SDK簡介。

alivc-im-sdk

plugin.ts中引入alivc-im-sdk新版互動消息SDK用于直播間互動消息的收發(fā)，直播間AppServer所提供的v2/token接口會返回互動SDK認證所需的身份認證等數(shù)據(jù)，后續(xù)將全部切換至新版服務(wù)上，建議盡快遷移。

aliyun-interaction-sdk

plugin.ts中引入了aliyun-interaction-sdk舊版互動消息SDK用于直播間互動消息的收發(fā)，直播間AppServer所提供的Token接口會返回互動SDK認證所需的Token，更多說明請參見Web端集成。

axios

開源的HTTP請求npm包，用于調(diào)用直播間AppServer接口，詳細內(nèi)容請參見axios。

uni-app H5 集成

除了上述Web版工程外，AUI Kits還提供了基于 uni-app的工程，支持編譯為H5頁面。

環(huán)境準備

推薦下載使用可視化編輯器HBuilderX進行開發(fā)，參見快速上手文檔配置相關(guān)程序路徑。

源碼下載

下載地址請參見開源項目地址。

配置參數(shù)

使用 HBuilderX 打開開源工程，請在 config.js 中配置所需的參數(shù)，目前支持配置 AppServer 域名

export default {
  // AppServer 域名，注意：結(jié)尾請勿包含/
  appServer: 'https://your-appserver-origin',
};

本地運行

開發(fā)環(huán)境搭建完成并配置好參數(shù)后，點擊工具欄的運行 -> 運行到瀏覽器 -> 選擇瀏覽器，即可體驗。

頁面是豎屏 H5 頁面，因此可以打開瀏覽器控制臺，切換為移動端模式。

發(fā)布

請參考uni-app官方文檔發(fā)布為 Web 網(wǎng)站 。

其它

本項目依賴的服務(wù)及需要由您實現(xiàn)的部分基本上與Web端工程一致，請參考上述文檔。