{"id":4796,"date":"2021-12-08T17:26:31","date_gmt":"2021-12-08T09:26:31","guid":{"rendered":"https:\/\/www.enablex.io\/developer\/?page_id=4796"},"modified":"2022-04-08T13:53:59","modified_gmt":"2022-04-08T05:53:59","slug":"canvas-streaming","status":"publish","type":"page","link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/video-api\/client-api\/cordova-toolkit\/canvas-streaming\/","title":{"rendered":"Canvas Streaming: Cordova\/Ionic SDK &#8211; Video API"},"content":{"rendered":"\n<p>Canvas Streaming helps you publish any UIView into the Room. Use <code>addCanvasScreen()<\/code> to start the canvas streaming and <code>removeCanvasScreen()<\/code> to stop canvas streaming.<\/p>\n\n\n\n<p><strong>Notes:<\/strong><\/p>\n\n\n\n<ul><li>You need to enable a Room to use Canvas Streaming in it. To enable Canvas Streaming, use&nbsp;<code>{ settings: { canvas: true; }}<\/code>&nbsp;in the JSON Payload to create Room.<\/li><li>Canvas Stream is carried on&nbsp;<strong>Stream ID# 102<\/strong>. The client endpoint must subscribe to this Stream ID to receive and play it locally.<\/li><\/ul>\n\n\n\n<p><strong>Method:<\/strong> <code>addCanvasScreen( viewOptions, successCallback, errorCallback )<\/code><\/p>\n\n\n\n<p><strong>Parameters:<\/strong><\/p>\n\n\n\n<ul><li><code>@param {JSON} viewOptions <\/code>&#8211; Contains display attributes as given below:<ul><li><code>height<\/code><\/li><li><code>width<\/code><\/li><li><code>margin_top<\/code><\/li><li><code>margin_left<\/code><\/li><li><code>margin_right<\/code><\/li><li><code>margin_bottom<\/code><\/li><li><code>position<\/code><\/li><\/ul><\/li><li><code>@param {CallableFunction} successCallback<\/code><\/li><li><code>@param {CallableFunction} errorCallback<\/code><\/li><\/ul>\n\n\n\n<p><strong>Event Listener:<\/strong><\/p>\n\n\n\n<p><code>onCanvasStarted<\/code> &#8211; All the participants are notified that Canvas has started. To show Canvas, call <code>addCanvasScreen<\/code>() method inside this event listener. <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Add event Listener to listen canvas started in the room\nwindow.EnxRtc.addEventListner(\"onCanvasStarted\",\nfunction (data)\n{\nconsole.log(JSON.stringify(data.data));\naddCanvasScreen(); \/\/ Add Canvas\n});\n\n\/\/ To Add Canvas\nvar options = {\nheight: 130,\nwidth: 100,\nmargin_top: 50,\nmargin_left: 0,\nmargin_right: 15,\nmargin_bottom: 10,\nposition: \"top\"\n};\nwindow.EnxRtc.addCanvasScreen(options, function (data) {\nconsole.log('Excelsior succuss! ' + JSON.stringify(data.data));\n}, function (err) {\nconsole.log('Uh oh\u2026 error' + JSON.stringify(err));\n});<\/pre>\n\n\n\n<p><strong>Method:<\/strong> <code>removeCanvasScreen( successCallback, errorCallback )<\/code><\/p>\n\n\n\n<p><strong>Parameters:<\/strong><\/p>\n\n\n\n<ul><li><code>@param {CallableFunction} successCallback<\/code><\/li><li><code>@param {CallableFunction} errorCallback<\/code><\/li><\/ul>\n\n\n\n<p><strong>Event Listener:<\/strong><\/p>\n\n\n\n<p><code>onCanvasStopped<\/code> &#8211; All the participants are notified that Canvas has stopped. To remove the Canvas, call removeCanvasScreen() method inside this event listener.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Add event Listener to listen canvas stopped in the room\nwindow.EnxRtc.addEventListner(\"onCanvasStopped\",function (data){\nconsole.log(JSON.stringify(data.data));\nremoveCanvasScreen(); \/\/ Add Canvas\n});\n\n\/\/ To Remove Canvas\nwindow.EnxRtc.removeCanvasScreen(function (data) {\nconsole.log('Excelsior succuss! ' + JSON.stringify(data.data));}, function (err) {\nconsole.log('Uh oh\u2026 error' + JSON.stringify(err));\n});<\/pre>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator is-style-wide\"\/>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\">\n<p>\u2190 <a href=\"..\/screen-share\/\">Screen Share<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p class=\"has-text-align-center\"><a href=\"..\/\">Index<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p class=\"has-text-align-right\"><a href=\"..\/recording\/\"><\/a><a href=\"..\/recording\/\">Record Session<\/a> \u2192<a href=\"\/developer\/how-to-use\/\"><\/a><\/p>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&nbsp;{ settings: { canvas: true; }}&nbsp;in the JSON Payload to create Room. Canvas Stream is carried on&nbsp;Stream ID# 102. The client endpoint must subscribe to this Stream ID to receive&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3719,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ub_ctt_via":""},"featured_image_src":null,"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"featured":false,"featured-large":false},"uagb_author_info":{"display_name":"vcxdevwpadmin","author_link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/author\/vcxdevwpadmin\/"},"uagb_comment_info":0,"uagb_excerpt":"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&nbsp;{ settings: { canvas: true; }}&nbsp;in the JSON Payload to create Room. Canvas Stream is&hellip;","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4796"}],"collection":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/comments?post=4796"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4796\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/3719"}],"wp:attachment":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/media?parent=4796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}