WEB SDK 开发指南
优质
小牛编辑
136浏览
2023-12-01
版本:3.6.0
日期:2021年01月15日
概述
利用WEB SDK可以与CC视频直播系统进行对接,灵活调用直播和回放的视频、文档、聊天、问答等模块,在您的网页中实现自定义样式界面展示直播和回放。
浏览器支持
- Chrome 60+
- Firefox 52+
- IE9+
- Edge
- Safari 10+
直播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.6.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',//可选
pcH5Live:true,//可选
viewercustominfo: '{"exportInfos": [ {"key": "城市", "value": "北京"}, {"key": "姓名", "value": "哈哈"}]}',//可选
fastMode:true//可选参数,默认为true
});
</script>
参数 | 说明 |
userid | 用户 id,不可为空 |
roomid | 直播间id,不可为空 |
groupid | 分组id,可为空 |
viewername | 用户名称,可为空 |
viewertoken | 需要密码验证方式时,不可为空 |
viewercustomua | 自定义UA参数,配合接口验证使用,可为空 |
pcH5Live | 是否开启h5直播,不支持ie及其内核浏览器 |
language | en,英文版flash播放器,可为空 |
viewercustominfo | json格式字符串,可选,自定义用户信息,该信息会记录在用户访问记录中,用于统计分析使用(长度不能超过1000个字符,若直播间启用接口验证则该参数无效) |
fastMode | 是否开启极速动画模式,默认是开启极速动画模式,默认参数为true |
主动调用 API
API | 说明 |
sendPublicChatMsg(msg) | 发送公聊,msg:消息内容 |
sendPrivateChatMsg(touserid,tousername,msg) | 发送私聊, touserid:接收者的viewerid,tousername:接收者的viewername,msg:消息内容 |
sendQuestionMsg(msg) | 发送问题,msg:消息内容 |
barrage(msg, color) | 发送弹幕,color为十六进制颜色值(0xffffff),仅支持PC端 |
getLine() | 获取线路 |
changeLine(num) | 切换线路,num: getLine返回的值(0,1) |
onlyAudio() | 只听音频 (PC端H5播放器暂不支持) |
setSound(num) | 音量调节,num: 0-1 |
answerRollcall(rid, pid) | 签到,rid:rollcallId,pid:publisherId |
replyVote(voteid, option, pid) | 答题,voteid:voteId,option:答题选项,pid:publisherId |
docBarrage(msg, color) | 文档弹幕,color为十六进制颜色值(0xffffff),仅支持PC端 |
openBarrage(true/false) | 弹幕开关,仅支持PC端 |
showControl(true/false) | 控制条显示隐藏 |
switchFullScreen(true/false) | 直播视频全屏(H5播放器) |
requestInteraction | 请求语音互动 |
hangupInteraction | 挂断双向视频 |
enterInteractionRoom | 进入互动房间 |
sendInteractionMessage | 发送互动信息 |
docAdapt(true/false) | 文档自适应,默认为false关闭自适应,仅支持PC端 |
showMarquee | 视频显示跑马灯,仅支持PC端 |
closeMarquee | 视频关闭跑马灯,仅支持PC端 |
showMarqueeDoc | 文档显示跑马灯,仅支持PC端 |
closeMarqueeDoc | 文档关闭跑马灯,仅支持PC端 |
logout(obj) | 退出;obj.success:退出成功回调;obj.error:退出失败回调; |
playerBackgroundImageUri | 获取播放器自定义背景图片 |
playerBackgroundHint | 获取播放器自定义提示语 |
liveCountdown | 直播倒计时 |
getPublishingQuestionnaire | 直播中获取问卷 |
changeNickname(name) | 修改用户昵称,name:昵称,长度小于20 |
setDocMode(type) | 切换文档模式,参数 type 值为: DWLive.DocModeType.NormalMode:切换至跟随模式(默认) DWLive.DocModeType.FreeMode:切换至自由模式 |
getDocs(roomId,userId,callback) | 获取直播间所有文档信息,参数: roomId:直播间的ID(roomid) userId:CC账户ID(userid) callback:获取文档信息后的回调 |
changePageTo(docId,pageIndex) | 跳转到指定文档页,参数: docId:要跳转到文档id pageIndex:要跳转到指定文档的页码 |
submitQuestionnaire(data,callBack) | 提交问卷,参数: data:提交问卷的回答信息 callBack:提交成功后的回调 |
getPracticeInfomation(pId,callBack) | 获取随堂测信息; 参数: pId:随堂测id(没有则传空字符串) callBack:响应回调 |
submitPracticeInfo(pId,opt,callBack) | 提交随堂测; 参数: pId:随堂测Id opt:选择的选项id(多个选项用空格隔开) callBack:提交后响应回调 |
getPracticeStatisInfo(pId, callBack) | 获取随堂测统计信息 参数: pId:随堂测id callBack:响应回调 |
getPracticeRanking(pId,callBack) | 获取排名数据 参数: pId:随堂测Id callBack:响应回调 |
getHdInquirePunchInformation(callBack) | 获取打卡信息 参数: callBack:响应回调 |
hdCommitPunch(punchId,callBack) | 获取打卡信息 参数: punchId:打卡Id callBack:响应回调 |
clipVideoImage() | 截取视频图像 说明: 该方法会截取视频图像, 并且返回base64的视频图像的内容(目前只支持h5播放器,ie和safari不受支持) |
destroy() | 销毁 说明: 销毁对象意味着之前注册的回调事件监听失效, 再次使用需要重新初始化 |
直播响应事件 API
API | 说明 |
onLoginSuccess | 登录成功 |
on_hd_live_player_type | 当前播放器是h5还是flash播放器 |
onLiveStart | 开始推流直播 |
onLiveEnd | 停止推流直播 |
onUserCountMessage | 在线人数 |
onPublicChatMessage | 收到公聊 |
onPublicChatLogManage | 收到聊天审核消息 |
onPrivateChatMessage | 收到私聊 |
onPrivateAnswer | 收到私聊回复 |
onQuestion | 收到提问 |
onAnswer | 收到回答 |
onInformation | 直播间禁止聊天或问答时,发送消息的回调通知 |
onKickOut | 踢出 |
onAnnouncementShow | 开始直播后显示公告 |
onAnnouncementRelease | 发布和修改公告 |
onAnnouncementRemove | 删除公告 |
onLoginError | 登录出现错误时的回调 |
onLiveStarting | 移动web端直播中的回调 |
onStartRollCall | 开始签到 |
onStartLottery | 开始抽奖 |
onWinLottery | 中奖 |
onStopLottery | 结束抽奖 |
onStartVote | 开始答题(voteType:0/1; 0为单选题,1为多选题) |
onStopVote | 结束答题 |
onVoteResult | 答题统计 |
window.on_cc_live_interaction_accept | 讲师接受互动信息 |
window.on_cc_live_interaction_message | 互动信息 |
window.on_cc_live_interaction_chatusers | 已经在聊天的列表信息 |
window.on_cc_live_interaction_disconnect | 挂断互动信息 |
showUserCount | 是否显示在线人数(0为不显示,1为显示) |
onLiveDesc | 显示简介 |
onBroadcastMsg | 广播消息回调 |
onQaPublish | 发布问题 |
onRoomSetting | 直播间布局配置 |
onQuestionnairePublish | 发布问卷 |
onQuestionnairePublishStop | 结束发布问卷 |
onQuestionnairePublishStatis | 发布问卷统计 |
onOnlineTeachers | 获取讲师列表 |
window.on_cc_swf_loading_completed | PC端直播播放器加载完成 |
window._onStart | PC端直播中的回调 |
onExternalQuestionnairePublish | 第三方问卷调查 |
onPageChange | 翻页信息回调 |
onChangeNickname | 修改用户昵称回调 |
onLiveTime | 获取开始直播时间和直播时间(未开始直播返回 {liveStartTime: "", liveDuration: -1}) |
onSwitchSource | 获取当前播放(数据源)场景 |
onSwitchVideoDoc(main) | 布局切换;main(false: 文档为主; true: 视频为主;) |
onSilenceUserChatMessage(toJson(data)) | 用户禁言后发送聊天的消息回调; data:禁言时发送信息回调数据 |
onPracticePublish(data) | 随堂测发布消息回调; data:发送信息回调数据 |
onPracticePublishStop(data) | 随堂测停止答题消息回调; data:回调数据 |
onPracticeClose(data) | 关闭随堂测; data:回调数据 |
onHdLiveStartPunch(data) | 开启打卡功能; data:回调数据 |
onHdLiveStopPunch(data) | 停止打卡功能; data:回调数据 |
onBanChat(data) | 禁言 |
onUnBanChat(data) | 解除禁言 |
onBanDeleteChat(data) | 禁言并删除聊天记录 |
HDBanChatBroadcastWithData(data) | 用户禁言后群发消息通知; data:回调数据 |
HDUserRemindWithAction(data) | 用户进出直播间消息通知; data:回调数据 |
window.onSocketConnect() | socket链接成功回调; |
window.onSocketDisconnect() | socket链接断开回调; |
返回值参数说明
登录成功
DWLive.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)
}
}
接收公共聊天
DWLive.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" // 发送时间
}
接收聊天审核消息
DWLive.onPublicChatLogManage:
{
"status": "0", // 聊天消息的状态 0 显示 1 不不显示
"chatIds": [ // 聊天消息的id列表
"11111",
"22222",
"33333"
]
}
接收私聊消息
DWLive.onPrivateChatMessage:
{
"fromuserid":"7a4715874d504b8db78cb5b77d66b8c8", // 发送者id
"fromusername":"name", // 发送者名字
"touserid":"33ed40d2d7b746919219789733b5bdd4", // 接收者id
"tousername":"第三方士大夫", // 接收者名字
"msg":"发反反复复", // 消息内容
"time":"17:22:15" // 发送时间
}
接收提问消息
DWLive.onQuestion:
{
"action":"question", // 提问
"time":-1,
"value":
{
"userId":"C783F0F7CB77E1F3", // 提问者id
"userName":"name", // 提问者名字
"content":"123145", // 提问内容
"userAvatar":"img", // 提问者头像
"groupId":"111", //分组信息
"id":"1B5BBA4826FFE337" // 问题id
}
}
接收回答消息
DWLive.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" // 回答者身份
}
}
接收私人回答
DWLive.onPrivateAnswer:
{
"fromuserid":"33ed40d2d7b746919219789733b5bdd4", // 发送者id
"fromusername":"第三方士夫", // 发送者名字
"fromuserrole":"student", // 发送者身份
"touserid":"7a4715874d504b8db78cb5b77d66b8c8", // 接收者id
"tousername":"name", // 接收者名字
"msg":"阿斯蒂芬", // 消息内容
"time":"17:26:24" // 发送时间
}
提交问卷
DWLive.submitQuestionnaire(data,callBack)
data 请求参数格式
{
questionnaireId:"0FF0486DAB9938FB",//问卷ID
subjectsAnswer:[
{
selectedOptionId:"A63DA4D314D96DFB", //提交答案的ID(单选题)
subjectId:"45AC816D86E6AAC3" //提交问题的ID
},
{
selectedOptionIds:"98809D2B35693987,5F862A1577662D15",//多个答案的ID(多选题)
subjectId:"68E9B354A52ABF40"
},
{
answerContent:"我是问答题的答案", //问答题答案 (问答题)
subjectId:"F5EF68012BEF40BE"
}
]
}
获取随堂测
DWLive.getPracticeInfomation(pid,callback)
参数:pid --->随堂测id(没有随堂测则可以不传)
callback ---->回调参数
回调函数返回参数:
无随堂测:
{
datas: {},//返回数据
errorCode: 426,//错误码
msg: "practice not exists,check params",//错误信息
success: false //是否成功
}
有随堂测:
{
datas: {
isExist: 1,
practice:{
id: "F1EE56C62300B088" , //随堂测id
isAnswered: "false" , //是否已经回答
options: [ //选项(选项index和选项id)
{index: 0, id: "9F10F2FF461AD740"},
{index: 1, id: "8F9FA1BE0AC52C5C"},
…
]
publishTime: "2019-11-22 14:08:44", //发布时间
status: 1, //随堂测状态 1 是正在发布 2 结束答题进入统计
type: 1 //随堂测类型 1单选题,2是多选 0 判断题
}
},
errorCode: 0,
msg: "操作成功",
success: true
}
提交随堂测
DWLive.submitPracticeInfo(pId,opt,callback)
参数: pId---->随堂测id
opt----->选项信息
callback---->成功或失败回调
回调函数返回参数:
{
datas: {
practice: {
answerResult: 1 //选项结果 1为正确 0为错误
id: "9F9D0EC468390E22"
isRepeatAnswered: "false", //是否重复回答
options: [
{ index: 0,//索引
id: "2715AA75469DCD54", //选项id
isCorrect: 0, //该选项是否正确 0为错误 1为正确
count: 0, //选择该选项人数
percent: "0%"//选择该选项的比例
},
...
],
submitRecord: [{
optionId: "754251300D86E12B",//选择选项的id
optionIndex: 1 //选择选项的索引
}],
type: 1 //选择题类型
}
errorCode: 0
msg: "操作成功"
success: true
}
打卡功能消息
DWLive.onHdLiveStartPunch:
data:
{
"punchId":"5de0c0d36fd538473af20740",//打卡id
"expireTime":"2019-11-29 14:55:25",//打卡开始时间
"remainDuration":9, //打开持续时长
"tips":"提示语", //没有设置提示语则不返回该字段
}
接收翻页消息
DWLive.onPageChange:
{
"docId": "xxxx",//当前页id
"docName": "Java.pdf",//当前页name
"docTotalPage": 105,//总页数
"pageNum": 0 //当前页索引值
}
接收广播消息
DWLive.onBroadcastMsg:
{
content: "大家好",//广播内容
time: 205 //广播时间
}
callBack 回调参数格式如下:
获取当前直播中所有文档数据
DWLive.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'}
获取直播源
DWLive.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 主播将数据源切换为可自定义场景;
监听是否被踢出
DWLive.onKickOut = function(data){
console.log(data);
}
data.kick_out_type = 10,在允许重复登录前提下,后进入者会登录会踢出先前登录者.
data.kick_out_type = 20,讲师、助教、主持人通过页面踢出按钮踢出用户.
参数格式:
{"viewerid":"f3793f93a3814bf8937f5dc65521721d","kick_out_type":"10"}
触发条件
1. 讲师/助教/主持人 主动踢出用户,触发该事件
2. 在允许重复登录的前提下,后进入者会自动踢出先前登录者,触发该事件。
用户进出直播间消息通知
DWLive.HDUserRemindWithAction:
{
"userId":"2f2645fa08054cd2b9bc110260e43dbe", //用户ID
"userName":"过来我家", //用户昵称
"userRole":"student", //用户角色
"groupId":"123", //分组ID
"clientType":[1,4,2,3], //接收端 1-讲师;2-助教;3-主持人;4-观看端
"prefixContent":"天类鲁鲁饿", //内容前缀
"suffixContent":"妙蛙啊啊啊", //内容后缀
"remindAction": 1 // 1:进 0:出
}
用户禁言群发消息通知
DWLive.HDBanChatBroadcastWithData:
{
"userId":"2f2645fa08054cd2b9bc110260e43dbe", //用户ID
"userName":"过来我家", //用户昵称
"userRole":"student", //用户角色
"groupId":"123", //分组ID
"userAvatar":"123.jpg" //头像
}
其他
userRole和fromuserrole对应关系表示如下:
unknow: 未知角色;
publisher: 主讲;
teacher: 助教;
host: 主持人;
student: 学员(观众);
关键代码示例
<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);
}
// 用户禁言后群发消息
DWLive.HDBanChatBroadcastWithData = function(data) {
console.log("用户禁言后群发消息", data);
};
// 用户进出提示语
DWLive.HDUserRemindWithAction = function(data) {
if (e.remindAction === 1) {
console.log("进入直播间", data);
} else if (e.remindAction === 0) {
console.log("退出直播间", data);
}
};
$(".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, '<');
str = str.replace(/\>/g, '>');
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]
需要发送带链接的a标签时,格式如下:[uri_http://www.xxx.com] (注意:前后都需要加空格)
在收发消息的时候,用showEm('消息内容')处理一下消息内容即可,原理就是匹配[imgurl]和[em2],让它变为对应的图片或者表情图片,匹配[uri _ ],让它变为可点击的a链接。
回放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.6.0/playbackSDK.js" type="text/javascript"></script>
视频模块:
<div id="playbackPlayer"></div>
文档模块:
<div id="playbackPanel"></div>
初始化:
<script type="text/javascript">
$.DW.config({
userId: 'userId',
roomId: 'roomId',
recordId: 'recordId',
groupId : "groupId",
viewername: 'name',
viewertoken: 'password',
isH5play:true,
fastMode:true
});
</script>
参数 | 说明 |
userId | 用户id,不可为空,必选参数 |
roomId | 直播间id,不可为空,必选参数 |
recordId | 回放id,不可为空为必选(取消不传recordId,传入liveId可播放,如果该参数不存在会抛出异常) |
groupId | 分组id,可为空,可选参数 |
viewername | 观看者名字,可为空,接口验证时必填 |
viewertoken | 观看密码,可为空,接口验证时必填 |
isH5play | PC端是否启用H5播放器,可选参数,默认true启用h5播放器,false为启用flash播放器(不支持H5的浏览器,该参数无效,默认使用Flash播放器) |
fastMode | 可选参数,默认为true开启极速文档,为false时则使用flash文档加载 |
回放响应事件 API
API | 说明 |
on_cc_live_chat_msg | 显示全部聊天信息 |
on_cc_live_chat_msg_sync | 同步显示聊天信息 |
on_cc_live_broadcast_msg | 显示全部广播信息 |
on_cc_live_broadcast_msg_sync | 同步显示广播信息 |
on_cc_live_qa_question | 显示提问信息 |
on_cc_live_qa_answer | 显示回答信息 |
on_cc_callback_pages | 返回文档信息对象 |
on_cc_callback_pagechange | 翻页信息回调 |
on_cc_login_error | 登录失败回调 |
on_cc_live_player_load | 播放器加载完成,仅支持pc端 |
on_player_start | 播放开始,仅支持pc端 |
on_spark_player_pause | 播放暂停,仅支持pc端 |
on_spark_player_resume | 恢复播放,仅支持pc端 |
on_spark_player_end | 播放停止,仅支持pc端 |
on_hdReplay_practice_info | 随堂测请求成功后回调 |
返回值说明
on_cc_login_success:
{
template:{
desc:"视频", //模板描述信息
name:"模板一",//模板名称
type:"1" //模板类型 (1:大屏模式 ,2:问答、视频、聊天 ,3:视频、聊天,4:文档、视频。聊天,5:视频、文档、问答、聊天,6:视频、问答
},
viewer:{
id:"ae4dec",// 观看者id
groupId:"1",// 观看者分组id
name:"名称" // 观看者名称
}
}
on_cc_live_chat_msg:
{
"chatId":"23981", //聊天消息id
"status":"1", //聊天消息状态 0:显示 1:不显示
"userid": "7f3a0c7c496a4a2b86d8e51e358193fd",//发送聊天消息的用户ID
"username": "老张",//发送聊天消息的用户名称
"time": 20,//发送时间
"msg": "Hello World.",//聊天内容
"useravatar": "http://www.bokecc.com/static/cms/image/cc-video/navlogo-big.png", //发送者头像
"userRole": "student",//发送者角色,student:学生,teacher:助教,publisher:讲师
"groupId":"111", //分组信息
"usercustommark": "" //用户自定义参数
}
on_cc_live_broadcast_msg:
{
content: "大家好",//广播内容
time: 205 //广播时间
}
on_cc_live_qa_question:
{
"action": "question",
"value": {
"id": "49CE0XF718D5AA52",//问题ID
"content": "我从哪里来?",//问题内容
"userId": "92aa0c1965d842ec9b443270f5734124",//提问者ID
"userName": "T",//提问者名称
"groupId":"111", //分组信息
"userAvatar": "http://www.bokecc.com/static/cms/image/cc-video/navlogo-big.png",//提问者头像
"isPublish": 1//该问题是否已发布,1:已发布,0:未发布",
}
}
on_cc_live_qa_answer:
{
"action": "answer",
"value": {
"questionId": "49CE0XF718D5AA52", //问题ID
"content": "石头里",//回答内容
"isPrivate": 1,//是否是私密回答,1:私密回答,0:公共回答
"userId": "71120e4cc905425f8da91945c7df2df6",//回答者用户ID
"userName": "孙悟空",//回答者名称
"groupId":"111", //分组信息
"userAvatar": "",//回答者头像
"userRole": "回答者角色,teacher:助教,publisher:讲师"//回答者角色
}
}
on_cc_callback_pages:
{
"time": 11, // 图片时间
"url": "http://image.csslcloud.net/image/3CD4C4DF4DF8E0CB9C33DC5901307461/73D088D5AC02E6B1/0.jpg", // 图片地址
"docId": "73D088D5AC02E6B1", // 文档id
"docName": "英语.pptx", // 文档名称
"docNotes": "第一页有多个,这是第一个。"// 文档备注(需PPT中有备注信息,若无则没有该字段)
"docTotalPage": 11, // 文档总页数
"pageNum": 0, // 当前页码
"encryptDocId": "73D088D5AC02E6B1", // 加密id
"useSDK": false
}
on_cc_callback_pagechange:
{
"docId": "xxxx",//当前页id
"docName": "Java.pdf",//当前页name
"docTotalPage": 105,//总页数
"pageNum": 0 //当前页索引值
}
on_hdReplay_practice_info:
{
success:true,//是否成功
msg:"数据获取成功",//消息
errorCode:0,//错误码 0 表示正常
datas:{
practiceInfo:[
{
statistic:{ //统计数据
id:"754251300D86E12B",//统计随堂测id
type:1,//随堂测类型(判断:0,单选:1,多选:2)
status:1,//状态值
answerPersonNum:100,//回答人数
correctPersonNum:10,//回答正确人数
correctRate:"10%",//正确率
options:[
{
index:0,
id:"2715AA75469DCD54",//选项id
isCorrect:1,//是否正确选项(1:是 0:否)
count:5,//此选项选择人数
percent:"5%"//此选项选择人数百分比
}
...
]//选项
},
rank:{//排名
id:"754251300D86E12B",//随堂测id
ranking:[
{
viewerId:"29312",//观看者id
viewerName:"abc",//观看者名称
costTime:"22"//耗时
}
...
]
},
base:{//基础信息
id:"754251300D86E12B",//随堂测id
type:1,//随堂测类型(判断:0,单选:1,多选:2)
status:1,//状态(正在发布:1 已停止:2)
publishTime:"2019-11-22 14:08:44",//发布时间
recordId:"D2BBC2DeA",//回放id
recordTime:20,//相对于回放开始时长
stopRecordTime:30,//相对于回放开始停止时长
closeRecordTime:40,//相对于回放开始关闭时长
options:[//选项
{
index:0,//
id:"2715AA75469DCD54",//选项id
isCorrect:1//是否正确(1:正确0:错误)
}
...
]
}
}
...
]
}
}
userRole和answerUserRole对应关系表示如下:
unknow: 未知角色;
publisher: 主讲;
teacher: 助教;
host: 主持人;
student: 学员(观众);
跳转到指定时间播放
<script type="text/javascript">
$.DW.seek(time); // 跳转到指定时间播放,time单位为秒
</script>
获取当前播放时间
<script type="text/javascript">
$.DW.getPlayerTime(); // 获取当前播放时间
</script>
获取视频总时长
<script type="text/javascript">
window.on_cc_live_player_load = function () { // 播放器加载完毕
console.log($.DW.getDuration()); // 获取视频总时长
};
</script>
文档自适应
$.DW.docAdapt(true); // true为打开自适应,false为关闭,默认为关闭,仅支持PC端
文档跑马灯
var marquee;
$.DW.getMarquee = function(data) {
if (!!data) {
marquee = data;
return;
}
marquee = $("#viewerMarquee").text();
};
window.on_cc_swf_loading_completed = function() { //需要播放器加载完毕再执行
setTimeout(function() {
var marqueeInfo = $.trim(marquee);
$.DW.showMarqueeDoc(marquee);
}, 1000);
};
PC端回放播放器API
API | 说明 |
$.DW.isShowBar(0) | 隐藏视频播放控制条,0为打开,1为隐藏,默认为打开 |
$.DW.switchFullScreen(true/false) | 回放视频全屏(H5播放器) |
$.DW.getBuffer() | 获取buffer |
$.DW.setVolume() | 设置音量,0-1 |
$.DW.getVolume() | 获取音量 |
$.DW.play() | 播放暂停 |
$.DW.setZScale() | 缩放视频画面,number(0-1),仅支持Flash播放器 |
$.DW.getZScale() | 获取视频画面缩放比例,仅支持Flash播放器 |
$.DW.setScale() | 设置视频窗口比例("full", "scale43", "scale169", "original"),仅支持Flash播放器 |
$.DW.getScale() | 获取视频窗口比例,仅支持Flash播放器 |
$.DW.openSettingPanel() | 打开设置面板,仅支持Flash播放器 |
$.DW.playbackRate() | 倍速播放,默认1.0 正常速度,倍速设置范围0.5~2倍速,仅支持H5播放器 |
$.DW.getReplayPractice() | 获取随堂测信息 |
$.DW.destroy() | 销毁 |
$.DW.clipVideoImage() | 截取视频图像 说明: 该方法会截取视频图像, 并且返回base64的视频图像的内容(目前只支持h5播放器) |
主动调用API
API | 说明 |
$.DW.showMarqueeDoc(marquee) | 文档显示跑马灯,仅支持PC端 |
SDK下载
下载地址:https://dl.csslcloud.net/live/sdk/web/Live_Web_Play_SDK-3.6.0.zip
版本更新记录
更新日期 | 版本号 | 更新内容 |
---|---|---|
2021-01-15 | 3.6.0 | 新增直播H5播放器视频全屏方法 新增回放H5播放器视频全屏方法 回放H5播放器支持点播加密增强视频 优化直播H5播放器失去焦点3秒隐藏控制条 修复踢出事件在移动端不生效问题 修复直播H5播放器 Safari 卡顿问题 修复回放sdk 移动端初始化完成后,首次触发play方法无法播放问题 |
2020-11-30 | 3.5.2 | 优化直播H5播放器,修复播放状态异常问题; 优化文档模块加载机制,提高SDK升级兼容性; 修复历史问答无法获取提问用户头像问题; |
2020-11-05 | 3.5.1 | 修复直播、回放文档iframe不在playbackPanel内部问题 |
2020-10-29 | 3.5.0 | PC端直播H5播放器新增以下功能: -支持弹幕功能 -支持跑马灯功能 -支持暖场视频功能 -支持播放器背景图 -支持播放器提示语 -支持播放器倒计时 -支持双击全屏显示 -播放器英文版适配 -播放器相关按钮样式优化 |
2020-09-04 | 3.4.0 | 直播SDK支持自定义打卡提示语 直播SDK新增用户进出直播间消息通知 直播SDK新增用户禁言群发消息通知 |
2020-08-21 | 3.3.0 | 新增PC端回放文档模块显示跑马灯 新增直播支持广播历史记录删除 回放增加获取文档备注字段docNotes 修复回放PC端H5播放器获取buffer不准确问题 修复回放文档iframe不在playbackPanel内部问题 |
2020-04-22 | 3.2.2 | 新增禁言并删除聊天记录方法 直播回放新增课件水印支持 完善SDK使用说明文档 修复H5直播播放器bug |
2020-04-14 | 3.2.1 | 修复回放拖动播放文档偶尔不显示问题; |
2020-02-26 | 3.2.0 | 新增截图功能 直播支持h5播放器 文档优化 |
2019-12-10 | 3.1.0 | 新增随堂测功能 新增打卡功能 新增销毁方法 优化SDK使用文档 |
2019-10-15 | 3.0.0 | 新增版本控制,取消SDK热更新机制 文档默认使用极速模式 回放默认使用H5播放器 回放初始化取消liveId的兼容,必须传入recordId 升级连麦模块,支持新版连麦 优化回放文档画笔数据加载 |
2019-06-25 | 2.9.1 | 新增webpack版demo |
2019-01-21 | 2.9.0 | 新增登录成功回调 支持敏感词过滤 支持聊天审核 支持直播分组 文档极速动画模式兼容docAdapt方法 |
2019-01-09 | 2.8.1 | 直播socket链接状态回调 新增聊天图片解析说明 |
2018-12-11 | 2.8.0 | 直播新增视频、文档为主布局切换回调 新增用户禁言后聊天回调 退出登录增加状态回调 |
2018-11-07 | 2.7.0 | 文档模式新增切换数据源响应事件 新增学员踢出类型 |
2018-10-15 | 2.6.0 | 直播新增问卷提交方法和问卷统计回调 直播新增获取直播间文档方法 直播新增自由翻页模式 |
2018-09-12 | 2.5.0 | 直播和回放文档支持极速动画模式 直播新增onLiveTime回调,返回直播开始时间和直播时长 优化demo |
2018-07-04 | 2.4.1 | 直播新增viewercustominfo参数 回放PC端新增H5播放器及倍速播放 回放demo界面美化 |
2018-06-13 | 2.4.0 | 直播和回放新增翻页信息回调 直播支持观看直播时修改昵称 直播支持广播信息补推(最后一条广播) 回放增加直播中发布的广播信息的回调 |
2018-03-28 | 2.3.1 | 新增直播中获取问卷的方法 |
2018-02-27 | 2.3.0 | 支持第三方问卷 支持直播倒计时 支持文档显示模式 优化低延迟模式下文档视频同步性 回放Flash播放器API增加播放回调事件、面板设置、画面缩放、画面比例 |
2017-11-28 | 2.2.0 | 支持聊天记录补推 增加获取播放器背景图及提示语的方法 支持橡皮擦删除画笔 增加聊天自定义参数支持 回放Flash播放器API增加隐藏控制条、音量控制、播放控制、获取buffer |
2017-10-10 | 2.1.0 | 新增用户退出功能 新增问卷功能 新增广播消息 新增web端布局切换事件 新增聊天获取讲师列表私聊 新增PC端直播中的状态事件 新增获取直播间简介 新增是否显示在线人数 新增跑马灯功能,并支持设置显示在文档还是视频Flash上 直播和回放新增增加自定义ua参数 viewercustomua 直播和回放新增flash播放器加载完成事件 回放登录参数 liveId 修改为recordId |
2017-07-26 | 2.0.0 | 移动端支持画笔显示 PC和移动端支持ppt动画 PC端增加文档自适应窗口方法 移动端回放支持ppt同步翻页 移动端直播增加文档延迟保持和直播同步 回放增加登录失败回调方法 |
2017-06-28 | 1.8.4 | 支持连麦功能 回放支持获取时长 |
2017-01-18 | 1.8.3 | 支持https |
2016-11-22 | 1.8.2 | 新增回放聊天同步显示接口 |
2016-11-18 | 1.8.1 | 新增弹幕开关 新增控制条隐藏 新增文档弹幕 直播聊天和问答返回角色信息 回放聊天和问答返回角色、头像信息 |
2016-11-08 | 1.8.0 | 新增签到 新增抽奖 新增答题卡 新增聊天中超链接发送说明 回放新增获取文档图片信息 回放新增获取当前播放时间 |