Whiteboard

HTML

Javascript

We also offer a shared whiteboard in real-time between clients bundled with ApiRTC.

Sample clients are available directly on Github. Please open them in parallel, to be able to follow the explanations in good conditions.
We have two clients exchanging drawings in real-time.

The first bit to notice it the creation of a canvas. This will be the underlying support for our whiteboard. The mouse events will be recorded and drawn locally, but also sent to the remote client and re-played in it’s canvas.

The creation of a “whiteBoardClient” is necessary. Then it can be used like the other clients in ApiRTC, for instance.

The whiteBoard client relyes on the room system to transmit messages between participants.
After creating the whiteBoardClient, the process is started in the roomCreationHandler.

After the creation, and invitation it will be possible for the client whose Id equals 1 to send commands to the client 2. In this example we bind the click event of some buttons to these orders.

Notice the use of the dataClient : this is used to send arbitrary data (in JSON format) to the remote client. It has one method (sendData) and one event (receiveData).

This allows us to make custom commands between clients. In this example, the client1 is able to send commands to the client 2. Several commands are available : “takeSnapshot”, “clearPaper”, “audioRecord”… Using the sendData function, the client is able to send orders to the other client.

The client 2 can then take specific actions when receiving the orders.

It is possible to define your own set of custom commands very easily by reusing the connection between the clients.
In this example, the client can for instance make a snapshot of it’s local stream, and upload it to our servers.
It will then be transmited to the other client, who will be able to draw on the photo it in real-time.

For the function to be called, the corresponding event listeners like the receiveDataHandler have to be registered on the remote client too.

Some events are related to the the possibility to take a snapshot. Check out the docs of the whiteBoardClient. It is useful to allow the remote client to draw on a static image. This has proven useful in our remote support solutions, for instance when a technician assists an operator.