> 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/live_js_sdk.md).

# 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播放