Whiteboard

EnableX Whiteboard is an independent library shared over GitHub and through the Developer Center. It helps application developers to quickly deploy a Whiteboard, with streaming and collaboration among session participants.

• The EnableX Whiteboard has all basic tools inbuilt
• It is developed using Open Source Fabric.js

Note: To extend this feature and create a richer set of Tools, you are free to do so using the Fabric.js library.

How to Integrate?

Follow these steps:

• Download the EnableX Whiteboard Library .
• Extract the downloaded library.
• Move the EnxWB.js and EnxWB.js.map files to a designated folder within Virtual Root.
• Use the EnxWB.js file in your HTML through SCRIPT Tag.
• Refer to the following Methods section to know how to initiate, create, stream, and collaborate on Whiteboard among other participants in your Session.

SDK Methods

Initiate Whiteboard

Create an Object of EnxWb Class with a JSON Payload to define Whiteboard UI Components.

Sample Code

var wbObject  =  new EnxWb(
	{	canvasId: 'wb',		// id of the Canvas DOM Element 
		initialWidth: 1000,
		initialHeight: 500,
		scheme : 'default'
	}
);

Parameter: A JSON Object, attributes explained below:

Var wbObject  =  new EnxWb(
	{	canvasId: 'wb',					// id of the canvas 
		initialWidth: 1000,
		initialHeight: 500,
		scheme : 'custom',
		custom: {
			bgColor : 'red',			// WB Backbround 
			toolbarBGColor : 'black',	// Toolbar Background 
			brushColor:'black',			// Default Brush Color  
			icon : {					// Toolbar Icon definition  
				size: 'medium',			// Enum: small, large, medium  
				type: 'rounded-square', // Enum:  square,rounded-square  
				BGColor: '#f3f3f3',		// Tool Background  
				FGColor: '#000000',		// Tool Foreground  
				border: '1px solid grey'// Tool Border  
			}
		}
	}
);

Create Whiteboard

You need to draw the Whiteboard to make it appear in the HTML DOM using the EnxWb.create() method.

• Method: EnxWb.create( EnxRoom-Object )
• Parameter:

  Parameter	Description
  EnxRoom-Object	It is the Room Object with which the Whiteboard gets connected for streaming and collaboration

wbObject.create(roomObject);

Start/Stop Whiteboard Streaming

If you want to start streaming your Whiteboard, the contents are viewable to remote participants as a video stream and playable in a Video Player. The streamed Whiteboard may also be recorded for future reference.

**Methods: **

• EnxWb.startStreaming(): To start streaming
• EnxWb.stopStreaming(): To stop streaming

wbObject.startStreaming();
wbObject.stopStreaming();

Note: The Whiteboard Toolbar has toggle buttons to start / stop streaming. Methods explained above are called toggling the buttons. However, these methods are made accessible to create your own UI to start / stop streaming.

Start/Stop Whiteboard Collaboration

If you want to collaborate using Whiteboard with other participants, they can use the Whiteboard. When you share the Whiteboard with others, the UI Component appears in the View in HTML DOM.

Methods

• EnxWb.startCollaboration() : To start collaboration with others
• EnxWb.stopStreaming() : To stop collaboration with others

wbObject.startCollaboration();
wbObject.stopCollaboration();

Note: The Whiteboard Toolbar has toggle buttons to start/stop Whiteboard Collaboration. The methods explained above are called by toggling these buttons. However, these methods are accessible to you to create your UI to start / stop Collaboration.

Whiteboard Collaboration with designated Participant

If you want to collaborate using Whiteboard with a specific participant, they will also be able to use the Whiteboard. When you share the Whiteboard with a participant, the UI Component appears in the View in HTML DOM, at the designated participants' endpoint.

Method

Method: EnxWb.shareWith(clientId) : To start collaboration with participant specified by clientId parameter Parameters:

• clientId : Client ID of the participant whom you wish to grant Collaboration Rights

wbObject.shareWith(clientId);

Note: When you collaborate using Whiteboard with all participants, you still need to use the shareWith() method to share the whiteboard with any new participant who has joined the session after the initial startCollaboration() was invoked. To do so, refer to the following sample code:

// A new user connected. user JSON has user information
room.addEventListener("user-connected", function(event) {
	// Share the Whiteboard for Collaboration
	wbObject.shareWith(event.clientId);
});