{"id":4039,"date":"2021-11-03T13:15:58","date_gmt":"2021-11-03T05:15:58","guid":{"rendered":"https:\/\/www.enablex.io\/developer\/?page_id=4039"},"modified":"2022-04-08T20:00:44","modified_gmt":"2022-04-08T12:00:44","slug":"screen-share","status":"publish","type":"page","link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/video-api\/client-api\/web-toolkit\/screen-share\/","title":{"rendered":"Screen Share: Web SDK &#8211; Video API"},"content":{"rendered":"\n<h3>Table of Contents<\/h3>\n\n\n\n<ul><li><a href=\"#start-share\">Start Screen Share<\/a><\/li><li><a href=\"#stop-share\">Stop Screen Share<\/a><\/li><li><a href=\"#force-stop-share\">Force Stop other&#8217;s Screen Share<\/a><\/li><\/ul>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>To support Screen-Sharing in the Room, you need to enable Screen-Sharing 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>{ \"screen_share\": true; })<\/code>&nbsp;in the JSON Payload. To receive Shared Screen, you need to subscribe to the Screen-Share Stream ID# 101 and play it on the Video Player.<\/p>\n\n\n\n<a name=\"start-share\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Start Screen Sharing<\/h3>\n\n\n\n<p>The&nbsp;<code>EnxRoom.startScreenShare()<\/code>&nbsp;method is used to create a Screen-Sharing Stream @ 6fps to publish in the Room.&nbsp;Screen Sharing continues even when the Application runs in the background.<\/p>\n\n\n\n<p><strong>Class:<\/strong> EnxRoom<\/p>\n\n\n\n<p><strong>Method<\/strong>: <\/p>\n\n\n\n<ul><li><code>EnxRoom.startScreenShare(options, Callback)<\/code> &#8211; With Web SDK v2.1.2+<\/li><li><code>EnxRoom.startScreenShare(Callback)<\/code>  \/\/ With Web SDK &lt; v2.1.2<\/li><\/ul>\n\n\n\n<p><strong>Parameters:<\/strong> Introduced in Web SDK v2.1.2. <\/p>\n\n\n\n<ul><li><code>options <\/code>&#8211; JSON Object. Optional. To have custom meta-data to help out UI \/ UX requirement, also to have many other parameters affecting Screen Share.<ul><li><code>audio <\/code>&#8211;  Boolean. Default: false. To allow Screen Share to carry Audio Track from Microphone if underlying browser supports it.<\/li><li><code>layout <\/code>&#8211; String. Use this to pass some value to help define UI\/UX at receiving end.  e.g. pass &#8220;presenter&#8221; to show a Presenter Layout with Screen Share at the receiving end.<\/li><\/ul><\/li><\/ul>\n\n\n\n<p><strong>Event Notifications:<\/strong><\/p>\n\n\n\n<ul><li><span style=\"background-color: rgba(136, 136, 136, 0.2);\"> <\/span><code style=\"background-color: rgba(136, 136, 136, 0.2);\">share-started<\/code> &#8211; Notification to everyone in the Room when Screen-Sharing starts.<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">var ShareOption = {\n\t\"audio\": true,\n\t\"layout\": \"presenter\" \/* You define this key. You may\n\t\t\tlike to switch to Presenter Mode of UI at receiving end *\/\n};\n\n\/\/ Start Screen Share\nstreamShare = room.startScreenShare(ShareOption, function(result){ \n});\n\n\/\/ Notification to all when share starts\nroom.addEventListener(\"share-started\", function (event) {\n     \t\/\/ Layout to switch to: event.layout\n\t\/\/ Define your UI with this key\n\n\t\/\/ Get Stream# 101 which carries Screen Share \n     \tvar shared_stream = room.remoteStreams.get(101);  \n\n\t\/\/ Play in Player\n     \tshared_stream.play(\"div_id\", playerOptions); \n});<\/pre>\n\n\n\n<a name=\"stop-share\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Stop Screen Sharing<\/h3>\n\n\n\n<p>The&nbsp;<code>EnxRoom.stopScreenShare()<\/code>&nbsp;method is used to stop the ongoing Screen-Sharing.<\/p>\n\n\n\n<p><strong>Class:<\/strong> <code>EnxRoom<\/code><\/p>\n\n\n\n<p><strong>Methods:<\/strong> <\/p>\n\n\n\n<ul><li><code>EnxRoom.stopScreenShare(sharedStream, Callback)<\/code> <\/li><li>Alternate way to stop screen sharing<ul><li><code>EnxRoom.unpublish(sharedStream, Callback)<\/code> <\/li><\/ul><\/li><\/ul>\n\n\n\n<p><strong>Parameter:<\/strong><\/p>\n\n\n\n<p><code>sharedStream<\/code> &#8211; Screen-share Stream. <\/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);\">share-stopped<\/code> &#8211; Notification to everyone in the Room when Screen sharing stops. <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Stop the Shared Screen\nroom.stopScreenShare( streamShare, function(result) {\n});\n\n\/\/ Stop the Shared Screen - Alternate way\nroom.unpublish( streamShare, function(result, error) {      \n     if (result === undefined) {          \n         \/\/ Failed       \n     } else {\n          \/\/ Share Stopped\n     }  \n}); \n \n\/\/ Notification to all when share stops\nroom.addEventListener(\"share-stopped\", function (event) {\n     \/\/ Handle UI here\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>Description<\/th><\/tr><\/thead><tbody><tr><td>1143<\/td><td>Device not found. Screen Share disabled at OS.<\/td><\/tr><tr><td>1151<\/td><td>Another Screen-Share Stream active in the Room.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>Note:<\/strong><\/p>\n\n\n\n<ul><li>Application Share experience may differ from browser to browser. <\/li><li><strong>Google Chrome<\/strong> versions below 72 need an <a rel=\"noreferrer noopener\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/enablex-screen-sharing-ex\/apedaiecomcfkjdjbnkfcdafaikkdkeo?utm_source=chrome-ntp-icon\" target=\"_blank\">Extension<\/a> to be installed from Web Store to initiate Screen Share (at the Publisher end). <\/li><\/ul>\n\n\n\n<a name=\"force-stop-share\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Force Stop other&#8217;s Screen Sharing<\/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 Screen Share 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 Canvas Streaming.<\/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);\">share-stopped<\/code> &#8211; Notification to everyone in the Room when Screen sharing stops. <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Force Stop the Shared Screen\nroom.stopAllSharing(function(result) {\n});\n \n\/\/ Notification to all when share stops\nroom.addEventListener(\"share-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=\"..\/file-share\/\">File 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=\"..\/canvas-streaming\/\">Canvas Streaming<\/a>  \u2192 <\/p>\n<\/div>\n<\/div>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Table of Contents Start Screen Share Stop Screen Share Force Stop other&#8217;s Screen Share To support Screen-Sharing in the Room, you need to enable Screen-Sharing during&nbsp;Room Creation&nbsp;by setting:&nbsp;{ &#8220;screen_share&#8221;: true; })&nbsp;in the JSON Payload. To receive Shared Screen, you need to subscribe to the Screen-Share Stream ID# 101 and play it on the Video Player. Start Screen Sharing The&nbsp;EnxRoom.startScreenShare()&nbsp;method is used to create a Screen-Sharing Stream @ 6fps to publish&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 Screen Share Stop Screen Share Force Stop other&#8217;s Screen Share To support Screen-Sharing in the Room, you need to enable Screen-Sharing during&nbsp;Room Creation&nbsp;by setting:&nbsp;{ \"screen_share\": true; })&nbsp;in the JSON Payload. To receive Shared Screen, you need to subscribe to the Screen-Share Stream ID# 101 and play it on the Video Player.&hellip;","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4039"}],"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=4039"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4039\/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=4039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}