|
|
|
[TOC]
|
|
|
|
## 1.概述
|
|
|
|
websdk 是一个适用于chrome浏览器平台的直播SDK，使用此SDK可以与CC视频云服务进行对接，在chrome浏览器使用CC视频的小班课音视频服务。
|
|
|
|
|
|
|
|
### 1.1 功能特性
|
|
|
|
websdk目前包含音视频sdk、配置更新聊天插件、排麦插件
|
|
|
|
#### 1.1.1 音视频sdk功能
|
|
|
|
| 功能 | 描述 |
|
|
|
|
| :--------------------------------------- | :------- |
|
|
|
|
|音视频 | 支持音视频互动 |
|
|
|
|
|桌面共享 | 支持屏幕共享至互动者 |
|
|
|
|
|广播| 支持获取广播通知消息|
|
|
|
|
|视频连麦|支持与讲师进行视频连麦|
|
|
|
|
|音频连麦|支持与讲师进行音频连麦|
|
|
|
|
|获取在线人数|支持获取直播间在线人数|
|
|
|
|
|多清晰度| 支持不同码率推流|
|
|
|
|
|
|
|
|
#### 1.1.2 配置修改、图文聊天插件包含功能
|
|
|
|
| 功能 | 描述 |
|
|
|
|
| :--------------------------------------- | :------- |
|
|
|
|
|房间级配置修改 | 支持修改房间级配置 |
|
|
|
|
|个人配置修改 | 支持个人配置状态管理 |
|
|
|
|
|广播| 支持获取广播通知消息|
|
|
|
|
|图文聊天|支持传递图文消息|
|
|
|
|
|
|
|
|
#### 1.1.3 排麦插件包含功能
|
|
|
|
| 功能 | 描述 |
|
|
|
|
| :--------------------------------------- | :------- |
|
|
|
|
|多中连麦模式支持 | 自定义多种连麦场景（自由、举手、自动） |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 1.2 阅读对象
|
|
|
|
本文档为技术文档，需要阅读者：
|
|
|
|
* 具备基本的JavaScript开发能力
|
|
|
|
* 准备接入CC视频的云课堂音视频SDK相关功能
|
|
|
|
|
|
|
|
## 2.开发准备
|
|
|
|
|
|
|
|
### 2.1 开发环境
|
|
|
|
* 浏览器 : chrome浏览器
|
|
|
|
* 网络协议 : https 或 localhost本机环境
|
|
|
|
* 账号权限：已经开通cc开发者账号
|
|
|
|
|
|
|
|
## 3.快速集成
|
|
|
|
|
|
|
|
注：快速集成主要提供的音视频推拉流(核心功能)。
|
|
|
|
|
|
|
|
### 3.1 在线引用sdk及插件
|
|
|
|
### 3.1.1 在线引用sdk
|
|
|
|
```JavaScript
|
|
|
|
<script src="https://class.csslcloud.net/static/dist/js/websdk_3.0.js"></script>
|
|
|
|
```
|
|
|
|
### 3.1.2 在线引用配置更新、聊天插件
|
|
|
|
需使用聊天功能、修改房间级配置、修改个人配置，可在线引用配置更新、聊天插件
|
|
|
|
```JavaScript
|
|
|
|
<script src="https://class.csslcloud.net/static/dist/js/classUpdateChat.js"></script>
|
|
|
|
```
|
|
|
|
### 3.1.3 在线引用排麦插件
|
|
|
|
需使用特定场景连麦模式，可在线引用排麦插件
|
|
|
|
```JavaScript
|
|
|
|
<script src="https://class.csslcloud.net/static/dist/js/classMode.js"></script>
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### 3.2 获取sessionid
|
|
|
|
[通过api获取sessionid](http://doc.bokecc.com/class/developer/classapi/#toc_11)
|
|
|
|
|
|
|
|
[api加密方法](http://doc.bokecc.com/index.php?c=content&a=list&catid=321)
|
|
|
|
|
|
|
|
### 3.3 初始化sdk
|
|
|
|
```JavaScript
|
|
|
|
var rtc = new Rtc({
|
|
|
|
userid: userid, // 用户ID
|
|
|
|
sessionid: sessionid // 通过api获取
|
|
|
|
});
|
|
|
|
|
|
|
|
```
|
|
|
|
### 3.4 重要事件监听
|
|
|
|
|
|
|
|
```JavaScript
|
|
|
|
rtc.on('login_success', function (data) {
|
|
|
|
// 账号登录成功
|
|
|
|
console.log(data,'login_success');
|
|
|
|
});
|
|
|
|
|
|
|
|
rtc.on('login_failed', function (err) {
|
|
|
|
// 账号登录失败
|
|
|
|
console.error('登录失败',err);
|
|
|
|
});
|
|
|
|
|
|
|
|
rtc.on('conference_join', function (streams) {
|
|
|
|
// 加入房间成功
|
|
|
|
console.log('conference_join', streams);
|
|
|
|
});
|
|
|
|
|
|
|
|
rtc.on('conference_join_failed', function (err) {
|
|
|
|
// 加入房间失败
|
|
|
|
console.log('加入房间失败',err);
|
|
|
|
});
|
|
|
|
|
|
|
|
rtc.on('allow_sub', function (stream) {
|
|
|
|
// 订阅进入房间的流
|
|
|
|
if(stream instanceof Woogeen.RemoteMixedStream){
|
|
|
|
console.log('是混合流,不定阅');
|
|
|
|
}else{
|
|
|
|
rtc.trySubscribeStream({
|
|
|
|
tryStream: stream,
|
|
|
|
success:function(stream){
|
|
|
|
// 订阅流成功
|
|
|
|
var streamId = stream.id(); // 获取流id
|
|
|
|
console.log('订阅流成功', streamId);
|
|
|
|
//将视频动态插入盒子id为domid的盒子中，
|
|
|
|
// domid最好与流id有关联方便移除
|
|
|
|
stream.show(domid);
|
|
|
|
},
|
|
|
|
fail: function(err){
|
|
|
|
console.log(err);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
rtc.on('unSub', function(stream){
|
|
|
|
// 监听取消订阅流
|
|
|
|
rtc.unSubscribeStream({
|
|
|
|
unSubStream: stream,
|
|
|
|
success:function(id){
|
|
|
|
console.log('取消订阅成功', id);
|
|
|
|
},
|
|
|
|
fail: function(err){
|
|
|
|
console.log('取消订阅失败', err);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
rtc.on('stream_removed', function (id) {
|
|
|
|
// 房间内有流退出或中断，移除相应dom
|
|
|
|
console.log('stream_removed', id);
|
|
|
|
//将本地放该流的dom移除掉
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
### 3.5 主动调用方法
|
|
|
|
*用户进入房间后，查询直播是否开启，若已开启，可直接创建本地流推流，若没开始直播，则需要调开始直播接口后方可推流
|
|
|
|
|
|
|
|
```JavaScript
|
|
|
|
// 查询直播状态
|
|
|
|
rtc.getLiveStat({
|
|
|
|
success: function(){
|
|
|
|
// 创建本地流推流
|
|
|
|
CreateStreamPublish();
|
|
|
|
},
|
|
|
|
fail: function(){
|
|
|
|
// 开启直播
|
|
|
|
rtc.startLive({
|
|
|
|
success: function(){
|
|
|
|
// 创建本地流推流
|
|
|
|
CreateStreamPublish();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
// 创建并推送本地流
|
|
|
|
function CreateStreamPublish(){
|
|
|
|
rtc.createLocalStream({
|
|
|
|
streamName: 'main',
|
|
|
|
success: function(stream){
|
|
|
|
// 将本地流显示在id 为 'my'的盒子里
|
|
|
|
v.show('my');
|
|
|
|
// 推送本地流
|
|
|
|
rtc.publish({
|
|
|
|
streamName: 'main',
|
|
|
|
success: function(stream){
|
|
|
|
console.log('本地流推送成功', value.id());
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
fail: function(err){
|
|
|
|
console.log(err);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
```
|
|
|
|
## 4.功能使用
|
|
|
|
详细功能列表见api文档 和 应用demo
|
|
|
|
|
|
|
|
|
|
|
|
## 5.API查询
|
|
|
|
[音视频sdk api文档]()
|
|
|
|
[配置更新、聊天插件api文档]()
|
|
|
|
[排麦插件api文档]()
|
|
|
|
|
|
|
|
|
|
|
|
## 6.Q&A
|
|
|
|
### 6.1 创建本地流失败
|
|
|
|
|
|
|
|
建议：
|
|
|
|
|
|
|
|
1.检查音视频设备是否正常<br>
|
|
|
|
|
|
|
|
2.检查浏览器版本是否满足要求，推荐chrome57以上版本浏览器<br>
|
|
|
|
|
|
|
|
3.检查网络开发环境是不是https或者localhost本机环境<br>
|
|
|
|
|
|
|
|
### 6.2 桌面共享无法使用
|
|
|
|
|
|
|
|
说明：
|
|
|
|
|
|
|
|
1.使用桌面共享需要在https网络环境使用
|
|
|
|
|
|
|
|
2.使用桌面共享需要配置包含当前网络域名的插件，此插件需联系cc技术人员提供
|
|
|
|
|
|
|
|
### 6.3 sessionid使用说明
|
|
|
|
1.获取到的sessionid 默认有效期是24小时，同一设备，登陆同一个房间的同一个角色（'presenter','talker'）, 可以重复使用，不用每次初始化sdk都去获取新的sessionid
|
|
|
|
|
|
|
|
2.同一个sessionid初始化的用户，在用户列表代表同一个用户
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
