Installation and Initialization

This document mainly describes how to quickly import the Watch Page SDK and create a core instance of the Watch Page SDK.

Prerequisites

• An account has been created through the Polyv SaaS video platform. Registration link.
• A live streaming channel has been created through the live streaming management backend. Create live streaming channel link.

Step 1: Import the SDK

The Watch Page SDK can be imported via npm or CDN. Developers can choose either method to import the SDK into their project based on their needs.

Method 1: npm (Recommended)

Install the SDK

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

Import the SDK

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

Method 2: CDN

Install the 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>

Import the SDK

After importing the Watch Page SDK via CDN, it will be mounted as a global window object PolyvLiveWatchSDK. Use this global object to access the APIs exposed by the Watch Page SDK.

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

Step 2: Create a Core Instance

Create 观看页核心单一实例(watchCore) using the createWatchCore method, hereinafter referred to as watchCore.

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

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

For detailed API instructions, see: Watch Page Core

Step 3: Install the Core Instance

After creating watchCore, call the setup method to install the core instance.

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

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

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

For detailed API instructions, see: Watch Page Core

Note that setup is only used to install the watchCore instance and its internal modules. If internal modules need to synchronously depend on other Polyv supporting feature SDKs, such as interaction and player features, you must call the corresponding module's methods to install the feature SDKs. For example, install the interaction SDK watchCore.interactReceive.setupIarCore() and install the player SDK watchCore.player.setupPlayer().

Other modules like co-hosting, documents, etc., have similar methods. Please refer to the corresponding module documentation for details. The installation timing can generally be executed synchronously when the corresponding UI component is initialized.

At this point, the content of the watch page can be displayed, such as the guidance/authorization page and the live streaming watch page. Note that entering the live streaming watch page requires checking whether the viewer has been authorized for viewing conditions before displaying. See Step 4:

Step 4: Authorization and Chat Room Connection

After creating watchCore and installing the instance via setup, determine whether the viewer has been authorized for viewing conditions:

• Not authorized: Display the guidance/authorization page for viewing condition authorization.
• Authorized: Call the connect method to connect to the chat room, then display the live streaming watch page.

Example:

// 观众未进行观看条件授权
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：连接成功，显示直播观看页

For detailed API instructions, see: Watch Page Core

Page Flowchart

The sequence diagram for the watch page application is as follows: