web 直播观看SDK开发指南

This is an old version of this page. You can view the most recent version or browse the history.

直播SDK

依赖库

直播SDK依赖于jQuery，请自行引入 jQuery 库，版本没有要求。

快速集成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LiveSDK</title>
</head>
<body>
<div id="livePlayer" style="width: 500px;height: 400px;background-color: black"></div>
<div id="drawPanel"></div>
<script src="//view.csslcloud.net/js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="//view.csslcloud.net/js/common.js"></script>//用于激活flash插件
<script src="//view.csslcloud.net/js/sdk/3.0.0/liveSDK.js" type="text/javascript"></script>
<script>
  // 直播SDK参数配置
  DWLive.init({
    userid: '40A53587B37573BD',
    roomid: '427DB068D5EAB1279C33DC5901307461',
    viewername: 'hdLive',
    viewertoken: '123',
    viewercustomua: 'android',
    language: 'zh-cn'
  });
</script>
</body>
</html>

调用方法

页面引入 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.0.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',//可选
		fastMode:true//可选参数，默认为true
	});
</script>

参数	说明
userid	用户 id，不可为空
roomid	直播间id，不可为空
groupid	分组id，可为空
viewername	用户名称，可为空
viewertoken	需要密码验证方式时，不可为空
viewercustomua	自定义UA参数，配合接口验证使用，可为空
language	en，英文版flash播放器，可为空
viewercustominfo	json格式字符串，可选，自定义用户信息，该信息会记录在用户访问记录中，用于统计分析使用（长度不能超过1000个字符，若直播间启用接口验证则该参数无效）
fastMode	是否开启极速动画模式，默认是开启极速动画模式，默认参数为true

主动调用 API

API	说明
sendPublicChatMsg(msg)	发送公聊，msg:消息内容
sendPrivateChatMsg(touserid,tousername,msg)	发送私聊， touserid:接收者的viewerid，tousername:接收者的viewername，msg:消息内容
sendQuestionMsg(msg)	发送问题，msg:消息内容
barrage(msg, color)	发送弹幕，color为十六进制颜色值(0xffffff)，仅支持PC端
getLine()	获取线路
changeLine(num)	切换线路，num: getLine返回的值(0,1)
onlyAudio()	只听音频
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)	控制条显示隐藏
requestInteraction	请求语音互动
hangupInteraction	挂断双向视频
enterInteractionRoom	进入互动房间
sendInteractionMessage	发送互动信息
docAdapt(true/false)	文档自适应，默认为false关闭自适应，仅支持PC端
showMarquee	视频显示跑马灯，仅支持PC端
showMarqueeDoc	文档显示跑马灯，仅支持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:提交成功后的回调

直播响应事件 API

API	说明
onLoginSuccess	登录成功
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	flash播放器加载完成
window._onStart	PC端直播中的回调
onExternalQuestionnairePublish	第三方问卷调查
onPageChange	翻页信息回调
onChangeNickname	修改用户昵称回调
onLiveTime	获取开始直播时间和直播时间（未开始直播返回 {liveStartTime: "", liveDuration: -1}）
onSwitchSource	获取当前播放（数据源）场景
onSwitchVideoDoc(main)	布局切换；main(false: 文档为主; true: 视频为主;)
onSilenceUserChatMessage(toJson(data))	用户禁言后发送聊天的消息回调; data:禁言时发送信息回调数据
onSocketConnect()	socket链接成功回调;
onSocketDisconnect()	socket链接失败回调;

返回值说明

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） 
    }
    
}


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" // 发送时间
    }
    

onPublicChatLogManage:
{
    "status": "0", // 聊天消息的状态 0 显示 1 不不显示 
    "chatIds": [ // 聊天消息的id列表
        "11111",
        "22222",
        "33333"
    ]
}
    
onPrivateChatMessage:
{
	"fromuserid":"7a4715874d504b8db78cb5b77d66b8c8",  // 发送者id
	"fromusername":"name",   // 发送者名字
	"touserid":"33ed40d2d7b746919219789733b5bdd4",  // 接收者id
	"tousername":"第三方士大夫",   // 接收者名字
	"msg":"发反反复复",   // 消息内容
	"time":"17:22:15"   // 发送时间
}

