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>

主动调用 API

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

返回值参数说明

登录成功

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. 直播连麦浏览器支持情况

回放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>

回放响应事件 API

重要提示：

为优化回放数据的响应速度，减少文档白屏时间，从3.8.0版本开始升级了回放数据的处理策略， 将回放数据进行静态化存储，回放数据将按照固定大小（约512kb）被分割为不同的分片，静态化存储为json文件。

分片加载策略：默认会请求第一个分片数据，其他分片会提前五分钟预加载，当seek播放时如果当前时间点的数据还未被请求则会触发该分片加载，请注意，如果seek时间跨度较大有可能出现跨分片的情况，此时只会处理seek时间点所在的分片

该策略主要影响以下响应事件，请重点关注

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数据时追加到渲染数组中。

注：广播、文档翻页数据一般不会被分片

返回值说明

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

备注与说明

流类型详情回调（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

版本更新记录