> For the complete documentation index, see [llms.txt](https://polyv.gitbook.io/document/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://polyv.gitbook.io/document/docs/live/js/new-sdk/live-watch-sdk/articles/product/fast-start.md).

# 安装和初始化

本文档主要介绍如何快速引入观看页 SDK 并创建观看页 SDK 核心实例。

## 前提条件

* 已通过保利威 Saas 视频平台创建账号，[注册入口](https://my.polyv.net/v3/register)。
* 已通过直播管理后台创建直播频道，[创建直播频道入口](https://console.polyv.net/live/index.html#/create-channel)。

## 步骤1：引入 SDK

观看页 SDK 提供 npm、CDN 两种方式引入，开发者可根据自身需求选择其中一种方式引入 SDK 到项目中。

### 方式一：npm(推荐)

**安装 SDK**

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

**引入 SDK**

```js
import { createWatchCore } from '@polyv/live-watch-sdk';
```

### 方式二：CDN

**安装 SDK**

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

**引入 SDK**

通过 CDN 引入观看页 SDK 后，会挂在一个 window 全局对象 `PolyvLiveWatchSDK`，通过该全局对象获取观看页 SDK 暴露的 Api。

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

## 步骤2：创建核心实例

通过 `createWatchCore` 方法创建 `观看页核心单一实例(watchCore)`，以下简称 `watchCore`。

```js
import { createWatchCore } from '@polyv/live-watch-sdk';

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

> 详细的调用说明可见：[观看页核心](https://git.polyv.net/help-center/document-center/-/blob/master/live/js/new_sdk/live_watch_sdk/articles/core/overview/README.md)

## 步骤3：安装核心实例

创建 `watchCore` 后，需要调用 `setup` 方法安装核心实例。

```js
import { PolyvWatchCoreEvents } from '@polyv/live-watch-sdk';

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

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

> 详细的调用说明可见：[观看页核心](https://git.polyv.net/help-center/document-center/-/blob/master/live/js/new_sdk/live_watch_sdk/articles/core/overview/README.md)

需要注意的是，`setup` 只是用来安装 watchCore 实例以及内部模块，如果内部模块需要同步依赖保利威其他配套功能 SDK，比如互动和播放器功能，那还需要调用对应模块的方法来实安装功能 SDK，比如 安装互动 SDK `watchCore.interactReceive.setupIarCore()` 、安装播放器 SDK `watchCore.player.setupPlayer()`。

其他像连麦、文档等其他模块也有类似的方法，具体请直接参考对应的模块文档，安装时机一般可以在对应的 UI 组件初始化时才同步执行

此时可以显示观看页的内容，如：引导/授权页、直播观看页，注意进入直播观看页需要判断当前观众是否已经过观看条件授权后才可以显示，请见步骤四：

## 步骤4：授权及连接聊天室

创建 watchCore 以及通过 `setup` 安装实例后，判断观众是否进行观看条件授权：

* 未授权：显示引导/授权页进行[观看条件授权](https://git.polyv.net/help-center/document-center/-/blob/master/live/js/new_sdk/live_watch_sdk/articles/modules/auth/overview.md)。
* 已授权：调用 `connect` 方法连接聊天室后即可显示直播观看页。

示例如下：

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

> 详细的调用说明可见：[观看页核心](https://git.polyv.net/help-center/document-center/-/blob/master/live/js/new_sdk/live_watch_sdk/articles/core/overview/README.md)

## 页面流程图

关于观看页应用时序图如下：

![](https://git.polyv.net/help-center/document-center/-/blob/master/live/js/new_sdk/live_watch_sdk/assets/uml-time-graph.png)