快速入门

优质

小牛编辑

131浏览

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)
```

快速入门

必要条件

添加依赖

极简使用

目录

示例代码

读写端操作

只读端的三种模式

同一时间只能使用一种模式，若需要使用其他模式，请重新初始化