# 快速开始

## 1.概述

利用WEB SDK可以与CC视频直播系统进行对接，灵活调用直播的视频、文档、聊天、问答等模块，在您的网页中实现自定义样式界面展示回放。

资源下载

下载地址：https://dl.csslcloud.net/live/sdk/web/Live_Web_Play_SDK-3.22.1.zip
        
> 压缩包内包含回放的SDK文件以及相关说明文档、demo
>
> SDK最新版本为 3.22.0

浏览器支持

```
- Chrome  60+
- Firefox  52+
- IE9+  
- Edge 
- Safari  10+
```

### 1.1 功能特性

websdk目前包含播放器、文档功能、聊天功能、问答功能、以及随堂测、广播等互动功能

#### 1.1.1 主要功能描述
<table>
<tr>
<td>功能</td>
<td>描述</td>
</tr>
<tr>
<td>播放器</td>
<td>
支持发送弹幕<br>
支持跑马灯<br>
支持自定义背景图片、提示语<br>
多清晰度切换<br>
截图<br>
支持回放试看<br>
视频缩略图
</td>
</tr>
<tr>
<tr>
<td>聊天</td>
<td>
支持回放聊天信息
</td>
</tr>
<tr>
<td>问答</td>
<td>
支持回放问答信息
</td>
</tr>
<tr>
<td>文档</td>
<td>
支持文档跑马灯
</td>
</tr>
<td>互动</td>
<td>
支持广播<br>
支持随堂测<br>
</td>
</tr>
</table>

## 2.开发准备

由于浏览器的安全策略对除 127.0.0.1 以外的 HTTP 地址作了限制，websdk 仅支持 HTTPS 协议或者 http://localhost（http://127.0.0.1），故websdk的开发环境需做以下准备

### 2.1 开发环境

1.浏览器 : chrome65+浏览器
2.网络协议 : https 或 localhost本机环境
3.账号权限：已经开通获得场景视频（原cc视频）开发者账号

## 3.快速集成

### 3.1 引入回放SDK

#### 3.1.1 引入 jQuery

直播SDK依赖于jQuery，请自行引入 jQuery 库，版本没有要求。

```
<script src="//view.csslcloud.net/js/jquery-1.9.0.min.js" type="text/javascript"></script>
```



#### 3.1.2 引入 JS SDK

```
<script src="//view.csslcloud.net/js/sdk/{version}/playbackSDK.js" type="text/javascript"></script>
```

verison为版本号

###  3.2 创建视频模块模块、文档模块元素

```
<!-- 视频模块 -->
<div id="playbackPlayer"></div>
<!-- 文档模块 -->
<div id="playbackPanel"></div>
```

### 3.3 初始化

```
<script type="text/javascript">
	$.DW.config({
		userId: 'userId',
		roomId: 'roomId',
		recordId: 'recordId',
		groupId : "groupId",    
		viewername: 'name',
		viewertoken: 'password',
		isH5play:true,
		viewercustominfo:'{"exportInfos": [ {"key": "城市", "value": "北京"}, {"key": "姓名", "value": "哈哈"}]}',//可选
		fastMode:true,
		watchStartTime: 5, //可选，回放的起播时间，单位秒
		chatInit: true, // 可选，需要SDK支持聊天相关API，默认为false（管理后台需要开启回放聊天）
		chatAvatar: '', // 可选，回放支持聊天，传入聊天头像
	});
</script>
```

初始化参数说明
<table width="900px">
	<tr style="background:#F60;color:#FFF">
		<td>参数</td>
		<td>说明</td>
	</tr>
	<tr>
		<td>userId</td>
		<td>用户id，不可为空，必选参数</td>
	</tr>
	<tr>
		<td>roomId</td>
		<td>直播间id，不可为空，必选参数</td>
	</tr>
	<tr>
		<td>recordId</td>
		<td>回放id，不可为空为必选（取消不传recordId，传入liveId可播放，如果该参数不存在会抛出异常）</td>
	</tr>
	<tr>
		<td>groupId</td>
		<td>分组id，可为空，可选参数</td>
	</tr>
	<tr>
		<td>viewername</td>
		<td>观看者名字，可为空，接口验证时必填</td>
	</tr>
  <tr>
		<td>viewertoken</td>
		<td>观看密码，可为空，接口验证时必填</td>
	</tr>
  <tr>
		<td>token</td>
		<td>值为完成登录后的DWLive.token, 传入该参数后init不会再调用登录接口</td>
	</tr>
  <tr>
		<td>forcibly</td>
		<td>强制登录，true:强制登录 init一定会调用登录接口，false: 非强制登录，可选参数</td>
	</tr>
	<tr>
		<td>isH5play</td>
		<td>PC端是否启用H5播放器，可选参数，默认true启用h5播放器，false为启用flash播放器（不支持H5的浏览器，该参数无效，默认使用Flash播放器）</td>
	</tr>
  <tr>
    <td>viewercustominfo</td>
    <td>json格式字符串，可选，自定义用户信息，该信息会记录在用户访问记录中，用于统计分析使用（长度不能超过1000个字符，若直播间启用接口验证则该参数无效）</td>
  </tr>
	<tr>
		<td>fastMode</td>
		<td>可选参数，默认为true开启极速文档，为false时则使用flash文档加载</td>
	</tr>
  <tr>
		<td>watchStartTime</td>
		<td>可选参数，回放的起播时间，单位秒</td>
	</tr>
	<tr>
		<td>chatInit</td>
		<td>可选参数，需要SDK支持聊天相关API，默认为false（管理后台需要开启回放聊天）</td>
	</tr>
	<tr>
		<td>chatAvatar</td>
		<td>可选参数，回放支持聊天，传入聊天头像</td>
	</tr>
</table>


### 3.4 时序图

![](images/playback_overview.jpg)


## 4. API查询

[API文档](web_playback_sdk_apis.md)

