{"id":4086,"date":"2021-11-08T15:59:16","date_gmt":"2021-11-08T07:59:16","guid":{"rendered":"https:\/\/www.enablex.io\/developer\/?page_id=4086"},"modified":"2025-02-24T17:47:06","modified_gmt":"2025-02-24T09:47:06","slug":"local-stream","status":"publish","type":"page","link":"https:\/\/doc.smartflomeet.ttns.in\/developer\/video-api\/client-api\/web-toolkit\/local-stream\/","title":{"rendered":"Local Stream: Web SDK &#8211; Video API"},"content":{"rendered":"\n<blockquote class=\"wp-block-quote\"><p>A Media Stream is created using accessible \/ allowed Media Devices to play locally or to publish into a connected Video Room. There are varied ways for stream initiation based on requirement.<\/p><\/blockquote>\n\n\n\n<h4>Table of Contents<\/h4>\n\n\n\n<ul><li><a href=\"#init-stream\">Initiate Local Stream<\/a><ul><li><a href=\"#init-stream-default-device\">Initiate Stream with default Devices<\/a><\/li><li><a href=\"#init-stream-specific-device\">Initiate Stream with specified Devices<\/a><\/li><li><a href=\"#device-access\">Handle Device Access for Audio\/Video Stream<\/a><\/li><li><a href=\"#init-stream-file-url\">Initiate Stream with Local File &amp; Remote URL<\/a><\/li><li><a href=\"#init-stream-screen-share\">Initiate Stream with Screen Share<\/a><\/li><li><a href=\"#init-stream-multi-video-layers\">Initiate Stream with Multiple Video Layers<\/a><\/li><li><a href=\"#error-codes\">Error Codes<\/a><\/li><\/ul><\/li><\/ul>\n\n\n\n<a name=\"init-stream\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Initiate Local Stream<\/h2>\n\n\n\n<p>To initialize a local Stream before you can publish it in the Room, instantiate the EnxStream Class that is a sub-class of EnxRtc Class using the EnxStream Constructor. A JSON Object consisting of Stream attributes such as media source specification and custom attributes is passed as a parameter to the constructor. <\/p>\n\n\n\n<p><strong>Method<\/strong>: <code> EnxRtc.EnxStream(StreamOpt).init()  <\/code><\/p>\n\n\n\n<p><strong>Parameters<\/strong>: <\/p>\n\n\n\n<p><code>StreamOpt<\/code> &#8211; A JSON Object with <a href=\"..\/..\/appendix\/#stream-options\">Stream Options<\/a> as given below:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> {\n     \"audio\": true,          \/\/ Whether to add Audio to stream\n     \"video\": true,          \/\/ Whether to add Video to stream\n     \"data\": true,           \/\/ Whether to add Data to stream\n     \"screen\": false,        \/\/ Whether to add Screen Share to stream\n     \"audioMuted\": true,     \/\/ Audio muted on entry to room  \n     \"videoMuted\": true,     \/\/ Video muted on entry to room  \n     \"attributes\": {         \/\/ Object to carry custom data  \n         \"custom1\": \"\"\n     },\n     \"options\": {}           \/\/ Video Player Options *\/\n     \"videoSize\": [minWidth, minHeight, maxWidth, maxHeight],\n     \"maxVideoLayers\": Number \/\/ Number of Video Layers in Stream\n                              \/\/ Enumerated Values: 1, 2, 3\n                              \/\/ 1=HD 720p layer only\n                              \/\/ 2=HD 720p &amp; SD 480p layers only\n                              \/\/ 3=HD 720p, SD 480p &amp; LD 240p\/180p layers\n                                     \n } <\/pre>\n\n\n\n<a name=\"init-stream-default-device\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Initiate Stream with Default Devices<\/h3>\n\n\n\n<p>To initiate a stream with&nbsp;audio,&nbsp;video using default media devices&nbsp;and&nbsp;data&nbsp;tracks, set the respective keys in the JSON Payload to <em>true.<\/em> You can also provide custom keys within&nbsp;<code>attributes<\/code> to define additional information for the Stream to carry.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var streamOpt = {\n     audio: true, \n     video: true, \n     data: true, \n     attributes: { name:'My-Stream-Name' }\n };\n\n var localStream = EnxRtc.EnxStream( streamOpt ).init();<\/pre>\n\n\n\n<a name=\"init-stream-specific-device\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Initiate Stream with specific Devices <\/h3>\n\n\n\n<p>You can initiate a Stream&nbsp;using&nbsp;either the browser\u2019s default Audio Device or&nbsp;by&nbsp;specifying&nbsp;the ID of&nbsp;the Audio Device connected to the device running the client application which requires you to get the Device IDs of all the connected devices. &nbsp;&nbsp;<\/p>\n\n\n\n<p>The&nbsp;<code>EnxRoom.getDevices()<\/code>&nbsp;method provides a list of all the Microphones connected to your Device. You can also use this method to build UI Element allowing users to choose an Audio Device from the list.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"> var streamOpt = {\n     audio: {deviceId: \"ID-AUDIO12345\"}, \n     video: {deviceId: \"ID-VIDEO67890\"}, \n     data: true, \n     attributes: { name:'My-Stream-Name' }\n };\n\n var localStream = EnxRtc.EnxStream( streamOpt ).init(); <\/pre>\n\n\n\n<p>When the Client Application is used in Mobile browser, it generally starts video stream using Rear Camera. To use the Front Camera instead of Rear Camera, use <code>facingMode: 'user'.<\/code> To use Rear Camera, use <code>facingMode: 'environment'.<\/code> <\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var streamOpt = {\n     audio: {deviceId: 'ID-AUDIO12345'}, \n     video: {facingMode: 'user'}, \n     data: true, \n     attributes: { name:'My-Stream-Name' }\n };\n\n var localStream = EnxRtc.EnxStream( streamOpt ).init();<\/pre>\n\n\n\n<a name=\"device-access\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Handle Device Access for Audio \/ Video Stream<\/h3>\n\n\n\n<p>The audio\/video stream initiation process requires access to the Microphone and the Camera to act as a source for the stream. The browser thus prompts the user to grant access to the application for one or both the devices (as applicable). The user must allow access for successful initiation of the stream.&nbsp;<\/p>\n\n\n\n<p><strong>Event Listeners:<\/strong><\/p>\n\n\n\n<ul><li><code>media-access-allowed<\/code> &#8211; When&nbsp;the&nbsp;user grants permission to the application to access the media devices.&nbsp;<\/li><li><code>media-access-denied<\/code> &#8211; When&nbsp;the&nbsp;user denies permission to the application to access the media devices.&nbsp;<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-preformatted\">stream.addEventListner('media-access-allowed', function (response) {\n\t\/* response = {\n\t\tstream: StreamObject,\n\t\ttype: \"media-access-allowed\"\n\t}*\/\n});\n\nstream.addEventListner('media-access-denied', function (response) {\n\t\/* response = { type: 'media-access-denied', msg: err }*\/\n});<\/pre>\n\n\n\n<a name=\"init-stream-file-url\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Initiate Stream with Local File &amp; Remote URL<\/h3>\n\n\n\n<p>You can also initiate a stream using Remote URL or Local File Path to a .mkv file.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var streamOpt = {\n      audio: true, \n      video: true, \n      url:\"rtsp:\/\/FQDN\/video-resource-path\"\n };\n\nvar streamOpt = {\n      audio: true, \n      video: true, \n      url:\"file:\/\/video-file-path\"\n };\n\nvar localStream = EnxRtc.EnxStream( streamOpt ).init();<\/pre>\n\n\n\n<a name=\"init-stream-screen-share\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3> Initiate Stream with Screen Share <\/h3>\n\n\n\n<p><a href=\"..\/screen-share\/\">Screen Share<\/a> on Chrome browser is supported by Chrome extension. Even though Portal SDK uses its own extension by default, you can specify a different Extension ID to start screen sharing on Chrome.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var streamOpt = {\n      screen: true, \n      data: true, \n      desktopStreamId:'EXTENSION_ID'\n};\n\nvar screenStream = EnxRtc.EnxStream( streamOpt ).init();<\/pre>\n\n\n\n<a name=\"init-stream-multi-video-layers\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3>Initiate Stream with Multiple Video Layers<\/h3>\n\n\n\n<p>To help stream subscribers receive the best video quality subject to the available bandwidth, stream publishers must ensure that their streams carry&nbsp;multiple video layers&nbsp;of different quality.&nbsp;The&nbsp;<strong>Auto Bandwidth Detection&nbsp;<\/strong>feature detects the subscriber\u2019s bandwidth and switches to the respective video layer for a smooth video experience.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">var streamOpt = {\n       audio: true, \n       video: true, \n       maxVideoLayers: 3 \/\/ Carry 3 layers, viz HD 720p, SD 480p &amp; LD 240p\/180p \n };\n\n\/\/ Enumerated Values for  maxVideoLayers: 1, 2, 3                               \n\/\/ 1=HD 720p layer only                               \n\/\/ 2=HD 720p &amp; SD 480p layers only                               \n\/\/ 3=HD 720p, SD 480p &amp; LD 240p\/180p layers \n\nvar screenStream = EnxRtc.EnxStream( streamOpt ).init();<\/pre>\n\n\n\n<a name=\"error-codes\"><\/a>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2>Error Codes<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Error Code<\/th><th>Description<\/th><\/tr><\/thead><tbody><tr><td>1142&nbsp;<\/td><td>Invalid Device Id<\/td><\/tr><tr><td>1143&nbsp;<\/td><td>Requested device not found<\/td><\/tr><tr><td>1144&nbsp;<\/td><td>Device Access denied<\/td><\/tr><tr><td>1145&nbsp;<\/td><td>Failed to start video source<\/td><\/tr><tr><td>1146&nbsp;<\/td><td>Failed to execute getUserMedia on MediaDevices<\/td><\/tr><tr><td>1147&nbsp;<\/td><td>Video width constraint not satisfied<\/td><\/tr><tr><td>1148&nbsp;<\/td><td>Video height constraint not satisfied<\/td><\/tr><tr><td>1149&nbsp;<\/td><td>Either Video height, width or Device ID not satisfied<\/td><\/tr><tr><td>1150<\/td><td>Unknown Reason<\/td><\/tr><\/tbody><\/table><\/figure>\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=\"..\/get-devices\/\">Get Media Devices<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p class=\"has-text-align-center\"><a href=\"https:\/\/www.enablex.io\/developer\/\">Index<\/a><\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column\">\n<p class=\"has-text-align-right\"><a href=\"\/developer\/video-api\/client-api\/web-toolkit\/room-connection\/\">Handle Room Connection<\/a> \u2192<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>A Media Stream is created using accessible \/ allowed Media Devices to play locally or to publish into a connected Video Room. There are varied ways for stream initiation based on requirement. Table of Contents Initiate Local Stream Initiate Stream with default Devices Initiate Stream with specified Devices Handle Device Access for Audio\/Video Stream Initiate Stream with Local File &amp; Remote URL Initiate Stream with Screen Share Initiate Stream with&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":"A Media Stream is created using accessible \/ allowed Media Devices to play locally or to publish into a connected Video Room. There are varied ways for stream initiation based on requirement. Table of Contents Initiate Local Stream Initiate Stream with default Devices Initiate Stream with specified Devices Handle Device Access for Audio\/Video Stream Initiate&hellip;","_links":{"self":[{"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4086"}],"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=4086"}],"version-history":[{"count":0,"href":"https:\/\/doc.smartflomeet.ttns.in\/developer\/wp-json\/wp\/v2\/pages\/4086\/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=4086"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}