{"id":4043,"date":"2021-11-03T14:16:47","date_gmt":"2021-11-03T06:16:47","guid":{"rendered":"https:\/\/www.enablex.io\/developer\/?page_id=4043"},"modified":"2025-04-05T01:17:29","modified_gmt":"2025-04-04T17:17:29","slug":"canvas-streaming","status":"publish","type":"page","link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/video-api\/client-api\/web-toolkit\/canvas-streaming\/","title":{"rendered":"Canvas Streaming: Web SDK &#8211; Video API"},"content":{"rendered":"\n<h4>Table of Contents<\/h4>\n\n\n\n<ul><li><a href=\"#start-canvas-streaming\">Start Canvas Streaming<\/a><\/li><li><a href=\"#stop-canvas-streaming\">Stop Canvas Streaming<\/a><\/li><li><a href=\"#force-stop-canvas-streaming\">Force Stop Canvas Streaming<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>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&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.enablex.io\/developer\/video-api\/server-api\/rooms-route\/#create-room\" target=\"_blank\">Room Creation<\/a>&nbsp;by setting:&nbsp;<code>{ canvas: true; }}<\/code>&nbsp;in the JSON Payload. To receive Canvas Stream, Client Endpoint must subscribe to Stream ID#102.<\/p>\n\n\n\n<a name=\"start-canvas-streaming\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Start Canvas Streaming<\/h3>\n\n\n\n<p>The&nbsp;<code>EnxRoom.startCanvas()<\/code>&nbsp;method is used to start canvas streaming.<\/p>\n\n\n\n<p><strong>Method<\/strong>:  <code>EnxRoom.startCanvas(CanvasOpt, Callback)<\/code> <\/p>\n\n\n\n<p><strong>Parameter:<\/strong>  <\/p>\n\n\n\n<p><code>CanvasOpt<\/code> &#8211; Configurable streaming options in JSON payload. The JSON keys are given below:<\/p>\n\n\n\n<ul><li><code>canvasSelector<\/code>: The Canvas DOM Element ID to act as Stream Source.<\/li><li><code>fps<\/code>: <code>Numeric<\/code>. Streaming Frame Rate range: 1-23.<\/li><\/ul>\n\n\n\n<p><strong>Event<\/strong> <strong>Notification:<\/strong><\/p>\n\n\n\n<p><code>canvas-started<\/code> &#8211; Notification to everyone in the Room when Canvas Streaming starts.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var CanvasOpt  = {\n     \"canvasSelector\": \"CanvasElementID\", \n     \"fps\": 23\n};\n\nroom.startCanvas(CanvasOpt, function(arg) {\n     if(arg.result == 0) { \/\/ Success     \n     }\n     else { \/\/ Error arg.result == 1154 (Frame rate not supported)\n     }\n});\n\n\/\/ Participant receives notification, finds stream ID 102 and plays\nroom.addEventListener(\"canvas-started\", function (event) {\n        var canvasStream = room.remoteStreams.get(102);\n        if(canvasStream.stream !== undefined) {\n             canvasStream.play(\"PlayerDiv\");\n        }\n });<\/pre>\n\n\n\n<p><strong>Error Codes \/ Exceptions<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Code<\/th><th><strong>Description<\/strong><\/th><\/tr><\/thead><tbody><tr><td>1154<\/td><td>Frame Rate out of range. Valid Range: 1-23.<\/td><\/tr><tr><td>1157<\/td><td>Canvas ID not found in HTML DOM.<\/td><\/tr><tr><td>1158<\/td><td>Browser doesn&#8217;t support Canvas element in HTML DOM.<\/td><\/tr><tr><td>1159<\/td><td>Failed to create stream as source Canvas ID not found in HTML DOM.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<a name=\"stop-canvas-streaming\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Stop Canvas Streaming<\/h3>\n\n\n\n<p>The&nbsp;<code>EnxRoom.stopCanvas()<\/code>&nbsp;method is used to stop Canvas Streaming.<\/p>\n\n\n\n<p><strong>Method<\/strong>: <code>EnxRoom.stopCanvas(Callback)<\/code><\/p>\n\n\n\n<p><strong>Event Notification<\/strong>: <\/p>\n\n\n\n<p><code>canvas-stopped<\/code> &#8211; Notification to everyone in the Room when Canvas Streaming stops.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">room.stopCanvas(CanvasOpt, function(arg) {\n     if(arg.result == 0) { \/\/ Success     \n     }\n     else { \/\/ Error \n     }\n});\n\n\/\/ Participant receives notification \nroom.addEventListener(\"canvas-stopped\", function (event) {\n        \/\/ Handle UI. Remove Player of Stream ID# 102\n});<\/pre>\n\n\n\n<a name=\"force-stop-canvas-streaming\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Force Stop Canvas Streaming<\/h3>\n\n\n\n<p><strong>Availability:<\/strong> Web SDK 2.1.2+ <\/p>\n\n\n\n<p>If moderator wishes to force stop any ongoing Canvas Streaming by other user in the Room, he can do so by using <code>EnxRoom.stopAllSharing()<\/code> method. Note, this is Moderator exclusive feature, can&#8217;t be executed from Participant&#8217;s end point.<\/p>\n\n\n\n<p>This method also force stops any ongoing Screen Share.<\/p>\n\n\n\n<p><strong>Class:<\/strong> <code>EnxRoom<\/code><\/p>\n\n\n\n<p><strong>Method:<\/strong> <code>EnxRoom.stopAllSharing(Callback)<\/code> <\/p>\n\n\n\n<p><strong>Event Notification:<\/strong><\/p>\n\n\n\n<ul><li> <code style=\"background-color: rgb(255, 255, 255);\">canvas-stopped<\/code> &#8211; Notification to everyone in the Room when Canvas Streaming stops. <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Force Stop Canvas Streaming\nroom.stopAllSharing(function(result) {\n});\n \n\/\/ Notification to all when Canvas Streaming stops\nroom.addEventListener(\"canvas-stopped\", function (event) {\n     \/\/ Handle UI here\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=\"..\/break-out-room\/\">Break-Out Room  <\/a>\u2192 <\/p>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Table of Contents Start Canvas Streaming Stop Canvas Streaming Force Stop Canvas Streaming 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&nbsp;Room Creation&nbsp;by setting:&nbsp;{ canvas: true; }}&nbsp;in the JSON Payload. To receive Canvas Stream, Client Endpoint must subscribe to Stream ID#102. Start Canvas Streaming The&nbsp;EnxRoom.startCanvas()&nbsp;method is&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3724,"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":"Table of Contents Start Canvas Streaming Stop Canvas Streaming Force Stop Canvas Streaming 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&nbsp;Room Creation&nbsp;by setting:&nbsp;{ canvas: true; }}&nbsp;in the JSON Payload. To&hellip;","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4043"}],"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=4043"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4043\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/3724"}],"wp:attachment":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/media?parent=4043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}