本文介紹Web端集成AUI Kits互動直播場景橫屏樣式組件的操作方式、注意事項及相關代碼示例等內容。
前提條件
AppServer
您已經搭建AppServer并獲取了訪問域名，搭建步驟請參見服務端集成。
推流端
目前Web端直播間僅為觀眾端，暫未支持推流，如需體驗完整的功能，需要您接入移動端的AUI Kits套件進行開播推流。接入方式請參見Android橫屏樣式、iOS橫屏樣式。
開發框架
本項目使用UmiJS框架開發，技術棧為React + TypeScript，如需了解更多框架信息，請參見UmiJS官方文檔。
快速集成
環境準備
配置本地Node環境，配置說明請參見UmiJS快速上手。如您本地已經安裝好了Node環境請跳過此步驟。
源碼下載
下載地址請參見開源項目地址。
配置
請在/src/config.ts文件中的config對象配置項目所需參數。
配置Appserver
在config.appServer中配置AppServer所需的參數。
appServer: {
// 配置 APPServer 服務域名，結尾字符請勿是 /，服務端需要開啟可跨域設置
origin: 'https://xxx.xxx.xxx',
}
如果有業務上的定制，可直接修改src/services/base.ts文件中ServicesOrigin、ApiPrefixPath等變量。
配置imServer
在config.imServer中配置IM 服務所需的參數，注意需要前后端統一修改。
imServer: {
// 舊版互動消息服務，后續將逐步下線，不建議開啟使用
// 開啟時，需要通過 script 引入 aliyun-interaction-sdk
aliyunIMV1: {
enable: false, // 是否開啟使用
primary: false, // 是否是主通道
},
// 新版互動消息服務，建議開啟使用
// 開啟時，需要通過 script 引入 alivc-im-sdk
aliyunIMV2: {
enable: true, // 是否開啟使用
primary: true, // 是否是主通道
},
}舊版互動消息服務將逐步下線，建議使用新版alivc-im-sdk。
本地運行
配置完接口域名后，打開終端，進入工程文件夾，執行下方指定，即可在本地運行。
// 安裝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播放器簡介。
alivc-im-sdk
plugin.ts中引入alivc-im-sdk新版互動消息SDK用于直播間互動消息的收發，直播間AppServer所提供的v2/token接口會返回互動SDK認證所需的身份認證等數據，后續將全部切換至新版服務上，建議盡快遷移。
aliyun-interaction-sdk
plugin.ts中引入了aliyun-interaction-sdk舊版互動消息SDK用于直播間互動消息的收發，直播間AppServer所提供的Token接口會返回互動SDK認證所需的Token，更多說明參見Web端集成。
舊版互動消息SDK將逐步下線，若使用了新版互動消息SDK，可以從plugin.ts中刪除該引入。
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 端工程一致，請參考上述的文檔。