# Live Js Sdk

### 概述

该SDK是用于web端接入POLYV直播服务，包括云课堂和直播助手发起的直播的web端观看，POLYV聊天室服务，兼容PC以及移动端观看。

### DEMO集合

#### 三分屏-横屏 （授课，培训）

· Vue版本： 请前往 [Github](https://github.com/polyv/live-js-sdk-demo-normal) 查看\
· html版本：请前往 [Github](https://github.com/polyv/live-js-sdk-demo-basic) 查看（不推荐）

#### 纯视频-竖屏 （营销，带货）

· Vue：请前往 [Github](https://github.com/polyv/live-js-sdk-demo-portrait) 查看

### 示列代码

· [普通直播](https://git.polyv.net/help-center/document-center/-/blob/master/web-sdk-demo/index.html#live-alone)

### 快速开始

#### 第一步：引入直播SDK

```html
<script src="https://player.polyv.net/livesdk/polyv-live.min.js"></script>
```

#### 第二步：创建初始化ppt与讲师画面元素

```html
<div id="ppt" style="width:500px;height:300px;"></div>
<div id="player" style="width:500px;height:300px;"></div>
```

#### 第三步：创建SDK实例

```javascript
var liveSdk = new PolyvLiveSdk({// 创建sdk实列
  channelId: channelId,// 频道Id
  sign: sign, // 频道验证签名
  timestamp: timestamp, // 毫秒级时间戳
  appId: appId, // polyv 后台的appId
  user: {
    userId: userId, // 用户Id
    userName: 'polyv-test', // 用户昵称
    pic: '//livestatic.videocc.net/assets/wimages/missing_face.png' // 用户头像
  }
});
```

#### 第四步：监听频道信息读取完成事件，初始化播放器

```javascript
// 监听频道信息并初始化播放器
liveSdk.on(PolyvLiveSdk.EVENTS.CHANNEL_DATA_INIT, (event, data) => {
  liveSdk.setupPlayer({// setupPlayer：播放器配置对象
    pptEl: '#ppt',
    el: '#player',
    type: 'auto'
  });
});  
```

### 兼容性说明

* 支持主流现代浏览器chrome、firefox、safari等
* 支持 >= IE9
* 支持移动端
* IE以及低版本chrome(<49)使用flash播放


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://polyv.gitbook.io/document/docs/live/js/live_js_sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.