如何在声网互动白板上使用数字笔

声网的大部分集成都有非常完善的文档。

但我最近遇到的一个非常棘手的问题——如何在声网互动白板上用 Wacom 等数字笔写字。

我们先从代码开始:

下列是设置白板实例的最少代码:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://sdk.netless.link/white-web-sdk/2.15.16.js"></script>
<script src="./joinWhiteboard.js"></script>
</head>
<body>
<div id="whiteboard" style="width: 100%; height: 100vh;"></div>
</body>
</html>

joinwhiteboard.js

var whiteWebSdk = new WhiteWebSdk({
// Pass in your App Identifier.
appIdentifier: {APP_INDENTIFIER},
// Set the data center as Silicon Valley, US.
region: "us-sv",
})
var joinRoomParams = {
uuid: {UUID YOU GET ON CREATING A NEW ROOM},
// The unique identifier of a user. If you use versions earlier than v2.15.0, do not add this line.
uid: {RANDOM UNIQUE STRING},
roomToken: {ROOM TOKEN YOU GENERATE USING UUID},
};
// Join the whiteboard room and display the whiteboard on the web page.
whiteWebSdk.joinRoom(joinRoomParams).then(function(room) {
room.bindHtmlElement(document.getElementById("whiteboard"));
}).catch(function(err) {
console.error(err);
});

大家可以点击下方链接获取创建聊天室和生成聊天室令牌的更多信息:https://docs.agora.io/en/whiteboard/join_whiteboard_room_web?platform=Web


运行上述代码后,你就可以使用鼠标绘画。

但是,不能使用数字笔在白板上画画。


解决方案

如果你跟我一样没有数字笔,但要为使用数字笔的用户设置这个功能。可以采用下列方法:

 deviceType: "surface"

创建 whitewebSdk 对象时,需要传递参数 deviceType。

 var whiteWebSdk = new WhiteWebSdk({
// Pass in your App Identifier.
appIdentifier: {APP_INDENTIFIER},
// Set the data center as Silicon Valley, US.
region: "us-sv",
// Set the device type
deviceType: "surface"
})

因为默认情况下,声网会将 deviceType 设置为“桌面”,只接受鼠标和键盘输入。

我们使用数字笔时,会触发一个触摸事件,而不是一个鼠标下拉事件,这就是数字笔无法在白板上使用的原因。

添加此参数后,你的数字笔就可以正常使用了。

希望这篇文章能帮助大家,欢迎在评论区留言。

想了解更多信息,可以免费注册声网账户。声网团队支持为全球 200 多个国家的用户提供服务,随时期待着为你提供服务。


原文作者:Anuj Gupta
原文链接:https://medium.com/@anujguptawork/how-to-use-a-digital-pen-on-agoras-whiteboard-505feae37ad6
推荐阅读
相关专栏
SDK 教程
164 文章
本专栏仅用于分享音视频相关的技术文章,与其他开发者和声网 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。