Table of Contents

Canvas Streaming allows you to use HTML5 Canvas Object to create stream and publish like a Whiteboard into the Room. To support Canvas Streaming in the Room, you need to enable canvas during Room Creation by setting: { canvas: true; }} in the JSON Payload. To receive Canvas Stream, Client Endpoint must subscribe to Stream ID#102.

Start Canvas Streaming

The EnxRoom.startCanvas() method is used to start canvas streaming.

Method: EnxRoom.startCanvas(CanvasOpt, Callback)

Parameter:

CanvasOpt – Configurable streaming options in JSON payload. The JSON keys are given below:

  • canvasSelector: The Canvas DOM Element ID to act as Stream Source.
  • fps: Numeric. Streaming Frame Rate range: 1-23.

Event Notification:

canvas-started – Notification to everyone in the Room when Canvas Streaming starts.

var CanvasOpt  = {
     "canvasSelector": "CanvasElementID", 
     "fps": 23
};

room.startCanvas(CanvasOpt, function(arg) {
     if(arg.result == 0) { // Success     
     }
     else { // Error arg.result == 1154 (Frame rate not supported)
     }
});

// Participant receives notification, finds stream ID 102 and plays
room.addEventListener("canvas-started", function (event) {
        var canvasStream = room.remoteStreams.get(102);
        if(canvasStream.stream !== undefined) {
             canvasStream.play("PlayerDiv");
        }
 });

Error Codes / Exceptions

CodeDescription
1154Frame Rate out of range. Valid Range: 1-23.
1157Canvas ID not found in HTML DOM.
1158Browser doesn’t support Canvas element in HTML DOM.
1159Failed to create stream as source Canvas ID not found in HTML DOM.

Stop Canvas Streaming

The EnxRoom.stopCanvas() method is used to stop Canvas Streaming.

Method: EnxRoom.stopCanvas(Callback)

Event Notification:

canvas-stopped – Notification to everyone in the Room when Canvas Streaming stops.

room.stopCanvas(CanvasOpt, function(arg) {
     if(arg.result == 0) { // Success     
     }
     else { // Error 
     }
});

// Participant receives notification 
room.addEventListener("canvas-stopped", function (event) {
        // Handle UI. Remove Player of Stream ID# 102
});

Force Stop Canvas Streaming

Availability: Web SDK 2.1.2+

If moderator wishes to force stop any ongoing Canvas Streaming by other user in the Room, he can do so by using EnxRoom.stopAllSharing() method. Note, this is Moderator exclusive feature, can’t be executed from Participant’s end point.

This method also force stops any ongoing Screen Share.

Class: EnxRoom

Method: EnxRoom.stopAllSharing(Callback)

Event Notification:

  • canvas-stopped – Notification to everyone in the Room when Canvas Streaming stops.
// Force Stop Canvas Streaming
room.stopAllSharing(function(result) {
});
 
// Notification to all when Canvas Streaming stops
room.addEventListener("canvas-stopped", function (event) {
     // Handle UI here
});