快速跑通 White 白板 Demo(Web版)

本地环境

macOS Catalina: 版本10.15.4
Visual Studio Code: 版本1.42.1 (可选)
Chrome: 版本 81.0.4044.138(正式版本) (64 位)

准备

  1. 访问 Netless ,注册账号,并在控制台中获取 SDK Token
  2. 进入应用管理页面,获取 APP ID

开始

  1. Visual Studio Code(可选)中,新建一个 index.html 文件。
  2. 复制以下代码,并注意替换代码中的 sdkTokenappIdentifier
<!DOCTYPE html>
<html>
    <head>
        <link rel="shortcut icon" href="https://docs.agora.io/favicon.ico">
        <!-- 版本号根据最新版本更改即可 -->
        <link rel="stylesheet" href="https://sdk.herewhite.com/white-web-sdk/2.8.0.css">
        <script src="https://sdk.herewhite.com/white-web-sdk/2.8.0.js"></script>
        <script>
            //创建新房间,同时获取 RoomToken
            var sdkToken = "NETLESSSDK_YWs9b0PTWQ";
            var url = 'https://cloudcapiv4.herewhite.com/room?token=' + sdkToken;
            var requestInit = {
                method: 'POST',
                headers: {
                    "content-type": "application/json",
                },
                body: JSON.stringify({
                    name: "房间名称",
                    limit: 0, // 设置为 0 是不限制,推荐使用设置为 0:房间不限制,从业务上去限制。
                    mode: "persistent" // 普通房间,无法回放
                    // mode: "historied", // 可回放房间
                }),
            };
            // 请求创建房间,并获取 sdk 后端服务器 response
            fetch(url, requestInit).then(function(response) {
                return response.json();
            }).then(function(json) {
                console.log(json)
                 //初始化 SDK
                var whiteWebSdk = new WhiteWebSdk({
                    appIdentifier: "121MHjfA",
                    preloadDynamicPPT: false // 可选,是否预先加载动态 PPT 中的图片,会显著提升用户体验,降低翻页的图片加载时长
                    //deviceType: "mouse"// 可选, touch or desktop , 默认会根据运行环境进行推断
                    // ...更多可选参数配置
                });
                //初始化 房间
                whiteWebSdk.joinRoom({
                    uuid: json.msg.room.uuid,
                    roomToken: json.msg.roomToken,
                },
                {
                    onRoomStateChanged: modifyState => {
                        console.log(modifyState);
                    },
                    onPhaseChanged: phase => {
                        console.log(phase);
                    }
                    }).then(function(room) {
                        //实时房间实例
                        window.room = room;
                        room.bindHtmlElement(document.getElementById("whiteboard"));
                    }).catch(function(err) {
                        //初始化房间失败
                        console.log(e);
                    })
                }).catch(function(err) {
                    console.error(err);
                });
        </script>       
    </head>
    <body>
        <div id="whiteboard" style="background-color:gray; width: 50%; height: 50vh;"></div>  
    </body>
</html>

运行程序

  • 通过 Open with Live Server 运行
    看到浏览器访问路径为 http://127.0.0.1:5500/index.html ,稍等片刻,鼠标变为画笔形状后,即可开始进行涂鸦。
    image--008

  • 通过 Chrome 浏览器直接打开 index.html
    看到浏览器访问路径为文件在本机上的绝对路径,稍等片刻,鼠标变为画笔形状后,即可开始进行涂鸦。