Skip to content

GitLab

Last edited by Clark-new
Page history

web 直播观看SDK开发指南

1.概述

Live_Web_Play_SDK 是一个适用于web平台的直播SDK，使用此SDK可以与CC视频云服务进行对接，在web端使用CC视频的直播功能,本SDK只针对web播放端。

1.1 功能特性

功能 描述
直播视频 观看直播视频
文档展示 能够观看当前直播文档
线路更换 观看卡顿请换个线路
答题卡 支持实时检测课堂学生的掌握程度
问答 能够发送问题和接受回答信息
简介 支持对直播间的信息展示
问卷 支持对观看直播的人进行信息采集
广播 支持发送全体消息
连麦 支持与直播人员进行音视频沟通
签到 支持签到功能
抽奖 支持抽奖功能
投票 支持投票功能

2.开发准备

2.1 依赖库

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

2.2 阅读对象

本文档为技术文档，需要阅读者：

  • 具备基本的html、css、javascript开发能力
  • 准备接入CC视频的直播回放SDK相关功能
  • 对CC云直播产品使用方法有基础的了解，使用帮助地址

2.3 开发环境

  • 能够进行前端开发的IDE

3.开发配置

页面引入 jQuery：

<script src="//view.csslcloud.net/js/jquery-1.9.0.min.js" type="text/javascript"></script>

页面引入 SDK：

<script src="//view.csslcloud.net/js/sdk/3.0.0/liveSDK.js" type="text/javascript"</script>

3.1 快速集成

<!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>

4.使用方法

视频模块：

<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

4.1 主动调用API

发送聊天
DWLive.sendPublicChatMsg(msg)
//参数msg：string 发送公共聊天内容
发送私聊
DWLive.sendPrivateChatMsg(touserid,tousername,msg)
//参数 touserid:接收者的viewerid，tousername:接收者的viewername，msg:消息内容
退出直播间
DWLive.logout(obj)
//参数obj:obj.success：退出成功回调；obj.error：退出失败回调；
播放线路
DWLive.getLine()
//获取播放线路
DWLive.changeLine(num)
//切换线路，num: getLine返回的值(0,1)
问答功能
DWLive.sendQuestionMsg(msg)
//发送问题，msg:消息内容

4.2 直播响应事件 API

登录成功回调
DWLive.onLoginSuccess = function(data){
  console.log(data)
}
参数data:
{
    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 = function(data){
  console.log(data);
}
参数data:
 //该返回参数有两种类型
 //类型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.onPrivateChatMessage = function(data){
 console.log(data) 
}
参数data:
{
	"fromuserid":"7a4715874d504b8db78cb5b77d66b8c8",  // 发送者id
	"fromusername":"name",   // 发送者名字
	"touserid":"33ed40d2d7b746919219789733b5bdd4",  // 接收者id
	"tousername":"第三方士大夫",   // 接收者名字
	"msg":"发反反复复",   // 消息内容
	"time":"17:22:15"   // 发送时间
}
开始直播
DWLive.onLiveStart = function(){
}
停止直播
DWLive.onLiveEnd = function(){
  
}
问答功能
//接收提问
DWLive.onQuestion = function(data){
  console.log(data)
}
参数data:
{
	"action":"question",  // 提问
	"time":-1,
	"value":
	{
		"userId":"C783F0F7CB77E1F3",  // 提问者id
		"userName":"name",   // 提问者名字
		"content":"123145",  // 提问内容
		"userAvatar":"img",     // 提问者头像
		"groupId"："111",      //分组信息
		"id":"1B5BBA4826FFE337"   // 问题id
	}
}
DWLive.onAnswer = function(data){
  console.log(data);
}
参数data:
{
	"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.onLiveDesc = function(data){
  console.log(data)
}
参数data:
直播间描述信息

5 备注与说明

响应事件返回的默认都为字符串格式，请自行按需求转化为JSON对象。

5.1 附录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链接。

附录

更多API请参考: DOC目录下文档说明