zby_web_sdk
Version:
直播云webSDK
649 lines (635 loc) • 20.5 kB
Markdown
# WebSdk 接口文档 (version 1.1.1)
## 环境配制
### 1.引入文件
#### 1.1.script标签引入
```html
<script type="text/javascript" src="{sdk}/zby_web_sdk.js"></script>
```
#### 1.2.npm+import引入
```javascript
// 安装
npm i -D zby_web_sdk
// 引入
import WebSdk from "zby_web_sdk";
```
#### 1.3.requirejs引入
```javascript
require(["{sdk}/zby_web_sdk.js"], function (WebSdk) {});
```
#### 2.参数配制API接口
<table>
<tbody>
<tr>
<td rowspan="27"><strong>初始化</strong></td>
<td colspan="9">初始化WebSdk</td>
</tr>
<tr>
<td rowspan="2">接口</td>
<td colspan="8">let zbyWeb = new WebSdk(options); // 创建SDK对象，传入相关参数</td>
</tr>
<tr>
<td colspan="8">zbyWeb.initWeb(); // 初始化SDK，<span style="color: rgb(255,0,0);">此接口要在绑定监听事件后调用</span></td>
</tr>
<tr>
<td rowspan="24">字段</td>
<td colspan="3">
参数
</td>
<td>类型</td>
<td colspan="3">描述</td>
<td>备注</td>
</tr>
<tr>
<td colspan="3">class.orgId</td>
<td>string</td>
<td colspan="3">机构ID</td>
<td>
<p>必填
</td>
</tr>
<tr>
<td colspan="3">class.classId</td>
<td>string</td>
<td colspan="3">班级ID</td>
<td>必填</td>
</tr>
<tr>
<td colspan="3">class.courseId:</td>
<td colspan="1">string</td>
<td colspan="3">课堂(课节)id</td>
<td>必填</td>
</tr>
<tr>
<td colspan="3">class.classType:</td>
<td colspan="1">string</td>
<td colspan="3">口令课（code），密码课（token）</td>
<td>必填</td>
</tr>
<tr>
<td colspan="3">class.teacherId</td>
<td colspan="1">string</td>
<td colspan="3">教师ID</td>
<td>必填</td>
</tr>
<tr>
<td colspan="3">class.assistId,</td>
<td colspan="1">string</td>
<td colspan="3">辅导老师ID</td>
<td>可选</td>
</tr>
<tr>
<td colspan="3">class.videoMode</td>
<td colspan="1">string</td>
<td colspan="3">直播（'1'）,回放（'2'）</td>
<td>必填</td>
</tr>
<tr>
<td colspan="3">class.chapterId</td>
<td colspan="1">string</td>
<td colspan="3">直播讲(章节)ID - 数据上报</td>
<td colspan="1">选填</td>
</tr>
<tr>
<td colspan="3">user. userId</td>
<td colspan="1">string</td>
<td colspan="3">用户ID</td>
<td colspan="1">必填</td>
</tr>
<tr>
<td colspan="3">user.userImg</td>
<td colspan="1">string</td>
<td colspan="3">头像地址</td>
<td colspan="1">必填</td>
</tr>
<tr>
<td colspan="3">user.username</td>
<td colspan="1">string</td>
<td colspan="3">用户姓名</td>
<td colspan="1">必填</td>
</tr>
<tr>
<td colspan="3">user.usercode</td>
<td colspan="1">string</td>
<td colspan="3">用户口令, 口令课</td>
<td colspan="1">必填</td>
</tr>
<tr>
<td colspan="3">user.usertoken</td>
<td colspan="1">string</td>
<td colspan="3">用户token， 密码课</td>
<td colspan="1">必填</td>
</tr>
<tr>
<td colspan="3">video.Id</td>
<td colspan="1">string</td>
<td colspan="3">播放器的video的ID</td>
<td colspan="1">必填</td>
</tr>
<tr>
<td colspan="3">video.width</td>
<td colspan="1">int</td>
<td colspan="3">播放器的宽度(px)</td>
<td colspan="1">选填</td>
</tr>
<tr>
<td colspan="3">video.height</td>
<td colspan="1">int</td>
<td colspan="3">播放器的高度(px)</td>
<td colspan="1">选填</td>
</tr>
<tr>
<td colspan="3">video.controls</td>
<td colspan="1">Boolean</td>
<td colspan="3">播放器是否显示控制条 默认为true</td>
<td colspan="1">选填</td>
</tr>
<tr>
<td colspan="3">datas.part_id</td>
<td colspan="1">string</td>
<td colspan="3">部门ID</td>
<td colspan="1">必填</td>
</tr>
<tr>
<td colspan="3">datas.project_id</td>
<td colspan="1">string</td>
<td colspan="3">项目ID</td>
<td colspan="1">必填</td>
</tr>
<tr>
<td colspan="3">datas.cmd_id</td>
<td colspan="1">string</td>
<td colspan="3">协议ID</td>
<td colspan="1">必填</td>
</tr>
<tr>
<td colspan="3">datas.is_test</td>
<td colspan="1">Boolean</td>
<td colspan="3">是否是测试环境</td>
<td colspan="1">必填</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td rowspan="17"><strong>课堂信息</strong></td>
</tr>
<tr>
<th colspan="2">
<p>请求接口
</th>
<th colspan="3">描述</th>
<th>备注</th>
</tr>
<tr>
<td colspan="2">zbyWeb.disConnect()</td>
<td colspan="3">断开信道连接</td>
<td>
</td>
</tr>
<tr>
<td colspan="2">zbyIm.sendQuestion(s）</td>
<td colspan="3">提交答题器 答案</td>
<td>
<pre>
s：string
选择题： A,B,C,D
判断题： 正确：R，错误：W
听懂： 能：Y，不能：N
</pre>
</td>
</tr>
<tr>
<th colspan="2">回调接口</th>
<th colspan="3">描述</th>
<th>备注</th>
</tr>
<tr>
<td colspan="2">connected</td>
<td colspan="3">信道连接成功</td>
<td>
<pre>
zbyWeb.on('connected', function () { })
</pre>
</td>
</tr>
<tr>
<td colspan="2">disconnec</td>
<td colspan="3">信道掉线</td>
<td colspan="1">
<pre>
zbyWeb.on('disconnect', function () { }
</pre>
</td>
</tr>
<tr>
<td colspan="2">forceExit </td>
<td colspan="3">强制退出（用户被踢）</td>
<td colspan="1">
<pre>
zbyWeb.on('forceExit', function () { });
</pre>
</td>
</tr>
<tr>
<td colspan="2">notice </td>
<td colspan="3">公告内容变更</td>
<td colspan="1">
<pre>
zbyWeb.on('notice', function (s) {
// s: 公告内容 String
});
</pre>
</td>
</tr>
<tr>
<td colspan="2">classStarted</td>
<td colspan="3">课程开始(上课)</td>
<td colspan="1">
<pre>
zbyWeb.on('classStarted', function (d) {
//d:int （课程开始时间）时间缀
});
</pre>
</td>
</tr>
<tr>
<td colspan="2">classEnded </td>
<td colspan="3">课程结束(下课)</td>
<td colspan="1">
<pre>
zbyWeb.on('classEnded', function (d) {
//d:int （课程结束时间）时间缀
});
</pre>
</td>
</tr>
<tr>
<td colspan="2">cameraOpened</td>
<td colspan="3">摄像头开启</td>
<td colspan="1">
<pre>
zbyWeb.on('cameraOpened', function () { });
</pre>
</td>
</tr>
<tr>
<td colspan="2">cameraClosed</td>
<td colspan="3">摄像头关闭</td>
<td colspan="1">
<pre>
zbyWeb.on('cameraClosed', function () { });
</pre>
</td>
</tr>
<tr>
<td colspan="2">questionStart</td>
<td colspan="3">收到开始答题消息</td>
<td colspan="1">
<pre>
zbyWeb.on('questionStart', function (s) {
s:{
qid: string题目id,
tid: int 目标id,
type: 题目类型:string //xz:选择，pd:判断，td:是否听懂
}
});
</pre>
</td>
</tr>
<tr>
<td colspan="2">questionEnd</td>
<td colspan="3">收到结束答题消息</td>
<td colspan="1">
<pre>
zbyWeb.on('questionEnd', function () { });
</pre>
</td>
</tr>
<tr>
<td colspan="2">addStream </td>
<td colspan="3">开始推流</td>
<td colspan="1">
<pre>
zbyWeb.on('addStream', function (data) {
/** data:{
streamUrl :string流id 包括课件和老师头像区的流
screenStreamUrl：string 课件流id
teacherStreamUrl： string老师头像区流id
} */
});
</pre>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td rowspan="16"><strong>聊天信息</strong></td>
</tr>
<tr>
<th colspan="2">
<p>请求接口
</th>
<th colspan="3">描述</th>
<th wdith="30%">备注</th>
</tr>
<tr>
<td colspan="2">zbyWeb.sendMsg(msg,cb)</td>
<td colspan="3">发送聊天消息</td>
<td wdith="30%">
<pre>
zbyWeb.sendMsg = function(msg, cb){}
msg: string 待发送的消息
cb: function 发送成功回调函数
</pre>
</td>
</tr>
<tr>
<th colspan="2">回调接口</th>
<th colspan="3">描述</th>
<th wdith="30%">备注</th>
</tr>
<tr>
<td colspan="2">message</td>
<td colspan="3">收到聊天消息</td>
<td wdith="30%">
<pre>
zbyWeb.on('message', function (data) {
data : {
history: 是否是历史消息 true/false
username: string用户名
avatar: string用户头像地址
message:string 消息内容 纯文本消息则显示消息内容、 若为图片消息 则为图片的img标签
}
});
</pre>
</td>
</tr>
<tr>
<td colspan="2">onlineCounts </td>
<td colspan="3">在线人数</td>
<td colspan="1" wdith="30%">
<pre>
zbyWeb.on('onlineCounts', function (i) {
//包括老师 //i:int
});
<pre>
</td>
</tr>
<tr>
<td colspan="2">chatEnable </td>
<td colspan="3">聊天启用</td>
<td colspan="1" wdith="30%">
<pre>
zbyWeb.on('chatEnable', function () { });
</pre>
</td>
</tr>
<tr>
<td colspan="2">chatDisable </td>
<td colspan="3">聊天禁用</td>
<td colspan="1" wdith="30%">
<pre>
zbyWeb.on('chatDisable', function () { });
</pre>
</td>
</tr>
<tr>
<td colspan="2">statusChange</td>
<td colspan="3">状态改变 （老师进出教室等文字提示，显示到聊天区域）</td>
<td colspan="1" wdith="30%">
<pre>
zbyWeb.on('statusChange', function (s) {
s:枚举值 /* [
{ code : '01', msg : 'control信道连接失败！' },
{ code : '02', msg : 'message信道连接失败！' },
{ code : '03', msg : '老师进入教室' },
{ code : '04', msg : '老师离开教室' },
{ code : '05', msg : '已开启全体禁言' },
{ code : '06', msg : '您已被禁言' },
{ code : '07', msg : '已取消全体禁言' },
{ code : '08', msg : '您已被取消禁言' },
{ code : '09', msg : '课程已开始' },
{ code : '10', msg : '课程已结束' },
{ code : '11', msg : '您已进入教室' }] */
});
</pre>
</td>
</tr>
<tr>
<td colspan="2">classEnded </td>
<td colspan="3">课程结束(下课)</td>
<td colspan="1" wdith="30%">
<pre>
zbyWeb.on('classEnded', function (d) {
//d:int （课程结束时间）时间缀
});
</pre>
</td>
</tr>
<tr>
<td colspan="2">cameraOpened</td>
<td colspan="3">摄像头开启</td>
<td colspan="1" wdith="30%">
<pre>
zbyWeb.on('cameraOpened', function () {});
</pre>
</td>
</tr>
<tr>
<td colspan="2">cameraClosed</td>
<td colspan="3">摄像头关闭</td>
<td colspan="1" wdith="30%">
<pre>
zbyWeb.on('cameraClosed', function () {});
</pre>
</td>
</tr>
<tr>
<td colspan="2">questionStart</td>
<td colspan="3">收到开始答题消息</td>
<td colspan="1" wdith="30%">
<pre>
zbyWeb.on('questionStart', function (s){
s:{
qid:题目id,
tid:目标id,
type:题目类型 //xz:选择，pd:判断，td:是否听懂
}
});
</pre>
</td>
</tr>
<tr>
<td colspan="2">questionEnd</td>
<td colspan="3">收到结束答题消息</td>
<td colspan="1" wdith="30%">
<pre>
zbyWeb.on('questionEnd', function () {});
</pre>
</td>
</tr>
<tr>
<td colspan="2">addStream </td>
<td colspan="3">开始推流</td>
<td colspan="1" wdith="30%">
<pre>
zbyWeb.on('addStream', function (data) {
/** data:{
streamUrl :流id 包括课件和老师头像区的流
screenStreamUrl： 课件流id
teacherStreamUrl： 老师头像区流id
}*/
});
</pre>
</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td rowspan="18"><strong>拉流信息</strong></td>
</tr>
<tr>
<th colspan="2">
<p>请求接口
</th>
<th colspan="3">描述</th>
<th>备注</th>
</tr>
<tr>
<td colspan="2">zbyWeb.play();</td>
<td colspan="3">播放(回放)</td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="2">zbyWeb.playCurrent();</td>
<td colspan="3">播放(直播)</td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="2"> zbyWeb.pause();</td>
<td colspan="3">暂停</td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="2">zbyWeb.width(w); </td>
<td colspan="3">设置宽度</td>
<td colspan="1">w：int</td>
</tr>
<tr>
<td colspan="2">zbyWeb.height(h);</td>
<td colspan="3">设置高度</td>
<td colspan="1">h:int</td>
</tr>
<tr>
<td colspan="2">zbyWeb.dispose()</td>
<td colspan="3">销毁</td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="2">zbyWeb.changeLine(i)</td>
<td colspan="3">手动切换线路</td>
<td colspan="1">i: int0、1、2...</td>
</tr>
<tr>
<td colspan="2">zbyWeb.requestFullscreen()</td>
<td colspan="3">进入全屏</td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="2">zbyWeb.exitFullScreen()</td>
<td colspan="3">退出全屏</td>
<td colspan="1"></td>
</tr>
<tr>
<td colspan="2">zbyWeb.currentTime(i)</td>
<td colspan="3">设置播放时间 仅限回放时
回放调进度条也调用该接口</td>
<td colspan="1">i: int 秒 将跳到该秒播放</td>
</tr>
<tr>
<td colspan="2">zbyWeb.getFullTime()</td>
<td colspan="3">获取回放总时间 返回总时间</td>
<td colspan="1">返回：number</td>
</tr>
<tr>
<td colspan="2">zbyWeb.getVolume()</td>
<td colspan="3">获取当前音量</td>
<td colspan="1">number：0~1</td>
</tr>
<tr>
<td colspan="2">zbyWeb.setVolume(i)</td>
<td colspan="3">设置视频播放音量</td>
<td colspan="1">i: number 0~1</td>
</tr>
<tr>
<th colspan="2">回调接口</th>
<th colspan="3">描述</th>
<th colspan="1">备注</th>
</tr>
<tr>
<td colspan="2">videoStatus</td>
<td colspan="3">video 播放状态</td>
<td colspan="1">
<pre>
zbyWeb.on('videoStatus', function (e,obj) {
switch (e){
case 'ready':
console.log("播放器初始化完毕")
break;
case 'waiting':
console.log("加载中")
break;
case 'playing':
console.log("开始播放")
break;
case 'buffernull':
console.log("开始卡顿")
break;
case 'bufferplay':
console.log("结束卡顿")
break;
case 'seriousbuffer':
console.log("严重卡顿")
break;
case 'currentLine':
console.log("当前线路:",obj);
//obj: {
lineid： int 线路id
name: String 线路名
url: String 流地址
streamid: String 流id,
supplier: int 供应商id
}
break;
case 'autoChangeLine':
console.log("自动切换线路中")
break;
case 'error':
console.log("流地址错误")
break;
case 'pause':
console.log("暂停")
break;
case 'play':
console.log("将要开始播放")
break;
case 'timeupdate':
console.log("当前播放时间",obj)
break;
}
});
</pre>
</td>
</tr>
<tr>
<td colspan="2"></td>
<td colspan="3"></td>
<td colspan="1"></td>
</tr>
</tbody>
</table>