快速入门
优质
小牛编辑
129浏览
2023-12-01
必要条件
- 第一步,目睹云已认证用户
- 第二步,创建白板
- 方式一: 登录目睹云控制台www.muducloud.com/console/ => 其它服务 => 白板服务 => 新增白板
- 方式二: 调用目睹云白板API创建,详细信息请转到白板API参考文档
- 第三步,从生成的白板中拿到对应ID和访问token(读写token或只读token), 使用读写token后,用户可以使用画笔等功能,读token只能进行观看
添加依赖
<script src="http://static.mudu.tv/static/paint/latest/paint.js"></script>
极简使用
读写端[教师端]
window['paint'].createDrawer( drawerDom, // 绑定白板的dom对象 menuDom, // 绑定菜单的dom对象 rwToken, // 读写token boardId, // 白板唯一识别标志 initialPage // 初始化后,显示第几页白板 )
只读端[学生端]
var board = window['paint'].createBoard(
drawerDom , // 绑定的dom对象
rToken , // 只读token
boardId , // 白板唯一识别标志
initialPage // 初始化后,显示第几页白板
)
board.listen()
目录
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>board-demo</title>
<style>
.container {
display: flex;
flex-direction: column;
}
#drawer-wrap, #board-wrap {
width: 600px;
height: 300px;
border: 1px dashed;
position: relative;
margin-top: 50px;
}
#menu{
top: -32px;
position: absolute;
}
</style>
</head>
<script src="http://static.mudu.tv/static/paint/latest/paint.js"></script>
<body>
<div class="container">
<div id="drawer-wrap">
<div id="menu"></div>
<div id="drawer"></div>
</div>
<div id="board-wrap">
<div id="board"></div>
</div>
</div>
</body>
<script>
var rwToken = [读写token]
var boardId = [白板ID]
var rToken = [只读token]
// 读写端初始化
var drawer = window['paint'].createDrawer(
document.getElementById("drawer"),
document.getElementById("menu"),
rwToken,
boardId,
1
)
// 只读端初始化
var board = window['paint'].createBoard(
document.getElementById("board"),
rToken,
boardId,
1
)
// 制度段模式一.开启监听模式。 其他只读模式
board.listen()
</script>
</html>
读写端操作
var drawer = window['paint'].createDrawer(drawerDom, menuDom, rwToken, boardId, initialPage)
获取当前白板是第几页
drawer.drawer.getPage()
翻页操作
drawer.drawer.setPage(page /*number类型 */)
只读端的三种模式
同一时间只能使用一种模式,若需要使用其他模式,请重新初始化
var board = window['paint'].createBoard(drawerDom , rToken, boardId, initialPage)
- 监听模式
- 主要功能:该模式下读写端使用白板时,会实时同步到只读端
- 使用场景:直播过程中读写端需要将标注信息实时展示给只读端
- 使用方法:
board.listen()
- 回放模式
- 主要功能:显示自白板创建后,某个时间点上的白板内容
- 使用场景:回看带有白板功能的直播录制视频
- 使用方法:
board.setNowTime(nowTime /* 设置当前白板时间,单位为毫秒*/)
- 备注: 若需要随点播视频同步播放,则需要根据点播进度实时调用board.setNowTime(nowTime)进行同步播放
- 翻页模式
- 主要功能:在显示直接结束后最终的白板上,进行翻页
- 使用场景:只看读写端操作后的最终白板信息
- 使用方法:
board.setPage(page)