Canvas Streaming: Cordova/Ionic SDK – Video API

Canvas Streaming helps you publish any UIView into the Room. Use addCanvasScreen() to start the canvas streaming and removeCanvasScreen() to stop canvas streaming.

Notes:

• You need to enable a Room to use Canvas Streaming in it. To enable Canvas Streaming, use { settings: { canvas: true; }} in the JSON Payload to create Room.
• Canvas Stream is carried on Stream ID# 102. The client endpoint must subscribe to this Stream ID to receive and play it locally.

Method: addCanvasScreen( viewOptions, successCallback, errorCallback )

Parameters:

• @param {JSON} viewOptions – Contains display attributes as given below:
  • height
  • width
  • margin_top
  • margin_left
  • margin_right
  • margin_bottom
  • position
• @param {CallableFunction} successCallback
• @param {CallableFunction} errorCallback

Event Listener:

onCanvasStarted – All the participants are notified that Canvas has started. To show Canvas, call addCanvasScreen() method inside this event listener.

// Add event Listener to listen canvas started in the room
window.EnxRtc.addEventListner("onCanvasStarted",
function (data)
{
console.log(JSON.stringify(data.data));
addCanvasScreen(); // Add Canvas
});

// To Add Canvas
var options = {
height: 130,
width: 100,
margin_top: 50,
margin_left: 0,
margin_right: 15,
margin_bottom: 10,
position: "top"
};
window.EnxRtc.addCanvasScreen(options, function (data) {
console.log('Excelsior succuss! ' + JSON.stringify(data.data));
}, function (err) {
console.log('Uh oh… error' + JSON.stringify(err));
});

Method: removeCanvasScreen( successCallback, errorCallback )

Parameters:

• @param {CallableFunction} successCallback
• @param {CallableFunction} errorCallback

Event Listener:

onCanvasStopped – All the participants are notified that Canvas has stopped. To remove the Canvas, call removeCanvasScreen() method inside this event listener.

// Add event Listener to listen canvas stopped in the room
window.EnxRtc.addEventListner("onCanvasStopped",function (data){
console.log(JSON.stringify(data.data));
removeCanvasScreen(); // Add Canvas
});

// To Remove Canvas
window.EnxRtc.removeCanvasScreen(function (data) {
console.log('Excelsior succuss! ' + JSON.stringify(data.data));}, function (err) {
console.log('Uh oh… error' + JSON.stringify(err));
});

---