Несмотря на то, что все интеграции Agora имеют приличную документацию.
Одна из головоломок, с которой я недавно столкнулся, заключалась в том, как писать цифровыми ручками, такими как 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>
присоединиться к whiteboard.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"
})
Это связано с тем, что по умолчанию Agora устанавливает тип устройства как «рабочий стол», который принимает только ввод с мыши и клавиатуры.
Но когда мы используем цифровое перо, оно запускает событие касания, а не событие нажатия кнопки мыши. Вот почему это не работает.
После добавления этого параметра ваша цифровая ручка должна работать
Если это помогло вам. Пожалуйста, дайте мне знать в комментариях. Я буду рад, если это спасло чей-то день, как был бы спасен мой, если бы такая статья существовала.
