SDK初始化
HTML片段
<html>
<head>
<script>
var zhuboToken = '${zhuboToken}';
var access_token = '${access_token}';
</script>
</head>
<body>
<!-- #Code goes here -->
<!--# rtc模块 -->
<div id="tf-rtc-wrap">...</div>
<!--# 课件模块 -->
<div id="tf-courseware-wrap">...</div>
<!--# 画板模块 -->
<div id="tf-whiteboard-wrap">...</div>
</body>
</html>JS代码片段
// xClass SDK 引入
let webSdk = require('//path_to_cdn.com/vendor/sdk/3.0.1/x-class')
// Token
let client = null // 是否主播身份
let zhuboToken = null // 主播Token
let accessToken = null // 其他身份Token
// 身份判断
window.client_token !== '' ? zhuboToken = window.client_token : zhuboToken = null
window.access_token !== '' ? accessToken = window.access_token : accessToken = null
zhuboToken ? client = 1 : client = 0
// 初始化SDK
let HTSDK = new window.Sdk({
zhuboToken: zhuboToken,
accessToken: accessToken,
client: client,
whiteboardDomId: 'tf-whiteboard-wrap',
isCheckDevice: false
})参数说明
| 字段 | 类型 | 说明 |
|---|---|---|
| zhuboToken | String | 主播token值 |
| accessToken | String | 学员token值 |
| client | Number | 是否主播身份 1 => 是 0 => 否 |
| whiteboardDomId | String | 画板容器ID |
| isCheckDevice | Boolean | true / false 初始化是否检测设备，如果配置为 true 参考设备检测说明 |
设备检测
如果初始化配置
isCheckDevice => true参考以下流程:
EVENT.RTC.DEVICES_LIST初始化监听此事件能收到当前设备列表(参考RTC模块获取设备列表部分)- 开始设备检测
testDevice（） - 检测扬声器、音频、视频是否正常
finishTest()
testDevice(deviceObj, videoDomId)
testDevice 参数说明
| 字段 | 类型 | 说明 |
|---|---|---|
| deviceObj | Object | 包括两项属性 {audioId, videoId} |
| videoDomId | String | 摄像头检测播放容器 <video id="{videoDomId}"></video> |
finisheTest(storeObj)
finisheTest 参数说明
| 字段 | 类型 | 说明 |
|---|---|---|
| videoId | String | 摄像头设备ID |
| audioId | String | 麦克风设备ID |
| isChecked | Boolean | 是否检测完成 |
// 设备检测案例
// 使用id为default的麦克风和id为default的摄像头初始化音视频，并在id为test的video中播放
SDK.testDevice ({
audioId: 'default', // 音频设备ID
videoId: 'default' // 视频设备ID
}, 'test')
// 如果检测完成
SDK.finishTest()事件方法
on(eventName, callback)
事件监听方法 用于监听事件回调
| 字段 | 类型 | 说明 |
|---|---|---|
| eventName | String | 事件名称(参考事件总表) |
| callback | Function | 回调函数 |
// 监听聊天事件
SDK.on(EVENT.CHAT.SEND, (res) => {
console.log(res)
})emit(eventName, exts, callback)
发送事件 用于发送定义事件
| 字段 | 类型 | 说明 |
|---|---|---|
| eventName | String | 事件名称(参考事件总表) |
| exts | Object/String/Number | 某些事件需要用到扩展参数时需要传入(可选) |
| callback | Function | 回调函数 |
// 发送聊天事件
SDK.emit(EVENT.CHAT.SEND, (res) => {
console.log(res)
})事件
事件操作分为两种方式, 发送(emit) / 监听(on)
// 发送聊天事件
SDK.emit(EVENT.CHAT.SEND, (res) => {
// 收到聊天数据, 且插入dom
// 假设用了jQuery
var chatDom = $('#chatDom')
chatDom.append('<p>' + res.msg + '</p>')
})
// 监听聊天事件(除了自己外其他用户都能收到以下事件)
SDK.on(EVENT.CHAT.SEND, (res) => {
// 收到聊天数据, 且插入dom
// 假设用了jQuery
var chatDom = $('#chatDom')
chatDom.append('<p>' + res.msg + '</p>')
})全部事件可通过 事件总览 总表查阅