How to use Digital Pen on Agora’s Whiteboard
Despite the fact that all of Agora’s integrations have decent documentation.
One of the head-scratchers that I recently came across was how to write using digital pens like Wacom on the whiteboard. So let’s start with some code, shall we?
To set up a quick whiteboard instance here is a minimal code
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);});
You can read more about how to create a room and how to generate a room token from here:- https://docs.agora.io/en/whiteboard/join_whiteboard_room_web?platform=Web
Running the above code you will get this. You will be able to draw using your mouse.
But if you try to draw on this using any digital pen it won’t work.
Solution
If you are someone like me who doesn’t have a digital pen but needs to support this feature for your users who are going to use digital pens. Here is how you do it
deviceType: "surface"While creating the whitewebSdk object you need to pass the parameter 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"})
This is because by default Agora sets the deviceType as “desktop” which only accepts mouse and keyboard inputs.
But when we use a digital pen it triggers an on-touch event rather than a mouse-down event. This is why it doesn’t work.
After adding this parameter your digital pen should work
If this helped you. Please let me know in the comments. I will be glad if it saved someone’s day like mine would have been saved if such an article existed.
