Whiteboard : Conversation with invitation

Here is a description of the different steps to create a whiteboard and exchange drawings in real time between users

Start Whiteboard : offline or online

Offline Whiteboard

To start an offline Whiteboard, create a UserAgent and then call startWhiteboard() method. Get Whiteboard object to apply customisation with ua.getWhiteboardClient();

        ua.startWhiteboard('paper');
        //Getting whiteboardClient in order to be able to set UI parameters
        whiteBoardClient = ua.getWhiteboardClient();
        whiteBoardClient.setFocusOnDrawing(true);
    

Online Whiteboard

Start and join a conversation

Check our tutorial on Conversation if needed to get more details.

In our sample, we have also added the possibility to invite users to a conversation.

Start an online Whiteboard :

Start the Whiteboard using connectedConversation.startNewWhiteboardSession()

        connectedConversation.startNewWhiteboardSession('paper');
        //Getting whiteboardClient in order to be able to set UI parameters
        whiteBoardClient = ua.getWhiteboardClient();
        whiteBoardClient.setFocusOnDrawing(true);
        showWhiteboardFctArea();
    

Use the different whiteboard features :

Activate touchscreen to use Whiteboard on mobile or tablets :

        whiteBoardClient.toggleTouchScreen();
    

Clean the canvas :

        whiteBoardClient.deleteHistory();
    

Select the drawing tool :

Tool can be selected between : pen, erase, arrow, ellipse or rectangle

        whiteBoardClient.setDrawingTool(tool);
    

Select the brush size :

        whiteBoardClient.setBrushSize(size);
    

Select the brush color :

        whiteBoardClient.setBrushColor(color);
    

Add a text annotation :

        //set the scale
        whiteBoardClient.setScale(scaleValue);
        //set text offset
        whiteBoardClient.setOffset(OffsetX, OffsetY);
        //Print the text
        whiteBoardClient.printSharedText(OffsetX, OffsetY, TextValue, 20);
    

Undo last drawing :

        whiteBoardClient.undo();
    

Redo last undone drawings :

        whiteBoardClient.redo();
    

Live Demo