安裝與初始化

安裝與初始化

本文檔主要介紹如何快速引入觀看頁 SDK 並建立觀看頁 SDK 核心實例。

前提條件

• 已透過保利威 Saas 影片平台建立帳號，註冊入口。
• 已透過直播管理後台建立直播頻道，建立直播頻道入口。

步驟 1：引入 SDK

觀看頁 SDK 提供 npm、CDN 兩種方式引入，開發者可根據自身需求選擇其中一種方式引入 SDK 到專案中。

方式一：npm（推薦）

安裝 SDK

npm install @polyv/live-watch-sdk --save

引入 SDK

import { createWatchCore } from "@polyv/live-watch-sdk";

方式二：CDN

安裝 SDK

<!-- 通过1.x版本号引入 -->
<script src="https://websdk.videocc.net/live-watch-sdk/{version}/lib/polyv-live-watch.umd.js"></script>
<!-- 通过2.x版本号引入 -->
<script src="https://websdk.videocc.net/live-watch-sdk/{version}/lib/polyv-live-watch-sdk.umd.js"></script>
<!-- 使用最新版本引入 -->
<script src="https://websdk.videocc.net/live-watch-sdk/latest/lib/polyv-live-watch-sdk.umd.js"></script>

引入 SDK

透過 CDN 引入觀看頁 SDK 後，會掛載一個 window 全域物件 PolyvLiveWatchSDK，透過該全域物件取得觀看頁 SDK 暴露的 API。

<script>
  const { createWatchCore } = window.PolyvLiveWatchSDK;
</script>

步驟 2：建立核心實例

透過 createWatchCore 方法建立 观看页核心单一实例(watchCore)，以下簡稱 watchCore。

import { createWatchCore } from "@polyv/live-watch-sdk";

const watchCore = createWatchCore({
  channelId: "xxxxx", // 传入观看页的频道号
});

詳細的呼叫說明可見：觀看頁核心

步驟 3：安裝核心實例

建立 watchCore 後，需要呼叫 setup 方法安裝核心實例。

import { PolyvWatchCoreEvents } from "@polyv/live-watch-sdk";

// 监听 setup 钩子
watchCore.eventEmitter.on(PolyvWatchCoreEvents.WatchCoreSetuped, () => {
  console.info("观看页核心实例安装完成");
});

// 安装核心实例
await watchCore.setup();

詳細的呼叫說明可見：觀看頁核心

需要注意的是，setup 只是用來安裝 watchCore 實例以及內部模組，如果內部模組需要同步依賴保利威其他配套功能 SDK，例如互動和播放器功能，則需要呼叫對應模組的方法來實作安裝功能 SDK，例如安裝互動 SDK watchCore.interactReceive.setupIarCore()、安裝播放器 SDK watchCore.player.setupPlayer()。

其他像連麥、文件等其他模組也有類似的方法，具體請直接參考對應的模組文件，安裝時機一般可以在對應的 UI 元件初始化時才同步執行

此時可以顯示觀看頁的內容，如：引導/授權頁、直播觀看頁，注意進入直播觀看頁需要判斷當前觀眾是否已經過觀看條件授權後才可以顯示，請見步驟四：

步驟 4：授權及連接聊天室

建立 watchCore 以及透過 setup 安裝實例後，判斷觀眾是否進行觀看條件授權：

• 未授權：顯示引導/授權頁進行觀看條件授權。
• 已授權：呼叫 connect 方法連接聊天室後即可顯示直播觀看頁。

示例如下：

// 观众未进行观看条件授权
if (!watchCore.auth.isAuthorized()) {
  // TODO：显示引导/授权页

  // 观众点击观看页入口或执行观看条件授权，如：无条件授权
  const result = await watchCore.auth.verifyNoneAuth();
  if (!result.success) {
    console.error("授权失败了！！", result.failReason);
    return;
  }

  // 当观众执行观看条件授权成功，需要重新安装 watchCore
  await watchCore.setup();
}

// 如果需要互动功能，建议可以先安装互动 SDK，才能保证互动功能够及时显示
// watchCore.interactReceive.setupIarCore()

// 当完成观看条件授权后，即可连接聊天室进入直播观看页
await watchCore.connect();

// TODO：连接成功，显示直播观看页

詳細的呼叫說明可見：觀看頁核心

頁面流程圖

關於觀看頁應用時序圖如下：