WEB SDK开发指南

版本:3.10.0
日期:2022年9月15日

概述

利用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.10.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
        isShowFullScreen:true,//可选参数,默认为true
    });
</script>
参数 说明
userid 用户 id,不可为空
roomid 直播间id,不可为空
groupid 分组id,可为空
viewername 用户名称,可为空
viewertoken 需要密码验证方式时,不可为空
viewercustomua 自定义UA参数,配合接口验证使用,可为空
pcH5Live 是否开启h5直播,不支持ie及其内核浏览器
language en,英文版flash播放器,可为空
viewercustominfo json格式字符串,可选,自定义用户信息,该信息会记录在用户访问记录中,用于统计分析使用(长度不能超过1000个字符,若直播间启用接口验证则该参数无效)
fastMode 是否开启极速动画模式,默认是开启极速动画模式,默认参数为true
isShowFullScreen 是否显示播放器全屏按钮,默认参数为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() 断开礼物服务消息监听
setShowFullScreenBtn(showBtn) 设置全屏按钮显示隐藏
返回值: 无
参数说明: {
showBtn: true //是否展示全屏按钮
}
getDocumentInfo() 获取当前直播间文档信息
返回值: {
docId: '当前文档ID',
pageNum: 当前文档页码
}
getCommodityList({pageSize, pageNum}) 获取直播带货商品列表
参数说明: {
pageNo: 1,
pageSize: 99
}
getCommodityDetail(id) 获取直播带货商品详情
参数说明: {
id: '商品id',
}
getCommodityLink({ productId: id }) 获取直播带货商品链接
参数说明: {
productId: '商品id',
}
disconnectCommodity() 断开直播带货服务消息监听

API调用方法

设置全屏按钮显示隐藏

DWLive.setShowFullScreenBtn(true)

获取直播带货商品列表

const params = { pageSize: 10, pageNum: 1 }
DWLive.getCommodityList(params).then(res => {
    console.log(res)
     // 返回值: 
     {  
        id: '商品id', 
        cover: '商品封面'  
        title: '商品标题' 
        desc: '商品描述' 
        tag: '商品标签,多个以逗号分隔' 
        currentPrice: '商品现价,到分' 
        originPrice: '商品原价,到分' 
        button: '商品按钮文案' 
        top: '商品置顶标记:0' // 0-未置顶;1-置顶 
        push: '商品推送标记:0' // 0-未推送;1-推送 
        score: '商品序号' 
     }  
})

获取直播带货商品详情

DWLive.getCommodityDetail(id).then(res => {
    console.log(res)
    // 返回值: 
    {  
        id: '商品id', 
        cover: '商品封面'  
        title: '商品标题' 
        currentPrice: '商品现价,到分' 
        originPrice: '商品原价,到分' 
    } 
})

获取直播带货商品链接

const parasm = { productId: id }
DWLive.getCommodityLink(parasm).then(res => {
    console.log(res)
    // 返回值: 
    { 
        link: '商品链接' 
    } 
})

直播响应事件 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) 直播中静态文档翻页失败回调
window.on_cc_commodity_ready() 直播带货组件加载完成
window.on_cc_commodity_error(error) 直播带货组件加载失败
receiveCommodityInfo({ onEventName, 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
    }
  }
};

直播带货组件推送消息

DWLive.receiveCommodityInfo = ({ onEventName, data }) => {
    onEventName: 'live_commerce_push', // live_commerce_push: 推送商品消息  live_commerce_push_del: 取消推送商品消息 
    data:{
        id: '商品id', 
        cover: '商品封面' 
        title: '商品标题' 
        currentPrice: '商品现价,到分' 
        originPrice: '商品原价,到分' 
    }
};

其他

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对象。

使用直播带货相关api首先需要开启直播带货权限

直播画笔流畅度优化需要使用Windows客户端5.8.3及以上版本

附录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]

需要发送带链接的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.10.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,
       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播放器)
$.DW.onlyAudio(params) 回放支持纯音频播放
参数说明: {
params: true // true 为音频模式, false 为视频模式
}

主动调用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开始支持

切换音视频($.DW.onlyAudio)首先要 proton 打开 回放支持音频 权限 并且只对开启之后新生成的回放生效

SDK下载

下载地址:https://dl.csslcloud.net/live/sdk/web/Live_Web_Play_SDK-3.10.0.zip

版本更新记录

更新日期 版本号 更新内容
2022-9-15 3.10.0 支持低延时直播观看模式
优化直播画笔流畅度
2022-8-31 3.9.0 支持直播带货功能
支持回放音频独立播放方法
支持获取直播当前文档页信息
PC支持控制隐藏全屏放大按钮
DP升级及文档延迟时间优化
修复及优化已知问题
2022-7-15 3.8.5 修复直播销毁方法 DWLive.destroy() 异常报错问题
修复直播在部分安卓机型默认调起媒体授权问题
修复回放 $.DW.getBuffer() 方法在部分移动端机型异常报错问题
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 新增签到
新增抽奖
新增答题卡
新增聊天中超链接发送说明
回放新增获取文档图片信息
回放新增获取当前播放时间

results matching ""

    No results matching ""