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及其内核浏览器
languageen,英文版flash播放器,可为空
viewercustominfojson格式字符串,可选,自定义用户信息,该信息会记录在用户访问记录中,用于统计分析使用(长度不能超过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_completedPC端直播播放器加载完成
window._onStartPC端直播中的回调
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, '&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链接。

回放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观看密码,可为空,接口验证时必填
isH5playPC端是否启用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-153.6.0新增直播H5播放器视频全屏方法
新增回放H5播放器视频全屏方法
回放H5播放器支持点播加密增强视频
优化直播H5播放器失去焦点3秒隐藏控制条
修复踢出事件在移动端不生效问题
修复直播H5播放器 Safari 卡顿问题
修复回放sdk 移动端初始化完成后,首次触发play方法无法播放问题
2020-11-303.5.2优化直播H5播放器,修复播放状态异常问题;
优化文档模块加载机制,提高SDK升级兼容性;
修复历史问答无法获取提问用户头像问题;
2020-11-053.5.1修复直播、回放文档iframe不在playbackPanel内部问题
2020-10-293.5.0PC端直播H5播放器新增以下功能:
-支持弹幕功能
-支持跑马灯功能
-支持暖场视频功能
-支持播放器背景图
-支持播放器提示语
-支持播放器倒计时
-支持双击全屏显示
-播放器英文版适配
-播放器相关按钮样式优化
2020-09-043.4.0直播SDK支持自定义打卡提示语
直播SDK新增用户进出直播间消息通知
直播SDK新增用户禁言群发消息通知
2020-08-213.3.0新增PC端回放文档模块显示跑马灯
新增直播支持广播历史记录删除
回放增加获取文档备注字段docNotes
修复回放PC端H5播放器获取buffer不准确问题
修复回放文档iframe不在playbackPanel内部问题
2020-04-223.2.2新增禁言并删除聊天记录方法
直播回放新增课件水印支持
完善SDK使用说明文档
修复H5直播播放器bug
2020-04-143.2.1修复回放拖动播放文档偶尔不显示问题;
2020-02-263.2.0新增截图功能
直播支持h5播放器
文档优化
2019-12-103.1.0新增随堂测功能
新增打卡功能
新增销毁方法
优化SDK使用文档
2019-10-153.0.0新增版本控制,取消SDK热更新机制
文档默认使用极速模式
回放默认使用H5播放器
回放初始化取消liveId的兼容,必须传入recordId
升级连麦模块,支持新版连麦
优化回放文档画笔数据加载
2019-06-252.9.1新增webpack版demo
2019-01-212.9.0新增登录成功回调
支持敏感词过滤
支持聊天审核
支持直播分组
文档极速动画模式兼容docAdapt方法
2019-01-092.8.1直播socket链接状态回调
新增聊天图片解析说明
2018-12-112.8.0直播新增视频、文档为主布局切换回调
新增用户禁言后聊天回调
退出登录增加状态回调
2018-11-072.7.0文档模式新增切换数据源响应事件
新增学员踢出类型
2018-10-152.6.0直播新增问卷提交方法和问卷统计回调
直播新增获取直播间文档方法
直播新增自由翻页模式
2018-09-122.5.0直播和回放文档支持极速动画模式
直播新增onLiveTime回调,返回直播开始时间和直播时长
优化demo
2018-07-042.4.1直播新增viewercustominfo参数
回放PC端新增H5播放器及倍速播放
回放demo界面美化
2018-06-132.4.0直播和回放新增翻页信息回调
直播支持观看直播时修改昵称
直播支持广播信息补推(最后一条广播)
回放增加直播中发布的广播信息的回调
2018-03-282.3.1新增直播中获取问卷的方法
2018-02-272.3.0支持第三方问卷
支持直播倒计时
支持文档显示模式
优化低延迟模式下文档视频同步性
回放Flash播放器API增加播放回调事件、面板设置、画面缩放、画面比例
2017-11-282.2.0支持聊天记录补推
增加获取播放器背景图及提示语的方法
支持橡皮擦删除画笔
增加聊天自定义参数支持
回放Flash播放器API增加隐藏控制条、音量控制、播放控制、获取buffer
2017-10-102.1.0新增用户退出功能
新增问卷功能
新增广播消息
新增web端布局切换事件
新增聊天获取讲师列表私聊
新增PC端直播中的状态事件
新增获取直播间简介
新增是否显示在线人数
新增跑马灯功能,并支持设置显示在文档还是视频Flash上
直播和回放新增增加自定义ua参数 viewercustomua
直播和回放新增flash播放器加载完成事件
回放登录参数 liveId 修改为recordId
2017-07-262.0.0移动端支持画笔显示
PC和移动端支持ppt动画
PC端增加文档自适应窗口方法
移动端回放支持ppt同步翻页
移动端直播增加文档延迟保持和直播同步
回放增加登录失败回调方法
2017-06-281.8.4支持连麦功能
回放支持获取时长
2017-01-181.8.3支持https
2016-11-221.8.2新增回放聊天同步显示接口
2016-11-181.8.1新增弹幕开关
新增控制条隐藏
新增文档弹幕
直播聊天和问答返回角色信息
回放聊天和问答返回角色、头像信息
2016-11-081.8.0新增签到
新增抽奖
新增答题卡
新增聊天中超链接发送说明
回放新增获取文档图片信息
回放新增获取当前播放时间