Skip to content

GitLab

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

Page history
Updated Live_Web_Play_SDK观看直播 (markdown) authored by Clark-new's avatar Clark-new
Hide whitespace changes
Inline Side-by-side
Showing with 861 additions and 0 deletions
web-直播观看SDK开发指南.md 0 → 100644
View page @ d36acf7b
## 直播SDK
### 依赖库
直播SDK依赖于jQuery，请自行引入 jQuery 库，版本没有要求。
### 调用方法
**页面引入 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>
```
**视频模块：**
```
<div id="livePlayer"></div>
```
**文档模块：**
```
<div id="drawPanel"></div>
```
**初始化：**
```
<script type="text/javascript">
DWLive.init({
userid: 'userid',//必须参数
roomid: 'roomid',//必须参数
groupid: "groupid", //可选
viewername: 'name',//可选
viewertoken: 'password',//如果直播间设置为密码验证，必选
viewercustomua: 'android',//可选
language: 'en',//可选
viewercustominfo: '{"exportInfos": [ {"key": "城市", "value": "北京"}, {"key": "姓名", "value": "哈哈"}]}',//可选
fastMode:true//可选参数，默认为true
});
</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>groupid</td>
<td>分组id，可为空</td>
</tr>
<tr>
<td>viewername</td>
<td>用户名称，可为空</td>
</tr>
<tr>
<td>viewertoken</td>
<td>需要密码验证方式时，不可为空</td>
</tr>
<tr>
<td>viewercustomua</td>
<td>自定义UA参数，配合接口验证使用，可为空</td>
</tr>
<tr>
<td>language</td>
<td>en，英文版flash播放器，可为空</td>
</tr>
<tr>
<td>viewercustominfo</td>
<td>json格式字符串，可选，自定义用户信息，该信息会记录在用户访问记录中，用于统计分析使用（长度不能超过1000个字符，若直播间启用接口验证则该参数无效）
</td>
</tr>
<tr>
<td>fastMode</td>
<td>是否开启极速动画模式，默认是开启极速动画模式，默认参数为true</td>
</tr>
</table>
### 主动调用 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>
### 直播响应事件 API
<table width="900px">
<tr style="background:#F60;color:#FFF">
<td>API</td>
<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>
### 返回值说明
```
onLoginSuccess:
{
template:{
desc:"视频", //直播间模版描述信息
name:"模板一", //直播间模版名称
type:"1" //直播间模板类型 （1:大屏模式 ，2：问答、视频、聊天 ，3：视频、聊天，4：文档、视频。聊天，5：视频、文档、问答、聊天，6：视频、问答
},
viewer:{
id:"ae4dec",// 观看者id
groupId："1",//观看者分组id
name："名称" //观看者名称
},
live:{
liveDuration:1223,//直播持续时长（直播未开始该值为0）
liveStartTime："12:00"//直播开始时间（直播未开始该值为0）
}
}
onPublicChatMessage: //该返回参数有两种类型
//类型1 ，当该消息被敏感词过滤后，这条消息只会被自己收到，返回的数据参数格式为：
{
"isFilterChat":1, //该条消息为敏感词，已被过滤
"userid": "1bbd4c0ca2694cb7acabf1857198463d", // 发送者id
"username": "111", // 发送者名字
"userrole": "student", // 发送者身份
"useravatar": "", // 发送者头像
"usercustommark": "",// 聊天自定义参数
"groupId": "1111", // 分组id
"msg": "321321", // 消息内容
"time": "10:16:50" // 发送时间
}
//类型2，当该条消息为正常消息时，返回的数据参数格式为：
{
"chatId":'23213',//聊天id
"status":"1",//聊天消息状态， 0为显示 1为不显示
"userid": "1bbd4c0ca2694cb7acabf1857198463d", // 发送者idid
"username": "111", // 发送者名字
"userrole": "student", // 发送者身份
"useravatar": "", // 发送者头像
"usercustommark": "",// 聊天自定义参数
"groupId": "1111", // 分组id
"msg": "321321", // 消息内容
"time": "10:16:50" // 发送时间
}
onPublicChatLogManage:
{
"status": "0", // 聊天消息的状态 0 显示 1 不不显示
"chatIds": [ // 聊天消息的id列表
"11111",
"22222",
"33333"
]
}
onPrivateChatMessage:
{
"fromuserid":"7a4715874d504b8db78cb5b77d66b8c8", // 发送者id
"fromusername":"name", // 发送者名字
"touserid":"33ed40d2d7b746919219789733b5bdd4", // 接收者id
"tousername":"第三方士大夫", // 接收者名字
"msg":"发反反复复", // 消息内容
"time":"17:22:15" // 发送时间
}
onPrivateAnswer:
{
"fromuserid":"33ed40d2d7b746919219789733b5bdd4", // 发送者id
"fromusername":"第三方士夫", // 发送者名字
"fromuserrole":"student", // 发送者身份
"touserid":"7a4715874d504b8db78cb5b77d66b8c8", // 接收者id
"tousername":"name", // 接收者名字
"msg":"阿斯蒂芬", // 消息内容
"time":"17:26:24" // 发送时间
}
onQuestion:
{
"action":"question", // 提问
"time":-1,
"value":
{
"userId":"C783F0F7CB77E1F3", // 提问者id
"userName":"name", // 提问者名字
"content":"123145", // 提问内容
"userAvatar":"img", // 提问者头像
"groupId"："111", //分组信息
"id":"1B5BBA4826FFE337" // 问题id
}
}
onAnswer:
{
"action":"answer", // 回答
"time":-1,
"value":
{
"content":"ghghjgug", // 回答内容
"isPrivate":0, // 是否仅提问者可见
"questionId":"1B5BBA4826FFE337", // 问题id
"questionUserId":"C783F0F7CB77E1F3", // 提问者id
"userId":"ebadb3d414c3471786d095c93bab8cb5", // 回答者id
"userName":"www", // 回答者名字
"userAvatar":"img", // 回答者头像
"groupId"："111", //分组信息
"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);
}
// 停止直播
DWLive.onLiveEnd = function(j){
console.log(j);
}
// 在线人数
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>
```
### 备注与说明
响应事件返回的默认都为字符串格式，请自行按需求转化为JSON对象。
### 附录1. 图片、表情、a链接解析处理方法
```
function showEm(str) {
if (!$.trim(str)) {
return '';
}
str = str.replace(/\</g, '&lt;');
str = str.replace(/\>/g, '&gt;');
str = str.replace(/\n/g, '<br/>');
str = str.replace(/\[em_([0-9]*)\]/g, '<img src="//view.csslcloud.net/img/em/$1.gif" border="0" />');
str = str.replace(/\[em2_([0-9]*)\]/g, '<img src="//view.csslcloud.net/img/em2/$1.png" border="0" />');
var nmsg = ''; //解析表情
$.each(str.split(' '), function (i, n) {
n = $.trim(n);
if (n.indexOf('[uri_') == 0 && n.indexOf(']') == n.length - 1 && n.length > 6) {
var u = n.substring(5, n.length - 1) + ' ';
nmsg += '<a target="_blank" style="color: #2f53ff" href="' + u + '">' + u + '</a>' + ' ';
} else {
nmsg += n + ' ';
}
});
var nmsg = ''; //解析图片
var reg = new RegExp(/\[img_http(s)?:\/\/(.*?)\]/g);
var isImage =reg.test(str)
if(isImage){
var sIndex = str.indexOf('_') + 1;
nmsg = str.slice(sIndex,str.length-1);
var imgTag = '<div class="chatImage" style="width: 100%" ><img src="'+nmsg+'" style="width: 100%;cursor:pointer;" onclick="showMsgImage(event)"/></div>';
return imgTag;
}
return nmsg;
}
```
需要发送图片或者表情时，格式如下：`[img_http://www.xxx.com]`或者 `[uri_http://www.xxx.com] ` （注意：前后都需要加空格）
在收发消息的时候，用showEm('消息内容')处理一下消息内容即可，原理就是匹配[img_url]和[em2_*]，让它变为对应的图片或者表情图片，匹配[uri _ *]，让它变为可点击的a链接。
### 附录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": "哈哈"}]}'
});
```
##