WEB SDK开发指南
版本:3.8.3
日期:2022年5月17日
概述
利用WEB SDK可以与CC视频直播系统进行对接,灵活调用直播和回放的视频、文档、聊天、问答等模块,在您的网页中实现自定义样式界面展示直播和回放。
浏览器支持
- Chrome 60+
- Firefox 52+
- IE9+
- Edge
- Safari 10+
直播SDK
依赖库
直播SDK依赖于jQuery,请自行引入 jQuery 库,建议使用1.9.X版本。
调用方法
页面引入 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.8.3/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 | 视频显示跑马灯 |
closeMarquee | 视频关闭跑马灯 |
showMarqueeDoc | 文档显示跑马灯 |
closeMarqueeDoc | 文档关闭跑马灯 |
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() | 销毁 说明: 销毁对象意味着之前注册的回调事件监听失效, 再次使用需要重新初始化 |
getQualityIndex() | 获取当前清晰度 |
changeQuality(qualityIndex, callback) | 切换清晰度 说明:qualityIndex为清晰度码,和清晰度回调里拿到的保持一致 |
commitLottery(commitInfos, callback) | 提交抽奖信息 |
getLikeCount() | 获取点赞数 |
addLikeCount(data) | 点赞 参数说明:{ count: 1, //number 必须,点赞数 success: () => { // 点赞成功回调 }, fail: () => { // 点赞失败回调 } } |
disconnectLike() | 断开点赞服务消息监听 |
getRewardList(data) | 获取礼物列表 参数说明:{pageNo: 1, pageSize: 99}(默认参数) // 非必填 pageNo: 页码, pageSize: 每页的礼物数 |
getRewardHistoryRecord() | 获取送礼物历史记录 |
getRewardSpecialEffects() | 获取礼物动效配置 |
sendGift(data) | 送礼物 参数说明:{ data: { giftId: 2, // 礼物ID giftNum: 1, // 送礼物数量 giftType: 1 // 礼物类型 默认1 } success: () => { // 点赞成功回调 }, fail: () => { // 点赞失败回调 } } |
disconnectLike() | 断开礼物服务消息监听 |
直播响应事件 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链接断开回调; |
onHDReceivedVideoQuality | 清晰度回调; |
onLottery | 抽奖回调监听; |
window.cc_player_stream_disconnect | 异常断流回调通知; |
window.cc_player_stream_waiting | 视频卡顿监听; |
onLiveInteractionNetwordQuality | 连麦质量监听; |
onLiveInteractionException | 连麦频道内异常事件监听 |
onInteractiveAuthFailed(error) | 互动组件服务认证失败 |
window.on_cc_like_ready | 完成点赞组件初始化 |
window.on_cc_like_error(error) | 点赞组件初始化失败 |
receiveLikeInfo(data) | 接收点赞推送消息 |
window.on_get_like_count_info(data) | 获取点赞数回调 |
window.on_cc_gift_ready | 完成礼物组件初始化 |
window.on_cc_gift_error(error) | 礼物组件初始化失败 |
receiveRewardInfo(data) | 接收礼物推送消息 |
window.on_get_reward_list(data) | 获取礼物列表回调 |
window.on_get_reward_history_record(data) | 获取礼物历史记录列表回调 |
window.on_get_reward_special_effects(data) | 获取礼物动效配置回调 |
window.on_cc_live_pagechange_complete(data) | 直播中静态文档翻页成功回调 |
window.on_cc_live_pagechange_error(data) | 直播中静态文档翻页失败回调 |
返回值参数说明
登录成功
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" //头像
}
清晰度
// 清晰度回调
onHDReceivedVideoQuality
// 示例
DWLive.onHDReceivedVideoQuality = function (data) {
console.log(data)
}
data: [
{
quality: 0, //number
desc: '原画' //string
}
]
/*
*@ 获取当前清晰度
*@ return 0
*/
getQualityIndex()
// 示例
DWLiev.getQualityIndex()
/*
*@ 切换清晰度
*@ params quality 0; callback
*/
changeQuality(quality, callback)
// 示例
DWLiev.changeQuality(0, function (resp) {
console.log(resp)
})
抽奖
/**
* 收到抽奖
* @param lotteryAction 抽奖的一些信息
*/
onLottery
LotteryAction {
//抽奖订单ID
lotteryId: String
//抽奖订单状态 0抽奖创建成功, 1抽奖取消成功, 2抽奖已完成, 3抽奖异常结束
lotteryStatus: int
//抽奖订单类型 0普通抽奖类型(暂无别的抽奖类型)
lotteryType: int
//是否存在抽奖 注意当该字段为false的时候 无其他字段
haveLottery: boolean
//中奖信息
LotteryWinInfo: {
//中奖人需要提交的信息
collectTemplate: [
{
//索引 提交抽奖的时候用到
index: int
//标题
title: String
//提示语
tips: String
}
];
//是否中奖 true中奖 false未中奖
isWinner: boolean
//自己的信息
LotteryOwnUserInfo: {
userAvatar: 'xxxx' String
//名称
priuserNamevate: 'xxxx' String
//用户id
userId: 'xxxx' String
//中奖码
prizeCode: 'xxxx' String
};
//中奖人名单信息
userInfos: array [
{
//头像
userAvatar: 'xxx' String
//用户名
userName:'xxxx' String
//用户id
userId: 'xxxx' String
}
];
//奖品信息
LotteryPrize: {
name: 'xxxx' string
};
};
}
// 示例
DWLive.onLottery = function (data) {
if (data.haveLottery) { // 有抽奖
lotteryId = data.lotteryId
if (data.lotteryStatus === 0) { // 抽奖ing
} else if (data.lotteryStatus === 1) { // 取消抽奖
} else if (data.lotteryStatus === 2) { // 抽奖结束
if (data.LotteryWinInfo.isWinner) { // 中奖
} else { // 未中奖
}
} else if (data.lotteryStatus === 3) { // 抽奖异常结束
}
} else { // 没有抽奖,隐藏抽奖相关
}
}
/**
* @param commitInfos 提交抽奖信息
* @param callback 抽奖回调
*/
commitLottery
// 参数说明
commitInfos: {
lotteryId: '' // 抽奖id
collectInfos: [
{
//收到中奖信息中对应的 LotteryCollectTemplate.index
index:int ;
//用户填写的信息
value: String ;
}
]
}
// 示例
DWLive.commitLottery(commitInfos, {
onSuccess: function (reuslt) {
console.log('commitLottery:: reuslt', reuslt)
},
onError: function (err) {
console.log('commitLottery:: err', err)
}
})
连麦质量监听
DWLive.onLiveInteractionNetworkQuality = function(networkData) {
// 返回值networkData说明
{
'downlinkNetworkQuality': 1, // 下行网络质量(0:未知; 1-2:优; 3:良; 4:中; 5:差; 6:极差)
'uplinkNetworkQuality': 2, // 上行网络质量(0:未知; 1-2:优; 3:良; 4:中; 5:差; 6:极差)
'rtt': 18, // SDK到服务器的往返时间,单位 ms。
'vfps': 15, // 视频帧率 (Firefox 上无法获取该值)
'vbps': 320, // 视频码率
'abps': 320, // 音频码率
'vpktLossRate': 0.02, // 发送的视频 400ms 内的丢包率 (0-1)
'apktLossRate': 0.02, // 发送的音频 400ms 内的丢包率 (0-1)
}
};
连麦频道内异常事件监听
DWLive.onLiveInteractionException = function(evt) {
// 返回值evt说明:解码失败时的evt
{
'code': 1005,
'msg': '接收视频解码失败',
'uid': '88888'
}
// 返回值evt说明:解码恢复正常时的evt
{
'code': 3005,
'msg': '接收视频解码恢复正常',
'uid': '88888'
}
};
接收点赞推送消息
DWLive.receiveLikeInfo = function(data) {
console.log(data) // count 最新点赞总数
}
获取最新点赞数量回调
window.on_get_like_count_info = function (data) {
// 返回值data说明
{
status: 200, // 状态码
statusText: '', // 接口状态描述信息
data: { // 数据主体
activityId: string, // 点赞活动ID
basicNumbers: number, // 基础点赞数
basicTimes: number, // 基础倍数, 大于等于1
currentNumbers: number, // 当前点赞总数, 大于等于0
roomId: string // 房间ID
}
}
}
接收礼物推送消息
DWLive.receiveRewardInfo = function(data) {
// 打赏礼物信息
data: {
fromUser:'学员1', // 用户昵称
name: '钻石', // 礼物名称
img: 'http://img.png', // 礼物图片
num: 10, // 打赏数量
msgId: 'id' // 推送消息ID,唯一值
}
}
获取礼物列表回调
window.on_get_reward_list = function (data) {
// 返回值data说明
{
status: 200, // 状态码
statusText: '', // 接口状态描述信息
data: { // 数据主体
data: [
{
createTime: string, // 创建时间
giftDefault: number, // 礼物默认类型
giftName: string, // 礼物名称
giftStatus: number, // 礼物状态
giftThumbnail: string, // 礼物图片
id: number, // 礼物ID
price number, // 礼物价格(单位分)
updateTime: string // 更新时间
}
],
pagination: {
pageNo: number, // 当前页码
pageSize: number, // 每页长度
total: number // 列表长度最大值
}
}
}
}
获取礼物历史记录列表回调
window.on_get_reward_history_record = function (data) {
// 返回值data说明 (最多返回100条)
{
status: 200, // 状态码
statusText: '', // 接口状态描述信息
data: { // 数据主体
data: [
{
avatar: string, // 打赏人头像
fromUser: number, // 打赏人昵称
fromUserId: string, // 打赏人ID
img: number, // 礼物图片
name: string, // 礼物名称
num: number // 打赏礼物个数
}
]
}
}
}
获取打赏动效配置
window.on_get_reward_special_effects = function (data) {
// 返回值data说明
{
status: 200, // 状态码
statusText: '', // 接口状态描述信息
data: { // 数据主体
specialEffects: number // 打赏动效类型(1左侧显示 2居中显示)
}
}
}
直播中静态文档翻页成功回调
window.on_cc_live_pagechange_complete = function(data) {
// 返回值data说明
{
userId: '565f35bd8d534469992c09e66c9d7c12', // 用户ID
userName: 'test', // 用户昵称
docMsg: {
completeURI: 'http://image.csslcloud.net/image/0.jpg', // 文档图片地址
time: 10, // 相对开播的时间(单位秒)
pageNum: 1, // 文档页码
docId: '64AE990A55B83E749C33DC5901307461' // 文档ID
}
}
};
直播中静态文档翻页失败回调
window.on_cc_live_pagechange_error = function(data) {
// 返回值data说明
{
userId: '565f35bd8d534469992c09e66c9d7c12', // 用户ID
userName: 'test', // 用户昵称
docMsg: {
completeURI: 'http://image.csslcloud.net/image/0.jpg', // 文档图片地址
time: 10, // 相对开播的时间(单位秒)
pageNum: 1, // 文档页码
docId: '64AE990A55B83E749C33DC5901307461' // 文档ID
}
}
};
其他
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链接。
附录2. 直播连麦浏览器支持情况
平台 | Chrome | Firefox | Safari | Opera | QQ 浏览器 | Edge 浏览器 |
最低版本 | 60+ | 56+ | 13+ | 45+ | 10.5+ | 80+ |
回放SDK
依赖库
回放SDK依赖于 jQuery,请自行引入 jQuery 库,建议使用1.9.X版本。
调用方法
页面引入 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.8.2/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,
viewercustomua:'android',//可选
viewercustominfo:'{"exportInfos": [ {"key": "城市", "value": "北京"}, {"key": "姓名", "value": "哈哈"}]}',//可选
fastMode:true
});
</script>
参数 | 说明 |
userId | 用户id,不可为空,必选参数 |
roomId | 直播间id,不可为空,必选参数 |
recordId | 回放id,不可为空为必选(取消不传recordId,传入liveId可播放,如果该参数不存在会抛出异常) |
groupId | 分组id,可为空,可选参数 |
viewername | 观看者名字,可为空,接口验证时必填 |
viewertoken | 观看密码,可为空,接口验证时必填 |
isH5play | PC端是否启用H5播放器,可选参数,默认true启用h5播放器,false为启用flash播放器(不支持H5的浏览器,该参数无效,默认使用Flash播放器) |
viewercustomua | 自定义UA参数,配合接口验证使用,可为空 |
viewercustominfo | json格式字符串,可选,自定义用户信息,该信息会记录在用户访问记录中,用于统计分析使用(长度不能超过1000个字符,若直播间启用接口验证则该参数无效) |
fastMode | 可选参数,默认为true开启极速文档,为false时则使用flash文档加载 |
回放响应事件 API
重要提示:
为优化回放数据的响应速度,减少文档白屏时间,从3.8.0版本开始升级了回放数据的处理策略, 将回放数据进行静态化存储,回放数据将按照固定大小(约512kb)被分割为不同的分片,静态化存储为json文件。
分片加载策略:默认会请求第一个分片数据,其他分片会提前五分钟预加载,当seek播放时如果当前时间点的数据还未被请求则会触发该分片加载,请注意,如果seek时间跨度较大有可能出现跨分片的情况,此时只会处理seek时间点所在的分片
该策略主要影响以下响应事件,请重点关注
API | Before | After |
on_cc_live_chat_msg | 全部聊天信息 | 当前分片聊天信息 |
on_cc_live_chat_msg_sync | 同步显示聊天信息(包括当前时间点之前未渲染的数据) | 仅返回当前时间点聊天信息 |
on_cc_seeked_chat_msg | 无 | seek时间点之前的聊天数据 |
on_cc_live_broadcast_msg | 全部广播信息 | 当前分片广播信息 |
on_cc_live_qa_question | 全部提问信息 | 当前分片提问信息 |
on_cc_live_qa_answer | 全部回答信息 | 当前分片回答信息 |
on_cc_callback_pages | 所有文档翻页信息 | 当前分片文档翻页信息 |
on_cc_callback_pages | 所有文档缩略图 | 当前分片文档缩略图 |
3.8.X升级指南:
升级不会影响回放顺序播放的数据渲染,主要在seek播放时数据有可能会有些差异,如果针对seek操作时的数据渲染有时间排序要求,可参考以下建议:
1.针对要接收的数据增加本地数组存储,新增数据时判断其时间是否大于最后一条数据的时间,若小于则对本地数据进行排序处理,排序后再进行渲染。
2.如果聊天数据要求跟随进度条进度渲染需要同时注册on_cc_live_chat_msg_sync、on_cc_seeked_chat_msg,接收到on_cc_seeked_chat_msg数据时替换渲染数组,接收到on_cc_live_chat_msg_sync数据时追加到渲染数组中。
注:广播、文档翻页数据一般不会被分片
API | 说明 |
on_cc_login_success | 登录成功回调 |
on_cc_live_streaminfo | 当前流类型信息 |
on_cc_live_sharestream_start | 开始分享流(区域分享/桌面共享) |
on_cc_live_sharestream_end | 结束分享流(区域分享/桌面共享) |
on_cc_live_chat_msg | 当前分片聊天信息 |
on_cc_live_chat_msg_sync | 当前时间点聊天信息 |
on_cc_seeked_chat_msg | seek时间点之前的聊天数据 |
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_cc_player_ready | 播放器准备完成 |
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_loadDotPointsData | 回放打点回调 |
on_cc_callback_pages | 当前分片文档缩略图 |
on_cc_player_freetime(time) | 获取回放试看时长, time单位为秒 |
on_cc_player_freetime_end | 回放试看结束 |
返回值说明
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_streaminfo:
{
"time": 1000, // 相对回放开始点的相对偏移量(毫秒)
"type": 10 // 10: 摄像头, 20: 图片, 30: 插播视频, 40: 区域分享, 50: 桌面共享, 60: 自定义场景
}
on_cc_live_sharestream_start
{
"time": 2000, // 相对回放开始点的相对偏移量(毫秒)
"type": 40 // 40: 区域分享, 50: 桌面共享
}
on_cc_live_sharestream_end
{
"time": 3000, // 相对回放开始点的相对偏移量(毫秒)
"type": 40 // 40: 区域分享, 50: 桌面共享
}
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_chat_msg_sync:
[{
"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_broadcast_msg_sync:
[{
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, // 当前页码
"mode": 0 // 0: 静态文档 1: 普通动画 2: 极速动画
}]
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>
回放打点
window.on_cc_loadDotPointsData = function (data) {
console.log(data)
}
data: [
{
time: 0 // s
desc: 'xxxx'
}
]
文档自适应
$.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);
};
获取记忆播放时间点
播放器会默认记录视频上次观看到的时间点。同一浏览器打开同一回放资源,可从上次观看的时间点继续播放。
// 获取记忆播放时间点的方法:
<script type="text/javascript">
$.DW.getHistoryPlayTime();
</script>
设置记忆播放时间点
设置视频从指定的秒数开始播放。
<script type="text/javascript">
$.DW.setHistoryPlayTime(second);
</script>
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) | 文档显示跑马灯 |
$.DW.showMarquee(marquee) | 视频显示跑马灯 |
备注与说明
流类型详情回调(on_cc_live_streaminfo)、分享流开始回调(on_cc_live_sharestream_start)、分享流结束回调(on_cc_live_sharestream_end)的数据采集对推流客户端版本有要求,Windows平台 5.5.0开始支持,Mac平台5.6.0开始支持
SDK下载
下载地址:https://dl.csslcloud.net/live/sdk/web/Live_Web_Play_SDK-3.8.3.zip
版本更新记录
更新日期 | 版本号 | 更新内容 |
---|---|---|
2022-5-17 | 3.8.3 | 新增鉴黄直播结束提示 |
2022-5-11 | 3.8.2 | 直播增加静态文档翻页状态回调 回放新增试看功能 优化回放播放器交互体验 |
2022-3-29 | 3.8.1 | 优化直播移动端播放器交互体验 直播增加点赞互动组件支持 直播增加礼物互动组件支持 |
2022-3-21 | 3.8.0 | 优化直播流异常的恢复策略 回放新增流类型详情回调 回放新增分享流开始和结束回调 升级回放数据处理策略 |
2022-1-19 | 3.7.8 | 直播连麦质量监听 直播连麦频道内异常事件监听 回放新增viewercustominfo和viewercustomua参数 支持标准水印 |
2021-12-21 | 3.7.7 | 新增自定义跑马灯功能 新增H5显示跑马灯 新增异常断流回调通知 新增回放文档缩略图 新增卡顿自动切换线路逻辑 |
2021-12-7 | 3.7.6 | 转播新增双师模式 |
2021-11-25 | 3.7.5 | 直播、回放支持显示视频logo 回放增加设置记忆播放时间点 登录用户名称支持40个字符长度 修复自建连麦Chrome92及以上版本兼容问题 |
2021-10-13 | 3.7.4 | 直播中点击播放按钮后的视频提示文案为 “视频加载中”; 直播中视频流卡顿的视频提示文案为 “正在尝试重连,请稍后...”; 解决直播中H5低延迟模式下safari浏览器需要点击两次播放按钮才可以播放视频的bug; 回放添加记忆播放功能; |
2021-08-05 | 3.7.3 | 回放新增播放器准备完成回调方法:on_cc_player_ready; 优化pc端直播h5播放器弹幕开关提示和线路切换; 修复低延迟模式下,音频播放切换问题; 修复pc端统计上报问题; |
2021-07-09 | 3.7.2 | 优化直播中文档频繁翻页策略 修复直播播放器音量调节失效问题 |
2021-07-02 | 3.7.1 | 移动端回放demo增加倍速播放功能 优化微信内自动播放兼容性问题 增强单页应用SDK兼容性 修复IE11兼容的问题 |
2021-04-29 | 3.7.0 | 新增直播多清晰度支持 新增回放打点 新增抽奖2.0 新增移动端低延迟 修复夸克浏览器websocket不兼容问题 修复弹幕开关不生效问题 |
2021-04-01 | 3.6.1 | 优化聊天数据画笔数据接口超时时间 修复ie浏览器倍速播放下暂停播放倍速失效bug 修复在chrome 89版本下webrtc连麦问题bug |
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 | 新增签到 新增抽奖 新增答题卡 新增聊天中超链接发送说明 回放新增获取文档图片信息 回放新增获取当前播放时间 |