onPrivateAnswer:
{
	"fromuserid":"33ed40d2d7b746919219789733b5bdd4",  // 发送者id
	"fromusername":"第三方士夫",  // 发送者名字
	"fromuserrole":"student",   // 发送者身份
	"touserid":"7a4715874d504b8db78cb5b77d66b8c8",  // 接收者id
	"tousername":"name",   // 接收者名字
	"msg":"阿斯蒂芬",   // 消息内容
	"time":"17:26:24"  // 发送时间
}

onQuestion:
{
	"action":"question",  // 提问
	"time":-1,
	"value":
	{
		"userId":"C783F0F7CB77E1F3",  // 提问者id
		"userName":"name",   // 提问者名字
		"content":"123145",  // 提问内容
		"userAvatar":"img",     // 提问者头像
		"groupId"："111",      //分组信息
		"id":"1B5BBA4826FFE337"   // 问题id
	}
}

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"   // 回答者身份
	}
}

onPageChange:
{
    "docId": "xxxx",//当前页id
    "docName": "Java.pdf",//当前页name
    "docTotalPage": 105,//总页数
    "pageNum": 0    //当前页索引值
}

onBroadcastMsg:
{
	content: "大家好",//广播内容
    time: 205 //广播时间
}

userRole和fromuserrole对应关系表示如下:
	unknow: 未知角色;
	publisher: 主讲;
	teacher: 助教;
	host: 主持人;
	student: 学员（观众）;
	
	
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'}

submitQuestionnaire(data,callBack)
data 请求参数格式
{
    questionnaireId:"0FF0486DAB9938FB",//问卷ID
        subjectsAnswer:[
        {
            selectedOptionId:"A63DA4D314D96DFB",        //提交答案的ID（单选题）
            subjectId:"45AC816D86E6AAC3"                //提交问题的ID
        },
        {
            selectedOptionIds:"98809D2B35693987,5F862A1577662D15",//多个答案的ID（多选题）
            subjectId:"68E9B354A52ABF40"
        },
        {
            answerContent:"我是问答题的答案",              //问答题答案 (问答题)
            subjectId:"F5EF68012BEF40BE"
        }
    ]
}
callBack 回调参数格式如下：
{errorCode:0,success:true,msg:"请求成功"}


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  主播将数据源切换为可自定义场景；


onKickOut
返回参数e:
DWLive.onKickOut = function(e){ 
    console.log(e); 
}
e.kick_out_type = 10,在允许重复登录前提下，后进入者会登录会踢出先前登录者.
e.kick_out_type = 20,讲师、助教、主持人通过页面踢出按钮踢出用户.
参数格式： 
{"viewerid":"f3793f93a3814bf8937f5dc65521721d","kick_out_type":"10"}
 触发条件 
1. 讲师/助教/主持人 主动踢出用户，触发该事件
2. 在允许重复登录的前提下，后进入者会自动踢出先前登录者，触发该事件。

关键代码示例

<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);
	}

	$(".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]或者 [uri_http://www.xxx.com] （注意：前后都需要加空格）

在收发消息的时候，用showEm('消息内容')处理一下消息内容即可，原理就是匹配[img_url]和[em2_*]，让它变为对应的图片或者表情图片，匹配[uri _ *]，让它变为可点击的a链接。

附录2. demo使用方法

<!-- 直播视频模块 -->
<div id="livePlayer"></div>

<!-- 直播文档模块 -->
<div id="drawPanel"></div>


    // 直播SDK参数配置
    DWLive.init({
        userid: 'userid',
        roomid: 'roomid',
        viewername: 'name',
        viewertoken: 'password',
        viewercustomua: 'android',
        language: 'en',
        viewercustominfo: '{"exportInfos": [ {"key": "城市", "value": "北京"}, {"key": "姓名", "value": "哈哈"}]}'
    });