Interactive whiteboard and annotation for web

Introduction

The whiteboard is an important interactive technology for Real-Time Communication (RTC) applications. It enriches RTC scenarios and improves interactivity. It is valuable in scenarios such as online meetings, online education, remote collaboration, and interactive entertainment.

The DingRTC interactive whiteboard supports multiple platforms and is easy to integrate. It uses native rendering technology and provides low latency, excellent synchronization, low bandwidth usage, and a rich feature set. For more information about the APIs, see RtcWhiteboard and WhiteboardManager.

Additionally, you can create annotation instances from the interactive whiteboard to implement features such as video annotation, shared annotation, and external annotation.

Key features

• Use tools such as a brush, line, arrow, rectangle, ellipse, and text. Set styles such as color and thickness.

• Display images and use custom stamps.

• Edit or move graphics. Undo and redo operations.

• Transcode documents into images or PDFs for display. This feature must be enabled.

• Distinguish between roles and display collaborator names.

• Use multiple pages and turn pages on the whiteboard. Scroll through PDFs.

• Scale the canvas. Synchronize and follow views.

• Save screenshots. Use cloud recording and stream ingest.

Integration method

Concepts

Channel: A channel for a call. You can create multiple whiteboard or annotation objects in a call channel. The data for each whiteboard or annotation is independent. Users in the channel can join or leave a whiteboard or annotation session at any time.

Whiteboard: A whiteboard is uniquely identified by a whiteboardId. The ID can be up to 64 bytes and can contain uppercase letters, lowercase letters, digits, and underscores.

Annotation: An annotation is uniquely identified by an annotationId. The ID can be up to 64 bytes and can contain uppercase letters, lowercase letters, digits, and underscores.

Document (doc): A collection of related pages within a whiteboard, uniquely identified by a docId. A whiteboard can contain multiple documents, but only one document can be displayed at a time.

Page: A page or canvas of the whiteboard. Only one page of the whiteboard is displayed at a time.

How to integrate the interactive whiteboard and annotation

The interactive whiteboard and annotation can be used in two ways: standalone or with the DingRTC Web SDK.

• Standalone: Use a whiteboard manager instance to join a channel. This approach is suitable for scenarios where only the whiteboard or annotation is used.

• With DingRTC: Share the channel connection with a DingRTC instance. This is suitable for scenarios where DingRTC and the whiteboard or annotation are used together.

The following integration examples use ES6 syntax:

1. Obtain the whiteboard manager and join a channel

// Standalone
import { WhiteboardManager } from '@dingrtc/whiteboard';

const whiteboardManager = new WhiteboardManager();

await whiteboardManager.join({
  appId: '',
  userName: '',
  channel: '',
  uid: '',
  token: ''
});

// With DingRTC
import DingRTC from 'dingrtc';
import { WhiteboardManager } from '@dingrtc/whiteboard';

const client = DingRTC.createClient();

const whiteboardManager = new WhiteboardManager();
// The whiteboard and RTC share the same join link
client.register(whiteboardManager);

await client.join({
  appId: '',
  userName: '',
  channel: '',
  uid: '',
  token: '',
});

2. Create a whiteboard or annotation object

Specify the whiteboard or annotation ID and the initial configuration. Set the same width, height, and ID on all clients to ensure proper communication and a consistent user experience.

Whiteboard:

// Configure the whiteboard viewport width and height, and whether to limit the whiteboard size
const config = { width: 1280.0, height: 720.0, limit: true };
// Specify the whiteboard ID
const whiteboardId = 'xxxxxxx';
// Get the whiteboard instance
const whiteboard = whiteboardManager.getWhiteboard(whiteboardId);
// Initialize the view
whiteboard.initVision(config.width, config.height, config.limit); 

Annotation:

// Configure the annotation viewport width and height, and whether to limit the annotation size
const config = { width: 1280.0, height: 720.0, limit: true };
// Specify the annotation ID. Include the UIDs of the annotation creator and the video stream owner in the annotationId to facilitate cross-client communication.
const annotationId = 'xxxxxxx';
// Get the video annotation instance
const annotation = whiteboardManager.getAnnotation(annotationId, 'video');
// Initialize the view
annotation.initVision(config.width, config.height, config.limit); 

3. Open the whiteboard or annotation

Pass the DOM node of the whiteboard or annotation window and call open() to open the whiteboard.

The first user to open a whiteboard triggers the server to broadcast a "whiteboard-start" notification. New users who join the channel receive notifications for all existing whiteboards. Users can call open() after receiving the "whiteboard-start" notification.

The first user to open an annotation triggers the server to broadcast an "annotation-start" notification. New users who join the channel receive notifications for all existing annotations. Users can call open() after receiving the "annotation-start" notification.

Whiteboard:

// Open the whiteboard and join the session
await whiteboard.open(dom);
// "whiteboard-start" event
whiteboardManager.on("whiteboard-start", (whiteboardId) => {
  console.log(whiteboardId)
})

Annotation:

// Open the annotation and join the session
await annotation.open(dom);
// "annotation-start" event
whiteboardManager.on("annotation-start", (annotationId, sourceType) => {
  console.log(annotationId, sourceType)
})

4. Set whiteboard or annotation tools

import { ToolType } from '@dingrtc/whiteboard'

...
// Whiteboard
whiteboard.setToolType(ToolType.Pen);
whiteboard.setSelectedShapeStyle({
   lineWidth: 5,
});
...
// Annotation
annotation.setToolType(ToolType.Pen);
annotation.setSelectedShapeStyle({
   lineWidth: 5,
});

5. Start drawing.

You can use a mouse or touch gestures to draw or perform operations on the whiteboard or annotation view.

6. Close the whiteboard or annotation

You can call the close() method to close the whiteboard or annotation window. The session content continues to sync.

Call the leave() method to close the whiteboard or annotation window and disconnect from the session. This also stops content synchronization.

Call the stop() method to destroy the whiteboard or annotation session on the server. This method notifies all users that the session has ended and clears all session data. Use this method with caution.

When you leave the RTC channel, you also automatically leave the related whiteboard or annotation sessions.

// Close the whiteboard or annotation view
whiteboard.close();
annotation.close();

// Leave the whiteboard or annotation session
whiteboard.leave();
annotation.leave();

// End the whiteboard or annotation session
// The whiteboard or annotation data will be cleared. This affects all users in the channel.
whiteboard.stop();
annotation.stop();

// "whiteboard-stop" event
whiteboardManager.on("whiteboard-stop", (whiteboardId) => {
  console.log(whiteboardId)
})
// "annotation-stop" event
whiteboardManager.on("annotation-stop", (annotationId, sourceType) => {
  console.log(annotationId, sourceType)
})

When you leave a channel, call the whiteboardManager.clear() method to clear the current client-side whiteboard or annotation instances. This prevents historical data from affecting the next session. When you join the next session, call getWhiteboard() or getAnnotation() again to obtain new whiteboard or annotation instances.