快速入门

优质
小牛编辑
136浏览
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)