{"id":1881,"date":"2022-04-04T12:07:05","date_gmt":"2022-04-04T06:37:05","guid":{"rendered":"https:\/\/www.enablex.io\/insights\/?p=1881"},"modified":"2023-10-11T17:25:32","modified_gmt":"2023-10-11T11:55:32","slug":"video-streaming-app-using-screen-share-using-react-native","status":"publish","type":"post","link":"https:\/\/www.enablex.io\/insights\/video-streaming-app-using-screen-share-using-react-native\/","title":{"rendered":"Building A Video Streaming App Using Screen Share Using React Native Toolkit"},"content":{"rendered":"\n<p>While video meetings make communication more personal, screen sharing makes it more collaborative. With businesses embracing remote and hybrid work where one-to-one and multiparty video calls are a norm, screen sharing becomes all the more crucial.<\/p>\n\n\n\n<p>This post is for you if you\u2019re looking to build a video calling application with screen sharing using React Native.<\/p>\n\n\n\n<p>We have provided a detailed step-by-step guide to explain how you can embed the screen sharing feature in the existing application using EnableX React-Native toolkit.<\/p>\n\n\n\n<p><strong>Technical Pre-requisites <\/strong><\/p>\n\n\n\n<ul>\n<li>Nodejs framework<\/li>\n\n\n\n<li>JDK<\/li>\n\n\n\n<li>Android Studio (recommended to use LTS version)<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What Is EnableX React Native SDK? <\/strong><\/h2>\n\n\n\n<p>The EnableX-React Native SDK is used to build hybrid real-time communication applications for Android and iOS-based mobile devices.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Creating Project in EnableX<\/strong><\/h3>\n\n\n\n<p>First, you need to create a project on the EnableX portal. Here are the steps are given below:<\/p>\n\n\n\n<ul>\n<li>Go to the EnableX portal. If you do not have an account, <a href=\"https:\/\/portal.enablex.io\/cpaas\/trial-sign-up\/?utm_source=Quora+-+Vikash&amp;utm_medium=Quora+-+Vikash&amp;utm_campaign=Quora+-+Vikash&amp;utm_id=Quora+-+Vikash\">Signup here<\/a>.<\/li>\n\n\n\n<li>Next, \u201cCreate Projects\u201d, enter relevant information as required.<\/li>\n\n\n\n<li>You get the option to copy App ID &amp; APP Key when you create the project the first time.<\/li>\n<\/ul>\n\n\n\n<p>In case the project has already been created, users need to go to the Video Project, then select the option: \u2018I like to Code\u2019 and then they can view App ID &amp; App Key.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Creating a ReactNative Project <\/strong><\/h3>\n\n\n\n<p>Now, you need to create a ReactNative project. Follow the steps given below:<\/p>\n\n\n\n<ol>\n<li>\n<h4><strong>Installing the EnableX React Native SDK<\/strong><\/h4>\n<\/li>\n<\/ol>\n\n\n\n<p>To install the EnableX-ReactNative SDK, open the project, navigate to the ReactNative Project directory and run the following command:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"145\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/1.-command.PNG-1024x145.png\" alt=\"command.PNG\" class=\"wp-image-1882\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/1.-command.PNG-1024x145.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/1.-command.PNG-300x42.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/1.-command.PNG-768x108.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/1.-command.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<ol start=\"2\">\n<li>\n<h4><strong> Importing the Reactive Native Class<\/strong><\/h4>\n<\/li>\n<\/ol>\n\n\n\n<p>Once the installation is done successfully, import \u2018enx-rtc-react-native\u2019 in the class where you want to access the EnableX capability.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"116\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/2.-command2.PNG-1024x116.png\" alt=\"command2.PNG\" class=\"wp-image-1883\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/2.-command2.PNG-1024x116.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/2.-command2.PNG-300x34.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/2.-command2.PNG-768x87.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/2.-command2.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<ol start=\"3\">\n<li>\n<h4><strong> How To Start And Stop Screen Sharing<\/strong><\/h4>\n<\/li>\n<\/ol>\n\n\n\n<p>EnableX-ReactNative SDK is used to start and stop screen sharing, while events are used to handle acknowledgements. To start screen sharing, use the following function:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"147\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/3.-startScreenShare.PNG-1024x147.png\" alt=\"startScreenShare\" class=\"wp-image-1884\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/3.-startScreenShare.PNG-1024x147.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/3.-startScreenShare.PNG-300x43.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/3.-startScreenShare.PNG-768x110.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/3.-startScreenShare.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>To stop screen sharing, use the following function:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"139\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/4.-stopScreenShare.PNG-1024x139.png\" alt=\"stop Screen Share\" class=\"wp-image-1885\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/4.-stopScreenShare.PNG-1024x139.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/4.-stopScreenShare.PNG-300x41.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/4.-stopScreenShare.PNG-768x105.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/4.-stopScreenShare.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>Once the user starts or stops the screen sharing feature, EnableX-ReactNative SDK acknowledges the event by sending event notifications to other participants:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"285\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/5.-ack.PNG-1024x285.png\" alt=\"ack\" class=\"wp-image-1886\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/5.-ack.PNG-1024x285.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/5.-ack.PNG-300x83.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/5.-ack.PNG-768x214.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/5.-ack.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<ol start=\"4\">\n<li>\n<h4><strong> Installing Foreground Service<\/strong><\/h4>\n<\/li>\n<\/ol>\n\n\n\n<p>Foreground Service is required whenever an application needs to perform a task which is also noticeable by users even when they\u2019re not directly interacting with the app.<\/p>\n\n\n\n<p>Therefore, you need to install the Foreground Service. It is required to use the screen sharing feature in an app. &nbsp;Here are the steps you need to follow to start the foreground services:<\/p>\n\n\n\n<p>A. Use the following command to add dependency in foreground services:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"121\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/6.-installForeground_Service.PNG-1024x121.png\" alt=\"installForeground_Service\" class=\"wp-image-1887\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/6.-installForeground_Service.PNG-1024x121.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/6.-installForeground_Service.PNG-300x35.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/6.-installForeground_Service.PNG-768x91.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/6.-installForeground_Service.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>B. Add permissions in \u201cAndroidManifest.xml File\u201d:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"151\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/7.-permission.PNG-1024x151.png\" alt=\"permission\" class=\"wp-image-1888\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/7.-permission.PNG-1024x151.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/7.-permission.PNG-300x44.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/7.-permission.PNG-768x113.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/7.-permission.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>C. Register for the Foreground Services in the AndroidManifest.xml File:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"412\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/8.-service.PNG-1024x412.png\" alt=\"service\" class=\"wp-image-1889\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/8.-service.PNG-1024x412.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/8.-service.PNG-300x121.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/8.-service.PNG-768x309.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/8.-service.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>D. Go to the MainActivity class and add a variable:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"121\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/9-variable.PNG-1024x121.png\" alt=\"variable\" class=\"wp-image-1890\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/9-variable.PNG-1024x121.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/9-variable.PNG-300x35.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/9-variable.PNG-768x91.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/9-variable.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>Now, override onNewIntent and onStart function inside the MainActivity class.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"437\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/10.newIntent.PNG-1024x437.png\" alt=\"new Intent\" class=\"wp-image-1891\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/10.newIntent.PNG-1024x437.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/10.newIntent.PNG-300x128.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/10.newIntent.PNG-768x328.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/10.newIntent.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"502\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/11.-start.PNG-1024x502.png\" alt=\"start\" class=\"wp-image-1892\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/11.-start.PNG-1024x502.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/11.-start.PNG-300x147.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/11.-start.PNG-768x377.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/11.-start.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>F.&nbsp; MainActivty.java class is a vital component of an Android application through which activities are launched.<\/p>\n\n\n\n<p>Here is how it\u2019s used to add foregroundEmitter function.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"575\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/12.forgroundEmitter.PNG-1024x575.png\" alt=\"forground Emitter\" class=\"wp-image-1893\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/12.forgroundEmitter.PNG-1024x575.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/12.forgroundEmitter.PNG-300x168.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/12.forgroundEmitter.PNG-768x431.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/12.forgroundEmitter.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<ol start=\"5\">\n<li>\n<h4><strong> Override onActivityResult<\/strong><\/h4>\n<\/li>\n<\/ol>\n\n\n\n<p>Next, you need to override the onActiveityResult function, which is inside the MainActivity class:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"361\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/13.-onActivityResult.PNG-1024x361.png\" alt=\"onActivityResult\" class=\"wp-image-1894\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/13.-onActivityResult.PNG-1024x361.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/13.-onActivityResult.PNG-300x106.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/13.-onActivityResult.PNG-768x271.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/13.-onActivityResult.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\">6. Inside the Color.xml file, set the notification color specified in AndroidManifest.xml file:<\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"154\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/14.-color.PNG-1024x154.png\" alt=\"\" class=\"wp-image-1896\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/14.-color.PNG-1024x154.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/14.-color.PNG-300x45.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/14.-color.PNG-768x116.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/14.-color.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<h4 class=\"wp-block-heading\">7. How to Start Foreground Service<\/h4>\n\n\n\n<p>A. Register a Headless Task (a way to run JavaScript tasks in the background) using&nbsp; .js file:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"136\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/15.-registerServiceInJS.PNG-1024x136.png\" alt=\"register Service In JS\" class=\"wp-image-1897\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/15.-registerServiceInJS.PNG-1024x136.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/15.-registerServiceInJS.PNG-300x40.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/15.-registerServiceInJS.PNG-768x102.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/15.-registerServiceInJS.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>B. Add a task as shown below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"271\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/16.-addTask.PNG-1024x271.png\" alt=\"add Task\" class=\"wp-image-1898\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/16.-addTask.PNG-1024x271.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/16.-addTask.PNG-300x79.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/16.-addTask.PNG-768x203.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/16.-addTask.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>C. To start the Foreground Service class, use the function given below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"250\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/17.-startService.PNG-1024x250.png\" alt=\"\" class=\"wp-image-1899\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/17.-startService.PNG-1024x250.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/17.-startService.PNG-300x73.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/17.-startService.PNG-768x187.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/17.-startService.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<ol start=\"8\">\n<li>\n<h4>How to Stop The Foreground Service<\/h4>\n<\/li>\n<\/ol>\n\n\n\n<p>A. To stop the Foreground Service, you\u2019ll need to remove the task:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"113\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/18.-removeTask.PNG-1024x113.png\" alt=\"remove Task\" class=\"wp-image-1900\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/18.-removeTask.PNG-1024x113.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/18.-removeTask.PNG-300x33.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/18.-removeTask.PNG-768x85.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/18.-removeTask.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>B. Now you can stop the Foreground Service:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"121\" src=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/19.-stopService.PNG-1024x121.png\" alt=\"stop service\" class=\"wp-image-1901\" srcset=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/19.-stopService.PNG-1024x121.png 1024w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/19.-stopService.PNG-300x35.png 300w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/19.-stopService.PNG-768x91.png 768w, https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/19.-stopService.PNG.png 1374w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n<p>Ahoy! you made it. You\u2019re now ready to run the application with screen sharing.<\/p>\n\n\n\n<p>To look at more examples &amp; sample codes, visit our <a href=\"https:\/\/github.com\/EnableX\/EnableX-Video-Chat-Application-Sample--with-SwiftUI\">GitHub repository<\/a>.<\/p>\n\n\n\n<p>Build something exciting!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While video meetings make communication more personal, screen sharing makes it more collaborative. With businesses embracing remote and hybrid work where one-to-one and multiparty video calls are a norm, screen sharing becomes all the more crucial. This post is for you if you\u2019re looking to build a video calling application with screen sharing using React &#8230;<\/p>\n","protected":false},"author":12,"featured_media":1902,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[122,93],"tags":[51,192,138,30,50,75,137,191],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.4 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build Video Streaming App with Screenshare on React Native<\/title>\n<meta name=\"description\" content=\"Build a video streaming app using react native and need to add screen sharing? Use our easy to use API and add screensharing in one click!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.enablex.io\/insights\/video-streaming-app-using-screen-share-using-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Video Streaming App with Screenshare on React Native\" \/>\n<meta property=\"og:description\" content=\"Build a video streaming app using react native and need to add screen sharing? Use our easy to use API and add screensharing in one click!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.enablex.io\/insights\/video-streaming-app-using-screen-share-using-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Insights about video API, SMS API; WhatsApp for Business API\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-04T06:37:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-11T11:55:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/Building-Video-Streaming-App-Using-Screen-Share-Using-React-Native.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"529\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Subrat Thayal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@subratothayal\" \/>\n<meta name=\"twitter:site\" content=\"@enablexio\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Subrat Thayal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build Video Streaming App with Screenshare on React Native","description":"Build a video streaming app using react native and need to add screen sharing? Use our easy to use API and add screensharing in one click!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.enablex.io\/insights\/video-streaming-app-using-screen-share-using-react-native\/","og_locale":"en_US","og_type":"article","og_title":"Build Video Streaming App with Screenshare on React Native","og_description":"Build a video streaming app using react native and need to add screen sharing? Use our easy to use API and add screensharing in one click!","og_url":"https:\/\/www.enablex.io\/insights\/video-streaming-app-using-screen-share-using-react-native\/","og_site_name":"Insights about video API, SMS API; WhatsApp for Business API","article_published_time":"2022-04-04T06:37:05+00:00","article_modified_time":"2023-10-11T11:55:32+00:00","og_image":[{"width":1500,"height":529,"url":"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2022\/03\/Building-Video-Streaming-App-Using-Screen-Share-Using-React-Native.webp","type":"image\/webp"}],"author":"Subrat Thayal","twitter_card":"summary_large_image","twitter_creator":"@subratothayal","twitter_site":"@enablexio","twitter_misc":{"Written by":"Subrat Thayal","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.enablex.io\/insights\/video-streaming-app-using-screen-share-using-react-native\/#article","isPartOf":{"@id":"https:\/\/www.enablex.io\/insights\/video-streaming-app-using-screen-share-using-react-native\/"},"author":{"name":"Subrat Thayal","@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/person\/2623a27aa4d49f7c38046fd1885bd995"},"headline":"Building A Video Streaming App Using Screen Share Using React Native Toolkit","datePublished":"2022-04-04T06:37:05+00:00","dateModified":"2023-10-11T11:55:32+00:00","mainEntityOfPage":{"@id":"https:\/\/www.enablex.io\/insights\/video-streaming-app-using-screen-share-using-react-native\/"},"wordCount":626,"publisher":{"@id":"https:\/\/www.enablex.io\/insights\/#organization"},"keywords":["customer experience","React Native SDK","video api","video call","video chat api","video conferencing","video sdk","Video Streaming App"],"articleSection":["Communication APIs","Video API"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.enablex.io\/insights\/video-streaming-app-using-screen-share-using-react-native\/","url":"https:\/\/www.enablex.io\/insights\/video-streaming-app-using-screen-share-using-react-native\/","name":"Build Video Streaming App with Screenshare on React Native","isPartOf":{"@id":"https:\/\/www.enablex.io\/insights\/#website"},"datePublished":"2022-04-04T06:37:05+00:00","dateModified":"2023-10-11T11:55:32+00:00","description":"Build a video streaming app using react native and need to add screen sharing? Use our easy to use API and add screensharing in one click!","breadcrumb":{"@id":"https:\/\/www.enablex.io\/insights\/video-streaming-app-using-screen-share-using-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.enablex.io\/insights\/video-streaming-app-using-screen-share-using-react-native\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.enablex.io\/insights\/video-streaming-app-using-screen-share-using-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.enablex.io\/insights\/"},{"@type":"ListItem","position":2,"name":"Building A Video Streaming App Using Screen Share Using React Native Toolkit"}]},{"@type":"WebSite","@id":"https:\/\/www.enablex.io\/insights\/#website","url":"https:\/\/www.enablex.io\/insights\/","name":"Enablex","description":"","publisher":{"@id":"https:\/\/www.enablex.io\/insights\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.enablex.io\/insights\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.enablex.io\/insights\/#organization","name":"Enablex","url":"https:\/\/www.enablex.io\/insights\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/logo\/image\/","url":"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/05\/EnableX-Logo-01.png","contentUrl":"https:\/\/www.enablex.io\/insights\/wp-content\/uploads\/2023\/05\/EnableX-Logo-01.png","width":17382,"height":3567,"caption":"Enablex"},"image":{"@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/twitter.com\/enablexio","https:\/\/www.linkedin.com\/company\/vcloudx"]},{"@type":"Person","@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/person\/2623a27aa4d49f7c38046fd1885bd995","name":"Subrat Thayal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.enablex.io\/insights\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a4e1bd8480bae477e9579bd44983acd2?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a4e1bd8480bae477e9579bd44983acd2?s=96&d=mm&r=g","caption":"Subrat Thayal"},"description":"Subrat has over 20 years of experience in building scalable technology solutions including web &amp; desktop applications. He is a proven solution &amp; product architect with expertise on Open Source Technologies.","sameAs":["https:\/\/in.linkedin.com\/in\/subrat-thayal-69b66a13","https:\/\/twitter.com\/subratothayal"],"url":"https:\/\/www.enablex.io\/insights\/author\/subrat\/"}]}},"_links":{"self":[{"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/posts\/1881"}],"collection":[{"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/comments?post=1881"}],"version-history":[{"count":0,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/posts\/1881\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/media\/1902"}],"wp:attachment":[{"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/media?parent=1881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/categories?post=1881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.enablex.io\/insights\/wp-json\/wp\/v2\/tags?post=1881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}