{"id":4594,"date":"2021-11-30T15:00:47","date_gmt":"2021-11-30T07:00:47","guid":{"rendered":"https:\/\/www.enablex.io\/developer\/?page_id=4594"},"modified":"2025-02-21T13:38:10","modified_gmt":"2025-02-21T05:38:10","slug":"room-connection","status":"publish","type":"page","link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/video-api\/client-api\/react-native-toolkit\/room-connection\/","title":{"rendered":"Room Connection: React Native SDK &#8211; Video API"},"content":{"rendered":"\n<h4>Table of Contents<\/h4>\n\n\n\n<ul><li><a href=\"#init-room\">Initiate a Room<\/a><\/li><li><a href=\"#join-room\">Join a Room with Stream<\/a><\/li><li><a href=\"#disconnect-room\">Disconnect from a Room<\/a><\/li><li><a href=\"#disconnect-reconnect\">Handle Disconnection, Interruption &amp; Re-Connection<\/a><\/li><li><a href=\"#bandwidth-issues\">Handle Network Bandwidth Issues<\/a><\/li><\/ul>\n\n\n\n<a name=\"init-room\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Initiate a Room<\/h2>\n\n\n\n<p>React Native Toolkit is used by the Client End Point Application to connect to the Virtual Room hosted on the portal to establish a session. The process starts with initializing a Room Object using the <code>EnxRoom <\/code>Class. The <code>Enx.initRoom() <\/code>is used to initiate a Room.<\/p>\n\n\n\n<p><strong>Method<\/strong>: <code>initRoom()<\/code><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">async componentWillMount() {\n     Enx.initRoom();\n}<\/pre>\n\n\n\n<a name=\"join-room\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Join a Room with Stream<\/h2>\n\n\n\n<p>Connecting and joining a Room is a complex chain of events. You will need to ensure the previous event succeeded in order to proceed to the next event.  When connected, a Bi-Directional Communication Channel will be established between the End Point and Video Server over a Web Socket. Both entities communicate with each other using Socket Events. Communication would fail if any network issue disconnects the Web Socket. &#8216;<\/p>\n\n\n\n<p>The following basic steps are required to join room successfully<\/p>\n\n\n\n<ul><li>Initiate Room &amp; Connect<\/li><li>If connected, initiate Stream. <\/li><li>Publish Stream<\/li><\/ul>\n\n\n\n<p><code>Enx.joinRoom()<\/code> method comes as a handy tool for developer. It handles all complexities of connecting and joining the room. <\/p>\n\n\n\n<p>A connected Web Socket might get disconnected due to network issues. For disconnected end-points, Portal supports\u00a0<strong>Auto Re-connection<\/strong>\u00a0to the Session ensuring better user experience.<\/p>\n\n\n\n<p><strong>Tag<\/strong>: <code>&lt;EnxRoom<\/code> <code>token=TokenProps<\/code> <code>eventHandlers=EventProps<\/code> <code>localInfo=publishStreamProp<\/code> <code>roomInfo=roomInfo<\/code> <code>advanceOptionsInfo=advanceOptions&gt;<\/code><\/p>\n\n\n\n<p><strong>Props<\/strong>: <\/p>\n\n\n\n<ul><li><code>token <\/code>&#8211; JWT Token received through Video API Call<\/li><li><code>eventHandlers <\/code>&#8211; <ul><li> <code>roomConnected <\/code>&#8211; To the end-point when its connected to Room<\/li><li><code>roomError <\/code>&#8211; To the end-point when it fails to connect to Room<\/li><li><code>userConnected<\/code> &#8211; To notify all connected users that a new user is connected to Room<\/li><li><code>activeTalkerList<\/code> &#8211; To the end-point with list of Talkers after few seconds of receiving  <code>roomConnected<\/code>  event.  Refer <a href=\"#active-talkers\">how to handle Active Talkers<\/a> <\/li><\/ul><\/li><li><code>localInfo<\/code> &#8211; <a href=\"https:\/\/www.enablex.io\/developer\/video-api\/client-api\/appendix\/#stream-options\">Stream Initialization Meta Info<\/a> &#8211; Optional<\/li><li><code>roomInfo <\/code>&#8211;  Optional. JSON with Reconnection Options. JSON keys explained below:<ul><li><code>allow_reconnect<\/code>\u00a0Boolean. Default: true. Whether to enable Auto-Reconnect feature. If you set to false, Client End Point will not try reconnecting to the portal<\/li><li><code>number_of_attempts<\/code>\u00a0String. Min Value: 1. Max Value: Not specified, use any number. Default: 3. Maxi number of times Client End Point tries to reconnect to the portal<\/li><li><code>timeout_interval<\/code>\u00a0String. Timeout Interval in Millisecond to wait before attempting reconnect <\/li><\/ul><\/li><li><code>advanceOptions<\/code> &#8211; Optional. JSON with Advance Options. JSON Keys explained below: <ul><li><code>battery_updates<\/code> &#8211; Boolean. Pass true to receive battery updates\/information<\/li><li><code>notify_video_resolution_change<\/code> &#8211; Boolean. Pass true to receive Video Resolution Change Information<\/li><\/ul><\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;EnxRoom\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;token={this.props.token}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eventHandlers={this.roomEventHandlers}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;localInfo={this.state.publishStreamProp}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;roomInfo={this.state.enxRoomInfo}\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;advanceOptionsInfo={this.state.advanceOptions}\n&gt; \n\npublishStreamProp: {\n\taudio: true,\t \n\tvideo: true,\t \n\tdata: true\n}\n\nenxRoomInfo:&nbsp;{\n\tallow_reconnect:&nbsp;true,\n\tnumber_of_attempts:&nbsp;\"3\",\n\ttimeout_interval:&nbsp;\"15\"\n} \n\nadvanceOptions:&nbsp;{\n\tbattery_updates:&nbsp;true,\n\tnotify_video_resolution_change:&nbsp;true\n} \n\n\nthis.roomEventHandlers={\n\troomConnected:event=&gt; {\n\t\t\/\/ Connected. event receives Room Meta JSON\n\t},\n\troomError:event=&gt;{\n\t\t\/\/ Connection failed. Find error\n\t},\n\tuserConnected:event=&gt;{\n\t\t\/\/ A new user connected. user JSON has user information\n\t},\n\tactiveTalkerList:event=&gt;{\n\t\t\/\/ List of talkers in the Room\n\t\t\/\/ Received after room-connected\n\t}\n}<\/pre>\n\n\n\n<a name=\"disconnect-room\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Disconnect from a Room<\/h2>\n\n\n\n<p>A Client End Point can disconnect itself from the room to close its session. A disconnected End-Point will loose media and signalling socket immediately. <\/p>\n\n\n\n<p>Once disconnected, the Toolkit will receive callback  <code>roomDisconnected<\/code>&nbsp; for you to handle UI. Also, all connected users of the session will receive callback  <code>userDisconnected<\/code>&nbsp;so that they all can update the status of their UI.<\/p>\n\n\n\n<p><strong>Method<\/strong>: <code>Enx.disconnect()<\/code> &#8211; Without any parameter<\/p>\n\n\n\n<p><strong>Observers<\/strong>:<\/p>\n\n\n\n<ul><li> <code>roomDisconnected<\/code>&nbsp;  &#8211; To the user who is disconnected<\/li><li> <code>userDisconnected<\/code>&nbsp; &#8211; To all other connected users<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">Enx.disconnect();\n\nroomDisconnected:event=&gt;{\n     \/\/ You are disconnected\n}\n\nuserDisconnected: event=&gt;{\n     \/\/ Notifies all about one disconnected user\n     \/\/ event - Information of disconnected user\n}<\/pre>\n\n\n\n<a name=\"disconnect-reconnect\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Handle Disconnection, Interruption &amp; Re-Connection<\/h2>\n\n\n\n<p>A Client End Point is connected with the portal over Secured Web Socket. A connected End Point might get disconnected from the portal due to network issues. The End Point gets notified with an event\u00a0<code>connectionLost<\/code> and<code> connectionInterrupted<\/code>. <\/p>\n\n\n\n<p>Callbacks:<\/p>\n\n\n\n<ul><li><code>connectionLost<\/code> &#8211; When network connection is lost<\/li><li><code>connectedInterrupted<\/code> &#8211; When network connection is interrupted, e.g. switched from 4G to Wife and vice versa<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">connectionLost: event =&gt; {\n\t\/\/ event - connection disconnected\n\t\/\/ lost connectivity\n}\n\nconnectionInterrupted: event =&gt; {\n\t\/\/ event - connetion is interrupted \n\t\/\/ network changed. e.g. switched between WiFi, 4G \n}<\/pre>\n\n\n\n<p>For disconnected end-points, The portal supports\u00a0<strong>Auto Re-connection<\/strong>\u00a0to the Session ensuring better user experience. To use Automatic Re-Connection feature, you must <a href=\"#connect-room\"> <\/a><a href=\"#join-room\">join Room with Re-Connection options<\/a>. Note that Auto-Re-Connect doesn\u2019t work when: <\/p>\n\n\n\n<ul><li>Last Participant disconnected from Adhoc Room<\/li><li>User is dropped from Room by Moderator<\/li><li>User disconnects explicitly <\/li><\/ul>\n\n\n\n<p><strong>Callbacks:<\/strong><\/p>\n\n\n\n<ul><li><code>userReconnect\u00a0<\/code>\u2013 When End-Point successfully gets reconnected with the Portal<\/li><li><code>reconnect<\/code>\u00a0\u2013 When End-Point attempts to reconnect <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">reconnect: event =&gt; {\n\t\/\/ event - reconnecting...\n}\n\nuserReconnect: event =&gt; {\n\t\/\/ event - reconnected\n}<\/pre>\n\n\n\n<a name=\"bandwidth-issues\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Handle Network Bandwidth Issues<\/h2>\n\n\n\n<p>A Client End Point might experience Bandwidth throttling issues that might affect publishing and receiving remote stream and their quality. The Portal provides callbacks to notify such events to End-Point so that end-user can be notified. <\/p>\n\n\n\n<p><strong>Callbacks<\/strong>:<\/p>\n\n\n\n<ul><li><code>bandWidthUpdated<\/code> &#8211; To notify significant change in available bandwidth affecting publishing and receiving remote streams.<\/li><li><code>shareStateEvent<\/code> &#8211; To notify significant change in available bandwidth affecting publishing and receiving of screen share.<\/li><li><code>canvasStateEvent<\/code> &#8211; To notify significant change in available bandwidth affecting publishing and receiving of canvas streaming. <\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ Bandwidth Change affecting Streaming\nbandWidthUpdated: event =&gt; {\n\t\/* event = \n\t [{\t\"reason\" : \"receive bandwidth low\", \n\t\t\"streamId\" : streamId \n\t}]  *\/\n}\n\n\/\/ Bandwidth Change affecting Screen Share\nshareStateEvent: event =&gt; {\n\t\/* event = \n\t{\treason = bw; \n\t\tstreamId = 11; \n\t\tvideomuted = 1; \n\t} *\/\n}\n\n\/\/ Bandwidth Change affecting Canvas Streaming\ncanvasStateEvent: event =&gt; {\n\t\/* event = \n\t{\treason = bw; \n\t\tstreamId = 21; \n\t\tvideomuted = 1; \n\t} *\/\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=\"..\/local-stream\/\"><\/a><a href=\"..\/local-stream\/\">Create Local Stream<\/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=\"..\/publishing-local-stream\/\"><\/a><a href=\"..\/publishing-local-stream\/\">Publish Local Stream<\/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>Table of Contents Initiate a Room Join a Room with Stream Disconnect from a Room Handle Disconnection, Interruption &amp; Re-Connection Handle Network Bandwidth Issues Initiate a Room React Native Toolkit is used by the Client End Point Application to connect to the Virtual Room hosted on the portal to establish a session. The process starts with initializing a Room Object using the EnxRoom Class. The Enx.initRoom() is used to initiate&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":3747,"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 Initiate a Room Join a Room with Stream Disconnect from a Room Handle Disconnection, Interruption &amp; Re-Connection Handle Network Bandwidth Issues Initiate a Room React Native Toolkit is used by the Client End Point Application to connect to the Virtual Room hosted on the portal to establish a session. The process starts&hellip;","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4594"}],"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=4594"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4594\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/3747"}],"wp:attachment":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/media?parent=4594"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}