Skip to content

GitLab

web 直播观看SDK开发指南 · Changes

Page history
Updated web 直播观看SDK开发指南 (markdown) authored by Clark-new's avatar Clark-new
Hide whitespace changes
Inline Side-by-side
Showing with 116 additions and 625 deletions
web-直播观看SDK开发指南.md
View page @ 7d761711
## 直播SDK
### 依赖库 ### 依赖库
直播SDK依赖于jQuery，请自行引入 jQuery 库，版本没有要求。 直播SDK依赖于jQuery，请自行引入 jQuery 库，版本没有要求。
### 阅读对象
本文档为技术文档，需要阅读者：
- 具备基本的html、css、javascript开发能力
- 准备接入CC视频的直播回放SDK相关功能
- 对CC云直播产品使用方法有基础的了解，[使用帮助地址](https://doc.bokecc.com/live/web_sdk.html/)
### 开发环境
- 能够进行前端开发的IDE
###开发配置
**页面引入 jQuery：**
```javascript
<script src="//view.csslcloud.net/js/jquery-1.9.0.min.js" type="text/javascript"></script>
```
**页面引入 SDK：**
```javascript
<script src="//view.csslcloud.net/js/sdk/3.0.0/liveSDK.js" type="text/javascript"</script>
```
### 快速集成 ### 快速集成
```javascript ```javascript
...@@ -34,19 +60,7 @@ ...@@ -34,19 +60,7 @@
</html> </html>
``` ```
### 调用方法 ### 使用方法
**页面引入 jQuery：**
```
<script src="//view.csslcloud.net/js/jquery-1.9.0.min.js" type="text/javascript"></script>
```
**页面引入 JS SDK：**
```
<script src="//view.csslcloud.net/js/sdk/3.0.0/liveSDK.js" type="text/javascript"></script>
```
**视频模块：** **视频模块：**
...@@ -122,363 +136,54 @@ ...@@ -122,363 +136,54 @@
</tr> </tr>
</table> </table>
### 主动调用 API ### 主动调用API
<table width="900px">
<tr style="background:#F60;color:#FFF">
<td>API</td>
<td>说明</td>
</tr>
<tr>
<td>sendPublicChatMsg(msg)</td>
<td>发送公聊，msg:消息内容</td>
</tr>
<tr>
<td>sendPrivateChatMsg(touserid,tousername,msg)</td>
<td>发送私聊，
touserid:接收者的viewerid，tousername:接收者的viewername，msg:消息内容
</td>
</tr>
<tr>
<td>sendQuestionMsg(msg)</td>
<td>发送问题，msg:消息内容</td>
</tr>
<tr>
<td>barrage(msg, color)</td>
<td>发送弹幕，color为十六进制颜色值(0xffffff)，仅支持PC端</td>
</tr>
<tr>
<td>getLine()</td>
<td>获取线路</td>
</tr>
<tr>
<td>changeLine(num)</td>
<td>切换线路，num: getLine返回的值(0,1)</td>
</tr>
<tr>
<td>onlyAudio()</td>
<td>只听音频</td>
</tr>
<tr>
<td>setSound(num)</td>
<td>音量调节，num: 0-1</td>
</tr>
<tr>
<td>answerRollcall(rid, pid)</td>
<td>签到，rid:rollcallId，pid:publisherId</td>
</tr>
<tr>
<td>replyVote(voteid, option, pid)</td>
<td>答题，voteid:voteId，option:答题选项，pid:publisherId</td>
</tr>
<tr>
<td>docBarrage(msg, color)</td>
<td>文档弹幕，color为十六进制颜色值(0xffffff)，仅支持PC端</td>
</tr>
<tr>
<td>openBarrage(true/false)</td>
<td>弹幕开关，仅支持PC端</td>
</tr>
<tr>
<td>showControl(true/false)</td>
<td>控制条显示隐藏</td>
</tr>
<tr>
<td>requestInteraction</td>
<td>请求语音互动</td>
</tr>
<tr>
<td>hangupInteraction</td>
<td>挂断双向视频</td>
</tr>
<tr>
<td>enterInteractionRoom</td>
<td>进入互动房间</td>
</tr>
<tr>
<td>sendInteractionMessage</td>
<td>发送互动信息</td>
</tr>
<tr>
<td>docAdapt(true/false)</td>
<td>文档自适应，默认为false关闭自适应，仅支持PC端</td>
</tr>
<tr>
<td>showMarquee</td>
<td>视频显示跑马灯，仅支持PC端</td>
</tr>
<tr>
<td>showMarqueeDoc</td>
<td>文档显示跑马灯，仅支持PC端</td>
</tr>
<tr>
<td>logout(obj)</td>
<td>退出；obj.success：退出成功回调；obj.error：退出失败回调；</td>
</tr>
<tr>
<td>playerBackgroundImageUri</td>
<td>获取播放器自定义背景图片</td>
</tr>
<tr>
<td>playerBackgroundHint</td>
<td>获取播放器自定义提示语</td>
</tr>
<tr>
<td>liveCountdown</td>
<td>直播倒计时</td>
</tr>
<tr>
<td>getPublishingQuestionnaire</td>
<td>直播中获取问卷</td>
</tr>
<tr>
<td>changeNickname(name)</td>
<td>修改用户昵称，name:昵称，长度小于20</td>
</tr>
<tr>
<td>setDocMode(type)</td>
<td>
切换文档模式，参数 type 值为：<br>
DWLive.DocModeType.NormalMode：切换至跟随模式（默认）<br>
DWLive.DocModeType.FreeMode:切换至自由模式</td>
</tr>
<tr>
<td>getDocs(roomId,userId,callback)</td>
<td>
获取直播间所有文档信息，参数:<br>
roomId:直播间的ID(roomid)<br>
userId:CC账户ID（userid）<br>
callback:获取文档信息后的回调</td>
</tr>
<tr>
<td>changePageTo(docId,pageIndex)</td>
<td>
跳转到指定文档页，参数:<br>
docId:要跳转到文档id<br>
pageIndex:要跳转到指定文档的页码
</td>
</tr>
<tr>
<td>submitQuestionnaire(data,callBack)</td>
<td>
提交问卷，参数：<br>
data:提交问卷的回答信息<br>
callBack:提交成功后的回调
</td>
</tr>
</table>
##### 发送聊天
```javascript
DWLive.sendPublicChatMsg(msg)
//参数msg：string 发送公共聊天内容
```
### 直播响应事件 API ##### 发送私聊
<table width="900px"> ```javascript
<tr style="background:#F60;color:#FFF"> DWLive.sendPrivateChatMsg(touserid,tousername,msg)
<td>API</td> //参数 touserid:接收者的viewerid，tousername:接收者的viewername，msg:消息内容
<td>说明</td> ```
</tr>
<tr>
<td>onLoginSuccess</td>
<td>登录成功</td>
</tr>
<tr>
<td>onLiveStart</td>
<td>开始直播</td>
</tr>
<tr>
<td>onLiveEnd</td>
<td>停止直播</td>
</tr>
<tr>
<td>onUserCountMessage</td>
<td>在线人数</td>
</tr>
<tr>
<td>onPublicChatMessage</td>
<td>收到公聊</td>
</tr>
<tr>
<td> onPublicChatLogManage</td>
<td>收到聊天审核消息</td>
</tr>
<tr>
<td>onPrivateChatMessage</td>
<td>收到私聊</td>
</tr>
<tr>
<td>onPrivateAnswer</td>
<td>收到私聊回复</td>
</tr>
<tr>
<td>onQuestion</td>
<td>收到提问</td>
</tr>
<tr>
<td>onAnswer</td>
<td>收到回答</td>
</tr>
<tr>
<td>onInformation</td>
<td>直播间禁止聊天或问答时，发送消息的回调通知</td>
</tr>
<tr>
<td>onKickOut</td>
<td>踢出</td>
</tr>
<tr>
<td>onAnnouncementShow</td>
<td>开始直播后显示公告</td>
</tr>
<tr>
<td>onAnnouncementRelease</td>
<td>发布和修改公告</td>
</tr>
<tr>
<td>onAnnouncementRemove</td>
<td>删除公告</td>
</tr>
<tr>
<td>onLoginError</td>
<td>登录出现错误时的回调</td>
</tr>
<tr>
<td>onLiveStarting</td>
<td>移动web端直播中的回调</td>
</tr>
<tr>
<td>onStartRollCall</td>
<td>开始签到</td>
</tr>
<tr>
<td>onStartLottery</td>
<td>开始抽奖</td>
</tr>
<tr>
<td>onWinLottery</td>
<td>中奖</td>
</tr>
<tr>
<td>onStopLottery</td>
<td>结束抽奖</td>
</tr>
<tr>
<td>onStartVote</td>
<td>开始答题（voteType:0/1; 0为单选题，1为多选题）</td>
</tr>
<tr>
<td>onStopVote</td>
<td>结束答题</td>
</tr>
<tr>
<td>onVoteResult</td>
<td>答题统计</td>
</tr>
<tr>
<td>window.on_cc_live_interaction_accept</td>
<td>讲师接受互动信息</td>
</tr>
<tr>
<td>window.on_cc_live_interaction_message</td>
<td>互动信息</td>
</tr>
<tr>
<td>window.on_cc_live_interaction_chatusers</td>
<td>已经在聊天的列表信息</td>
</tr>
<tr>
<td>window.on_cc_live_interaction_disconnect</td>
<td>挂断互动信息</td>
</tr>
<tr>
<td>showUserCount</td>
<td>是否显示在线人数（0为不显示，1为显示）</td>
</tr>
<tr>
<td>onLiveDesc</td>
<td>显示简介</td>
</tr>
<tr>
<td>onBroadcastMsg</td>
<td>广播消息回调</td>
</tr>
<tr>
<td>onQaPublish</td>
<td>发布问题</td>
</tr>
<tr>
<td>onRoomSetting</td>
<td>直播间布局配置</td>
</tr>
<tr>
<td>onQuestionnairePublish</td>
<td>发布问卷</td>
</tr>
<tr>
<td>onQuestionnairePublishStop</td>
<td>结束发布问卷</td>
</tr>
<tr>
<td>onQuestionnairePublishStatis</td>
<td>发布问卷统计</td>
</tr>
<tr>
<td>onOnlineTeachers</td>
<td>获取讲师列表</td>
</tr>
<tr>
<td>window.on_cc_swf_loading_completed</td>
<td>flash播放器加载完成</td>
</tr>
<tr>
<td>window._onStart</td>
<td>PC端直播中的回调</td>
</tr>
<tr>
<td>onExternalQuestionnairePublish</td>
<td>第三方问卷调查</td>
</tr>
<tr>
<td>onPageChange</td>
<td>翻页信息回调</td>
</tr>
<tr>
<td>onChangeNickname</td>
<td>修改用户昵称回调</td>
</tr>
<tr>
<td>onLiveTime</td>
<td>获取开始直播时间和直播时间（未开始直播返回 {liveStartTime: "", liveDuration: -1}）</td>
</tr>
<tr>
<td>onSwitchSource</td>
<td>获取当前播放（数据源）场景</td>
</tr>
<tr>
<td>onSwitchVideoDoc(main)</td>
<td>布局切换；main(false: 文档为主; true: 视频为主;)</td>
</tr>
<tr>
<td>onSilenceUserChatMessage(toJson(data))</td>
<td>用户禁言后发送聊天的消息回调; data:禁言时发送信息回调数据</td>
</tr>
<tr>
<td>onSocketConnect()</td>
<td>socket链接成功回调;</td>
</tr>
<tr>
<td>onSocketDisconnect()</td>
<td>socket链接失败回调;</td>
##### 退出直播间
</table> ```javascript
DWLive.logout(obj)
//参数obj:obj.success：退出成功回调；obj.error：退出失败回调；
```
##### 播放线路
```javascript
DWLive.getLine()
//获取播放线路
DWLive.changeLine(num)
//切换线路，num: getLine返回的值(0,1)
```
### 返回值说明 ##### 问答功能
```javascript
DWLive.sendQuestionMsg(msg)
//发送问题，msg:消息内容
``` ```
onLoginSuccess:
### 直播响应事件 API
##### 登录成功回调
```javascript
DWLive.onLoginSuccess = function(data){
console.log(data)
}
参数data:
{ {
template:{ template:{
desc:"视频", //直播间模版描述信息 desc:"视频", //直播间模版描述信息
...@@ -498,8 +203,16 @@ onLoginSuccess: ...@@ -498,8 +203,16 @@ onLoginSuccess:
} }
```
##### 接收公共聊天回调
onPublicChatMessage: //该返回参数有两种类型 ```javascript
DWLive.onPublicChatMessage = function(data){
console.log(data);
}
参数data:
//该返回参数有两种类型
//类型1 ，当该消息被敏感词过滤后，这条消息只会被自己收到，返回的数据参数格式为： //类型1 ，当该消息被敏感词过滤后，这条消息只会被自己收到，返回的数据参数格式为：
{ {
"isFilterChat":1, //该条消息为敏感词，已被过滤 "isFilterChat":1, //该条消息为敏感词，已被过滤
...@@ -526,18 +239,15 @@ onPublicChatMessage: //该返回参数有两种类型 ...@@ -526,18 +239,15 @@ onPublicChatMessage: //该返回参数有两种类型
"time": "10:16:50" // 发送时间 "time": "10:16:50" // 发送时间
} }
```
onPublicChatLogManage: ##### 接收私聊
{
"status": "0", // 聊天消息的状态 0 显示 1 不不显示 ```javascript
"chatIds": [ // 聊天消息的id列表 DWLive.onPrivateChatMessage = function(data){
"11111", console.log(data)
"22222",
"33333"
]
} }
参数data:
onPrivateChatMessage:
{ {
"fromuserid":"7a4715874d504b8db78cb5b77d66b8c8", // 发送者id "fromuserid":"7a4715874d504b8db78cb5b77d66b8c8", // 发送者id
"fromusername":"name", // 发送者名字 "fromusername":"name", // 发送者名字
...@@ -546,19 +256,31 @@ onPrivateChatMessage: ...@@ -546,19 +256,31 @@ onPrivateChatMessage:
"msg":"发反反复复", // 消息内容 "msg":"发反反复复", // 消息内容
"time":"17:22:15" // 发送时间 "time":"17:22:15" // 发送时间
} }
```
onPrivateAnswer: ##### 开始直播
{
"fromuserid":"33ed40d2d7b746919219789733b5bdd4", // 发送者id ```javascript
"fromusername":"第三方士夫", // 发送者名字 DWLive.onLiveStart = function(){
"fromuserrole":"student", // 发送者身份
"touserid":"7a4715874d504b8db78cb5b77d66b8c8", // 接收者id
"tousername":"name", // 接收者名字
"msg":"阿斯蒂芬", // 消息内容
"time":"17:26:24" // 发送时间
} }
```
##### 停止直播
```javascript
DWLive.onLiveEnd = function(){
}
```
onQuestion: ##### 问答功能
```javascript
//接收提问
DWLive.onQuestion = function(data){
console.log(data)
}
参数data:
{ {
"action":"question", // 提问 "action":"question", // 提问
"time":-1, "time":-1,
...@@ -572,8 +294,10 @@ onQuestion: ...@@ -572,8 +294,10 @@ onQuestion:
"id":"1B5BBA4826FFE337" // 问题id "id":"1B5BBA4826FFE337" // 问题id
} }
} }
DWLive.onAnswer = function(data){
onAnswer: console.log(data);
}
参数data:
{ {
"action":"answer", // 回答 "action":"answer", // 回答
"time":-1, "time":-1,
...@@ -590,227 +314,17 @@ onAnswer: ...@@ -590,227 +314,17 @@ onAnswer:
"userRole":"publisher" // 回答者身份 "userRole":"publisher" // 回答者身份
} }
} }
onPageChange:
{
"docId": "xxxx",//当前页id
"docName": "Java.pdf",//当前页name
"docTotalPage": 105,//总页数
"pageNum": 0 //当前页索引值
}
onBroadcastMsg:
{
content: "大家好",//广播内容
time: 205 //广播时间
}
userRole和fromuserrole对应关系表示如下:
unknow: 未知角色;
publisher: 主讲;
teacher: 助教;
host: 主持人;
student: 学员（观众）;
getDocs(roomId,userId,callback)
callback回调成功后返回信息格式如下:
{
"msg": "操作成功", //返回请求结果提示信息
"success": true, //请求是否成功
"datas": {
"docs": [{
"mode": 0,//当前文档模式
"docName": "water_2017111414005847726.jpg", //文档标题
"docId": "B21F4FC05EA64D489C33DC5901307461", //文档id
"docTotalPage": 1, //当前文档总页数
"iconSrc": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/B21F4FC05EA64D489C33DC5901307461/0.jpg",//当前文档的缩略图
"pages": [{
"title": "", //文档页的标题DWLive
"pageIndex": 0, //文档页的索引
"src": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/B21F4FC05EA64D489C33DC5901307461/0.jpg" //文档页的资源路径
}]
}, {
"mode": 0,
"docName": "高等数学（一）——初中知识回顾.pdf",
"docId": "4A82652F23F93D4A9C33DC5901307461",
"docTotalPage": 5,
"iconSrc": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/4A82652F23F93D4A9C33DC5901307461/0.jpg",
"pages": [{
"title": "",
"pageIndex": 0,
"src": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/4A82652F23F93D4A9C33DC5901307461/0.jpg"
}, {
"title": "",
"pageIndex": 1,
"src": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/4A82652F23F93D4A9C33DC5901307461/1.jpg"
}, {
"title": "",
"pageIndex": 2,
"src": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/4A82652F23F93D4A9C33DC5901307461/2.jpg"
}, {
"title": "",
"pageIndex": 3,
"src": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/4A82652F23F93D4A9C33DC5901307461/3.jpg"
}, {
"title": "",
"pageIndex": 4,
"src": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/4A82652F23F93D4A9C33DC5901307461/4.jpg"
}]
}]
}
}
callback请求失败回调如下：
{errorCode:1,msg:'request was aborted'}
submitQuestionnaire(data,callBack)
data 请求参数格式
{
questionnaireId:"0FF0486DAB9938FB",//问卷ID
subjectsAnswer:[
{
selectedOptionId:"A63DA4D314D96DFB", //提交答案的ID（单选题）
subjectId:"45AC816D86E6AAC3" //提交问题的ID
},
{
selectedOptionIds:"98809D2B35693987,5F862A1577662D15",//多个答案的ID（多选题）
subjectId:"68E9B354A52ABF40"
},
{
answerContent:"我是问答题的答案", //问答题答案 (问答题)
subjectId:"F5EF68012BEF40BE"
}
]
}
callBack 回调参数格式如下：
{errorCode:0,success:true,msg:"请求成功"}
onSwitchSource(data)
返回参数data:
{source_type:0}
注：该功能仅限文档直播间使用，主播客户端需使用4.9.0以上版本；
返回值说明：
source_type:0 数据源未知，在直播未开始、非文档直播间或使用低版本客户端直播时会返回；
source_type:10 主播将数据源切换为摄像头模式，摄像头为开启状态；
source_type:11 主播将数据源切换为摄像头模式，摄像头为关闭状态；
source_type:20 主播将数据源切换为图片模式；
source_type:30 主播将数据源切换为插播视频；
source_type:40 主播将数据源切换为区域捕获；
source_type:50 主播将数据源切换为桌面共享；
source_type:60 主播将数据源切换为可自定义场景；
onKickOut
返回参数e:
DWLive.onKickOut = function(e){
console.log(e);
}
e.kick_out_type = 10,在允许重复登录前提下，后进入者会登录会踢出先前登录者.
e.kick_out_type = 20,讲师、助教、主持人通过页面踢出按钮踢出用户.
参数格式：
{"viewerid":"f3793f93a3814bf8937f5dc65521721d","kick_out_type":"10"}
触发条件
1. 讲师/助教/主持人 主动踢出用户，触发该事件
2. 在允许重复登录的前提下，后进入者会自动踢出先前登录者，触发该事件。
``` ```
### 关键代码示例 ##### 显示直播间简介
```
<script type="text/javascript">
$(function(){
// 开始直播
DWLive.onLiveStart = function(j){
console.log(j);
}
// 停止直播 ```javascript
DWLive.onLiveEnd = function(j){ DWLive.onLiveDesc = function(data){
console.log(j); console.log(data)
} }
参数data:
// 在线人数 直播间描述信息
DWLive.onUserCountMessage = function(j){
console.log(j);
}
// 开始直播后显示公告
DWLive.onAnnouncementShow = function (j) {
console.log(j);
};
// 修改公告,发布公告
DWLive.onAnnouncementRelease = function (j) {
console.log(j);
};
// 删除公告
DWLive.onAnnouncementRemove = function (j) {
console.log(j);
};
// 接收公聊
DWLive.onPublicChatMessage = function(j){
console.log(j);
DWLive.barrage(j,'0xff0000'); // 发送弹幕
}
// 接收私聊
DWLive.onPrivateChatMessage = function(j){
console.log(j);
}
// 接收私聊回复
DWLive.onPrivateAnswer = function(j){
console.log(j);
}
// 提问
DWLive.onQuestion = function(j){
console.log(j);
}
// 接收回答
DWLive.onAnswer = function(j){
console.log(j);
}
// 直播间布局配置
DWLive.onRoomSetting = function (data) {
var t = data.layout_video_main;
if (t === 'true') {
Ui.toggleVideo(true);
} else {
Ui.toggleVideo(false);
}
};
// 通知
DWLive.onInformation = function(j){ // 禁言
console.log(j);
}
$(".btnsend").click(function(){
var msg = $(".chatinput").val();
DWLive.sendPublicChatMsg(msg); // 发送公聊
})
$(".qasend").click(function(){
var msg = $(".qainput").val();
DWLive.sendQuestionMsg(msg); // 发送问题
})
$(".setsound").click(function(){
DWLive.setSound(0.5); // 设置音量(0-1)
})
})
</script>
``` ```
### 备注与说明 ### 备注与说明
...@@ -861,29 +375,6 @@ function showEm(str) { ...@@ -861,29 +375,6 @@ function showEm(str) {
在收发消息的时候，用showEm('消息内容')处理一下消息内容即可，原理就是匹配[img_url]和[em2_*]，让它变为对应的图片或者表情图片，匹配[uri _ *]，让它变为可点击的a链接。 在收发消息的时候，用showEm('消息内容')处理一下消息内容即可，原理就是匹配[img_url]和[em2_*]，让它变为对应的图片或者表情图片，匹配[uri _ *]，让它变为可点击的a链接。
### 附录
更多API请参考: DOC目录下文档说明
### 附录2. demo使用方法
```
<!-- 直播视频模块 -->
<div id="livePlayer"></div>
<!-- 直播文档模块 -->
<div id="drawPanel"></div>
// 直播SDK参数配置
DWLive.init({
userid: 'userid',
roomid: 'roomid',
viewername: 'name',
viewertoken: 'password',
viewercustomua: 'android',
language: 'en',
viewercustominfo: '{"exportInfos": [ {"key": "城市", "value": "北京"}, {"key": "姓名", "value": "哈哈"}]}'
});
```
##