{"id":4369,"date":"2021-11-18T14:20:17","date_gmt":"2021-11-18T06:20:17","guid":{"rendered":"https:\/\/www.enablex.io\/developer\/?page_id=4369"},"modified":"2025-02-20T19:32:56","modified_gmt":"2025-02-20T11:32:56","slug":"communicating-with-video-embed","status":"publish","type":"page","link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/video\/low-code-video-embed\/communicating-with-video-embed\/","title":{"rendered":"Communicating with Video Embed"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote\"><p>A communication channel is provided between IFRAME Embed and the Parent Window, allowing application developers to enhance engagement within the session and customize the UI\/UX. Developers can execute predefined actions in the Embed from the Parent Window and receive notifications about statuses and events occurring in the Embed.<\/p><\/blockquote>\n\n\n\n<h3>Table of Contents<\/h3>\n\n\n\n<ul><li><a href=\"#solution\">How it works?<\/a><\/li><li><a href=\"#actions\">Actions<\/a><ul><li><a href=\"#actions-notification-subscription\">Notification Subscription<\/a><\/li><li><a href=\"#actions-room-connection\">Room Connection<\/a><\/li><\/ul><ul><li><a href=\"#actions-stream-updates\">Stream Updates<\/a><\/li><li><a href=\"#actions-live-streaming\">Live Streaming<\/a><\/li><li><a href=\"#actions-ui-ux\">UI\/UX<\/a><\/li><li><a href=\"#actions-messaging\">Messaging<\/a><\/li><\/ul><\/li><li><a href=\"#notifications\">Notifications<\/a><ul><li><a href=\"#notify-subscription\">Subscription<\/a><\/li><li><a href=\"#notify-room-connection\">Room Connection<\/a><\/li><li><a href=\"#notify-user-connection\">User Connection<\/a><\/li><li><a href=\"#notify-stream-updates\">Stream Updates<\/a><\/li><li><a href=\"#notify-live-streaming\">Live Streaming<\/a><\/li><li><a href=\"#notify-media-access\">Media Access<\/a><\/li><li><a href=\"#notify-messaging\">Messaging<\/a><\/li><\/ul><\/li><\/ul>\n\n\n\n<a name=\"solution\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>1 How it works?<\/h2>\n\n\n\n<p>JS Framework of Messaging between Browser Window Objects (parent, child, named-window) would help in this process. A window sends a message with JSON Data to other window which listens to incoming message and takes action on it.<\/p>\n\n\n\n<p>So, Embed will listen to Message sent by Parent Page to take action on it and will also generate Message to Parent Page to notify various events. <\/p>\n\n\n\n<p>To understand the overall workflow, follow the section below explanations with Code Samples:<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>1.1 Action from Parent Window<\/h3>\n\n\n\n<p>Example: Parent Window sends  message to Embed to Start Streaming:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">const message = JSON.stringify({\n    action: 'start-live-streaming',\n    data: {\n\t\"name\": \"Youtube\",\n\t\"rtmp_endpoint\": \"rtmp:\/\/a.rtmp.youtube.com\/live2\",\n\t\"rtmp_key\": \"XOXOXO\"\n\t}\n});\n\nEmbedIFrameElementID.contentWindow.postMessage(message, '*'); \n\/\/ EmbedIFrameElementID is the \"id\" of IFRAME Tag that uses Low Code Meeting URL<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>1.2 Listener at Parent Window<\/h3>\n\n\n\n<p>Example: Parent Window listens to notification message from Embed and takes appropriate action:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">window.addEventListener(\u2018notification\u2019, function (e) {\n\t\/\/ Get the sent data\n\tvar evtdata = e;\n\n\t\/\/ If you encode the notification  in JSON before sending them,\n\t\/\/ then decode here\n\tvar data_decoded = JSON.parse(evtdata);\n\t\n\t\/\/ data_decoded example:\n\t\/*\n\t{\n\t    notification: \u2018room-connected',\n\t    data: {\n\t\t\"room_name\": \"John\u2019s Room\",\n\t\t\"conf_num\": \"XOXOXO\"\n\t\t}\n\t}\n\t*\/\n\n\tswitch (data_decoded.notification) {\n\t\tcase \u2018room-connected\u2019:\n\t\t\tdoDBPost(data_decoded.data);\n\t\t\tbreak;\n\t\tcase 'other-notice':\n\t\t\tdo_other_notice()\n\t\t\tbreak;\n\t}\n});<\/pre>\n\n\n\n<a name=\"actions\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>2 Actions<\/h2>\n\n\n\n<p>Here are the list of Actions that can be passed from Parent Window to Embed in the form of JSON Object. Note that this Document only provides the format of JSON Object that is used effectively in message passing  to get an action executed. <\/p>\n\n\n\n<a name=\"actions-notification-subscription\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.1 Notification Subscription<\/h3>\n\n\n\n<p>Parent window must subscribe for Event Notifications from Embed to start receiving. Embed will keep sending Notifications of subscribed &#8220;Notification Groups&#8221; to Parent until unsubscribed. <\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.1.1 Subscribe to start receiving notifications<\/h3>\n\n\n\n<p>This is to subscribe to receive notifications of various events and action status from the Embed. You need to subscribe to one or more Notification Group(s) to start receive all event notifications under that group. <\/p>\n\n\n\n<p>e.g. if you subscribe to <code>room-connection<\/code> group, embed will notify you of room connection, disconnection, reconnection etc.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"action\": \"subscribe-notification\",\n  \"data\": [   \/* one or more notification group *\/\n    \"live-streaming\",\n    \"room-connection\",\n    \"user-connection\",\n    \"stream-updates\",  \n    \"messaging\"\n  ]\n}<\/pre>\n\n\n\n<p><strong>Data Object:<\/strong> It contains an array of notification groups to subscribe to receive notifications related to that group until unsubscribed.<\/p>\n\n\n\n<ul><li><code>live-streaming<\/code> &#8211; To receive start \/ stop live streaming notifications<\/li><li><code>room-connection<\/code> &#8211; To receive notification related to room connection, disconnection, re-connection etc.<\/li><li>user-connection &#8211; To receive notification related to any user connecting to room or disconnecting from room.<\/li><li><code>stream-updates<\/code> &#8211; To receive notification related to local and remote stream attribute, configuration updates.<\/li><li><code>messaging <\/code>&#8211; To receive notification related to custom signaling, chat (coming up) etc. <\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.1.2 Unsubscribe to stop receiving notifications<\/h3>\n\n\n\n<p>This is to unsubscribe from receiving notifications of various events from Embed. You may opt-out from one or more notification groups by passing multiple group names. <\/p>\n\n\n\n<p>To unsubscribe notification from one or more notification groups, post the following:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"action\": \"unsubscribe-notification\",\n  \"data\": [\n    \"live-streaming\",\n    \"room-connection\",\n    \"user-connection\",\n    \"stream-updates\",  \n    \"messaging\"\n  ]\n}<\/pre>\n\n\n\n<p><strong>Data Object:<\/strong> It contains an array of notification groups to unsubscribe to stop receiving notifications related to that group.<\/p>\n\n\n\n<ul><li><code>live-streaming<\/code>&#8211; To stop receiving start \/ stop live streaming notifications<\/li><li><code>room-connection<\/code> &#8211; To stop receiving notification related to room connection, disconnection, re-connection etc.<\/li><li>user-connection &#8211; To stop receiving notification related to any user connecting to room or disconnecting from room.<\/li><li><code>stream-updates<\/code> &#8211; To stop receiving notification related to local and remove stream attribute, configuration updates.<\/li><li><code>messaging <\/code>&#8211; To stop receiving notification related to custom signaling, chat (coming up) etc. <\/li><\/ul>\n\n\n\n<p>To unsubscribe notification from all notification groups, post the following:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"action\": \"unsubscribe-notification\",\n  \"data\": []\n}<\/pre>\n\n\n\n<a name=\"actions-room-connection\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.2 Room Connection<\/h3>\n\n\n\n<h3>2.2.1 Disconnect from Room<\/h3>\n\n\n\n<p>This is to disconnect from the Virtual Room. Once disconnected, the Embed is not longer in Video Session and will not able to communicate with the Virtual Room anyway until it rejoins the Session.<\/p>\n\n\n\n<p>To disconnect from Session with a Prompt to confirm exit from Session, send the following message:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"action\": \"disconnect-room\",\n  \"data\": {\n    \"alert\": true\n  }\n}<\/pre>\n\n\n\n<p><strong>Data Object:<\/strong><\/p>\n\n\n\n<ul><li><code>alert<\/code>&#8211; Boolean. Use <code>true <\/code>to disconnect session only if user confirms through given Prompt Window<\/li><\/ul>\n\n\n\n<p>To disconnect from Session immediately without a Prompt to confirm exit from Session, send the following message:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"action\": \"disconnect-room\",\n  \"data\": {\n    \"alert\": false\n  }\n}<\/pre>\n\n\n\n<p><strong>Data Object:<\/strong><\/p>\n\n\n\n<ul><li><code>alert<\/code>&#8211; Boolean. Use <code>false<\/code> to disconnect immediately without any prompt<\/li><\/ul>\n\n\n\n<a name=\"actions-stream-updates\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.3 Stream Updates<\/h3>\n\n\n\n<p>These set of actions are related to updated local and remote stream media tracks, attributes and configuration.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.3.1 Mute Video<\/h3>\n\n\n\n<p>This is to stop Video from Local Stream. The Stream immediately drops Video Track until unmuted. <\/p>\n\n\n\n<p>To mute Video, send the following message:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"action\": \"mute-video\"\n}<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.3.2 Unmute Video<\/h3>\n\n\n\n<p>This is to unmute Video in Local Stream. The Stream immediately adds Video Track. <\/p>\n\n\n\n<p>To unmute Video, send the following message:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"action\": \"unmute-video\"\n}<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.3.3 Mute Audio<\/h3>\n\n\n\n<p>This is to mute Audio from Local Stream. The Stream immediately drops Audio Track until unmuted. <\/p>\n\n\n\n<p>To mute Audio, send the following message:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"action\": \"mute-audio\"\n}<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.3.4 Unmute Audio<\/h3>\n\n\n\n<p>This is to unmute Audio in Local Stream. The Stream immediately adds Audio Track. <\/p>\n\n\n\n<p>To unmute Audio, send the following message:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"action\": \"unmute-audio\"\n}<\/pre>\n\n\n\n<a name=\"actions-live-streaming\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.4 Live Streaming<\/h3>\n\n\n\n<p>These set of actions are related to Live Streaming of ongoing Video Session to an RTMP Endpoint for content distribution to larger audience.<\/p>\n\n\n\n<p><strong>Note:<\/strong> These are Host only features. So, these messages must be sent from the Moderator\/Host Side of UI only.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.4.1 Start Live Streaming<\/h3>\n\n\n\n<p>This is to start Live Streaming of ongoing Video Session to an RTMP Endpoint. <\/p>\n\n\n\n<p>To start Live Streaming, send the following message:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"action\": \"start-live-streaming\",\n  \"data\": {\n    \"name\": \"Youtube\",\n    \"rtmp_endpoint\": \"rtmp:\/\/a.rtmp.youtube.com\/live2\",\n    \"rtmp_key\": \"XOXOXO\"\n  }\n}<\/pre>\n\n\n\n<p><strong>Data Object:<\/strong><\/p>\n\n\n\n<ul><li><code>name <\/code>&#8211; Plain Text to describe the Stream<\/li><li><code>rtmp_endpoint<\/code> &#8211; The RTMP Endpoint URL where the stream to be sent<\/li><li><code>rtmp_key<\/code> &#8211; The RTMP Key<\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.4.2 Stop Live Streaming<\/h3>\n\n\n\n<p>This is to stop ongoing Live Streaming of the Video Session from all RTMP End Points.<\/p>\n\n\n\n<p>To stop Live Streaming, send the following message:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"action\": \"stop-live-streaming\"\n}<\/pre>\n\n\n\n<a name=\"actions-ui-ux\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.5 UI \/ UX <\/h3>\n\n\n\n<p>These set of actions are related to UI and UX of the Video Embed on ongoing Video Session.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.5.1 Change Video Layout<\/h3>\n\n\n\n<p>This is to change VIdeo Grid Layout either to Gallery View or Leader View at RTMP End Point and\/or each End Point.  <\/p>\n\n\n\n<p>To change Layout, send the following message:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"action\": \"change-layout\",\n  \"data\": {\n    \"target\": \"rtmp\",\n    \"layout\": \"leader\"  }\n}<\/pre>\n\n\n\n<p><strong>Data Object:<\/strong><\/p>\n\n\n\n<ul><li><code>target<\/code>&#8211; Values: rtmp, all. When &#8220;rtmp&#8221; is used, the layout is affected at RTMP End Point only. When &#8220;all&#8221; is used, the layout is affected at all End Points.<\/li><li><code>layout<\/code> &#8211; Values: leader, gallery. The layout to be used.<\/li><\/ul>\n\n\n\n<a name=\"actions-messaging\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.6 Messaging <\/h3>\n\n\n\n<p>These set of actions are related to signaling and messaging among users in the Video Session..<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>2.6.1 Send Custom Signaling <\/h3>\n\n\n\n<p>This allows sending a custom data structure to all users in a Video Session. The system does not interact with individual endpoints but simply broadcasts the message among users as a signaling mechanism. It is recommended to use a limited-size custom data structure for broadcasting.<\/p>\n\n\n\n<p>Define your data structure and send the following message for broadcasting:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n\t\"action\": \"signal\",\n\t\"data\": {\n\t\t\/* Define your custom object here *\/\n\t}\n}<\/pre>\n\n\n\n<p><strong>Data Object:<\/strong><\/p>\n\n\n\n<ul><li><code>data<\/code>&#8211; Object. All Keys are be defined by you to broadcast among users.<\/li><\/ul>\n\n\n\n<a name=\"notifications\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>3 Notifications<\/h2>\n\n\n\n<p>Video Embed sends out notifications to Parent Window to notify various events, status of actions in the Video Session. Parent Window must subscribe to receive notification, otherwise notifications are not generated by the Video Embed.<\/p>\n\n\n\n<p>Parent Window must listen to the Events and take appropriate action.<\/p>\n\n\n\n<a name=\"notify-subscription\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.1 Subscription<\/h3>\n\n\n\n<p>This notification group need not be subscribed. and area always available. These notifications are generated by Video Embed as a response of Notification Subscription and Subscription process. <\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.1.1 Notification Subscribed<\/h3>\n\n\n\n<p>This is to notify that Parent Window has successfully subscribed to receive one or more notification groups.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"notification-subscribed\",\n  \"data\": [\n    \"live-streaming\",\n    \"room-connection\"\n  ]\n}<\/pre>\n\n\n\n<p><strong>Data Object:<\/strong> It is an array of notification groups to which the Parent Window has subscribed to receive. <\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.1.2 Notification Unsubscribed<\/h3>\n\n\n\n<p>This is to notify that Parent Window has successfully unsubscribed from receiving one or more notification groups.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"notification-unsubscribed\",\n  \"data\": [\n    \"live-streaming\",\n    \"room-connection\"\n  ]\n}<\/pre>\n\n\n\n<p><strong>Data Object:<\/strong> It is an array of notification groups to which the Parent Window has subscribed to receive. <\/p>\n\n\n\n<a name=\"notify-room-connection\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.2 Room Connection<\/h3>\n\n\n\n<p>This is a Room Connection Notification Group. This covers notification related to room connection, disconnection and auto-reconnection into the Room. To receive some of these notifications, Parent Page need to subscribe to <code>room-connection<\/code>  Notification Group.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.2.1 Room Connected<\/h3>\n\n\n\n<p>This is to notify that the Video Embed is connected to Virtual Room for communication. Parent page needn&#8217;t subscribe to receive this notification. <\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"room-connected\",\n  \"data\": {\n    \"room_name\": \"John's Room\",\n    \"conf_num\": \"XOXOXO\"\n  }\n}<\/pre>\n\n\n\n<p><strong>Data Object:<\/strong><\/p>\n\n\n\n<ul><li><code>room_name<\/code>  &#8211; Name of the Virtual Room<\/li><li><code>conf_num<\/code> &#8211; Conference Number of Session ID. It uniquely identifies the Video Session<\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.2.2 Room Not Connected<\/h3>\n\n\n\n<p>This is to notify that the Video Embed is not connected to Virtual Room for communication. Parent page needn&#8217;t subscribe to receive this notification. <\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"room-not-connected\",\n  \"data\": {}\n}<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.2.3 Room Disconnected<\/h3>\n\n\n\n<p>This is to notify that the Video Embed is disconnected from the Video Session. No longer communication is feasible hence forth until the Embed rejoins or reconnects the Virtual Room.   Parent page needn&#8217;t subscribe to receive this notification.  <\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n\t\"notification\": \"room-disconnected\",\n\t\"data\": {\n\t\t\"message\": \"Reason for disconnection\"\n\t}\n}<\/pre>\n\n\n\n<p>You may get following reasons for disconnection:<\/p>\n\n\n\n<ul><li>Session expired<\/li><li>Room access denied<\/li><li>Failed to reconnect<\/li><li>Disconnected by Moderator<\/li><li>Unexpected disconnection<\/li><li>Normal disconnect<\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.2.4 Room Re-connected<\/h3>\n\n\n\n<p>This is to notify that the Video Embed is reconnected to the Virtual Room. The Embed resumed communication. Parent page needs to subscribe to <code>room-notification<\/code> group to receive this notification.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"room-reconnected\"\n}<\/pre>\n\n\n\n<a name=\"notify-user-connection\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.3 User Connection<\/h3>\n\n\n\n<p>This is a User Connection Notification Group. This covers notification related to user connection and disconnection. To receive some of these notifications, Parent Page need to subscribe to <code>user-connection<\/code>  Notification Group.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.3.1 UserConnected<\/h3>\n\n\n\n<p>This is to notify that the a new user got connected to the Virtual Room.  <\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"user-connected\",\n  \"data\": {\n    \"clientId\": \"XOXO\",\n    \"name\": \"John\",\n    \"role\": \"participant\"\n  }\n}<\/pre>\n\n\n\n<p><strong>Data Object:<\/strong><\/p>\n\n\n\n<ul><li><code>clientId <\/code>&#8211; The Unique ID assigned to each user connected to Video Room.<\/li><li><code>name <\/code>-Name of the user connected the Video Room.<\/li><li><code>role <\/code>-Role of the user. It may have the following enumerated data <code>moderator, participant, viewer, audience<\/code><\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.3.2 UserDisconnected<\/h3>\n\n\n\n<p>This is to notify that the a user got disconnected from the Virtual Room.  <\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"user-disconnected\",\n  \"data\": {\n    \"clientId\": \"XOXO\",\n    \"name\": \"John\",\n    \"role\": \"participant\"\n  }\n}<\/pre>\n\n\n\n<p><strong>Data Object:<\/strong><\/p>\n\n\n\n<ul><li><code>clientId <\/code>&#8211; The Unique ID assigned to each user connected to Video Room.<\/li><li><code>name <\/code>-Name of the user disconnected from the Video Room.<\/li><li><code>role <\/code>-Role of the user. It may have the following enumerated data <code>moderator, participant, viewer, audience<\/code><\/li><\/ul>\n\n\n\n<a name=\"notify-stream-updates\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.4 Stream Updates<\/h3>\n\n\n\n<p>This is a Stream Updates Notification Group. This covers notification related to local stream configuration, track, attribute updates. To receive one or all notification, Parent Page must subscribe to <code>stream-updates<\/code> Notification Group.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.4.1 Video Muted<\/h3>\n\n\n\n<p>This is to notify that the Video is muted or stopped in the Local stream.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"video-muted\"\n}<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.4.2 Video Unmuted<\/h3>\n\n\n\n<p>This is to notify that the Video is unmuted or restarted in the Local stream.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"video-unmuted\"\n}<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.4.3 Audio Muted<\/h3>\n\n\n\n<p>This is to notify that the Audio is muted or stopped in the Local stream.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"audio-muted\"\n}<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.4.4 Audio Unmuted<\/h3>\n\n\n\n<p>This is to notify that the Audio is unmuted or restarted in the Local stream.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"audio-unmuted\"\n}<\/pre>\n\n\n\n<a name=\"notify-live-streaming\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.5 Live Streaming<\/h3>\n\n\n\n<p>This is a Live Streaming Notification Group. To receive one or all notification, Parent Page must subscribe to <code>live-streaming<\/code> Notification Group.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.5.1 Live Streaming Started<\/h3>\n\n\n\n<p>This is to notify that the Live Streaming has started.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n    \"notification\": \"live-streaming-started\",\n    \"data\": {\n\t\"name\": \"Youtube\",\n\t\"rtmp_endpoint\": \"rtmp:\/\/a.rtmp.youtube.com\/live2\",\n\t\"rtmp_key\": \"XOXOXO\"\n\t}\n}<\/pre>\n\n\n\n<p><strong>Data Object:<\/strong><\/p>\n\n\n\n<ul id=\"block-2adbf326-e4e1-4394-b116-0971c1f3e5d8\"><li><code>name <\/code>&#8211; Plain Text to describe the Stream<\/li><li><code>rtmp_endpoint<\/code> &#8211; The RTMP Endpoint URL where the stream to be sent<\/li><li><code>rtmp_key<\/code> &#8211; The RTMP Key<\/li><\/ul>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.5.2 Live Streaming Stopped<\/h3>\n\n\n\n<p>This is to notify that ongoing Live Streaming of the Video Session to all RTMP End Points are stopped.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n    \"notification\": \"live-streaming-stopped\",\n    \"data\": {}\n}<\/pre>\n\n\n\n<a name=\"notify-media-access\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.6 Media Access<\/h3>\n\n\n\n<p>This is a Media Access Notification Group. This covers notification related to Media Device Accessibility.  These notifications are always available, Parent Page needn&#8217;t subscribe to the Notification Group.<\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.6.1 Media Access Denied<\/h3>\n\n\n\n<p>This is to notify that the Video Embed failed to get Media Device Access (Media Device is a general term covers Camera and Microphone Devices). An end point may or may not join Video Room if Media Device Access is denied.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\/\/ When room not connected\n{\n  \"notification\": \"media-access-denied\",\n  \"data\": {\n    \"message\": \"Media access denied. Room not connected.\"\n  }\n}\n\n\/\/ When room is connected without Media Device Access\n{\n  \"notification\": \"media-access-denied\",\n  \"data\": {\n    \"message\": \"\"Mic and Camera access denied\"\n  }\n}<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.6.2 Camera Access Denied<\/h3>\n\n\n\n<p>This is to notify that the Video Embed failed to get Camera Device Access. An end point may or may not join Video Room if Camera Device Access is denied.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"camera-access-denied\",\n  \"data\": {}\n}<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.6.3 Camera Access Allowed<\/h3>\n\n\n\n<p>This is to notify that the Video Embed is allowed access to Camera Device.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"camera-access-allowed\",\n  \"data\": {}\n}<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.6.4 Microphone Access Denied<\/h3>\n\n\n\n<p>This is to notify that the Video Embed failed to get Microphone Device Access. An end point may or may not join Video Room if Microphone Device Access is denied.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"mic-access-denied\",\n  \"data\": {}\n}<\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.6.5 Microphone Access Allowed<\/h3>\n\n\n\n<p>This is to notify that the Video Embed is allowed access to Microphone Device.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"notification\": \"mic-access-allowed\",\n  \"data\": {}\n}<\/pre>\n\n\n\n<a name=\"notify-messaging\"><\/a>\n\n\n\n<div style=\"height:40px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.7 Messaging<\/h3>\n\n\n\n<p> This is a Messaging Group. This covers notification related to inter user messaging and signaling.  Parent Page need to subscribe to &#8220;messaging&#8221; Notification Group to receive these notifications. <\/p>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>3.7.1 Custom Signal Received<\/h3>\n\n\n\n<p>This is to notify that you have received a signal with custom data structure to be used by your Parent Window to use it anyway you want.<\/p>\n\n\n\n<p><strong>JSON Message:<\/strong> Parent Window receives the following notification<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n\t\"notification\": \"signal-received\",\n\t\"data\": {\n\t\t\/* Custom data here *\/\n\t}\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>A communication channel is provided between IFRAME Embed and the Parent Window, allowing application developers to enhance engagement within the session and customize the UI\/UX. Developers can execute predefined actions in the Embed from the Parent Window and receive notifications about statuses and events occurring in the Embed. Table of Contents How it works? Actions Notification Subscription Room Connection Stream Updates Live Streaming UI\/UX Messaging Notifications Subscription Room Connection User&hellip; <\/p>\n","protected":false},"author":1,"featured_media":0,"parent":2363,"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":"A communication channel is provided between IFRAME Embed and the Parent Window, allowing application developers to enhance engagement within the session and customize the UI\/UX. Developers can execute predefined actions in the Embed from the Parent Window and receive notifications about statuses and events occurring in the Embed. Table of Contents How it works? Actions&hellip;","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4369"}],"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=4369"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4369\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/2363"}],"wp:attachment":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/media?parent=4369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}