How to Make Your Own Livestreaming Service with api.video
Tags: javascript, react, programming, webdev
Published: 2022-05-26 23:33:43

<!-- wp:paragraph -->
<p>With the recent shift in the popularity of remote work environments, the demand for live streaming services has increased. Even prior to the shift, many global companies have used livestreaming services for their organization’s all-hands meetings. <a href="https://api.video/">api.video</a> provides APIs and SDKs that make it easier to build your own livestreaming service and host it on your website. Additionally, they also provide solutions for uploading videos, encoding videos, video delivery, and video analytics. Here are some of the specific features of api.video:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li>You can&nbsp;<a href="https://api.video/upload/">securely upload</a>&nbsp;and store videos from your own user interface to api.video. The video can then be shared worldwide via their responsive video player. They also support progressive uploads that let you simultaneously upload large videos.</li><li>You can&nbsp;<a href="https://api.video/player/">customize your video player</a>&nbsp;by choosing a video player theme, adding your own thumbnail image, and adding your own logo.</li><li>You can&nbsp;<a href="https://api.video/live-streaming/">create your own livestreaming service</a>, which can either be done by using their API/SDK or by using their User Interface (i.e., you won’t have to code).</li><li>You can&nbsp;<a href="https://api.video/analytics/">access stats and analytics</a>&nbsp;about your videos to learn more about your users and their engagement.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Some of the use cases for api.video include:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><strong>Video Classes:</strong>&nbsp;teachers and tutors can use api.video’s&nbsp;<a href="https://api.video/player/">video player</a>&nbsp;or livestream facilities to host their classes online.</li><li><strong>Product Instruction Manuals:</strong>&nbsp;companies can create videos on how to use their product and host it via api.video’s customizable&nbsp;<a href="https://api.video/player/">video player</a>&nbsp;on their own website.</li><li><strong>Livestreams:</strong>&nbsp;livestreams via api.video’s&nbsp;<a href="https://api.video/live-streaming/">livestream service</a>&nbsp;can be used for various purposes, such as gaming, coding, concerts, watch parties, and more.</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>You can find more use cases on api.video’s blog&nbsp;<a href="https://api.video/blog/use-cases">here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this tutorial, you will build your own livestream service using api.video’s&nbsp;<a href="https://github.com/apivideo/api.video-nodejs-client">Node.js Client</a>. You will then create a simple&nbsp;<a href="https://reactjs.org/">React</a>&nbsp;App to host your livestream. All the development will be done using&nbsp;<a href="https://replit.com/~"><em>Replit</em></a>, an in-browser IDE that supports more than fifty languages.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For easy access, here are some resources to help you follow along:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://replit.com/@rahulbanerjee26/apivideo-live-stream-service-1#index.js">Code to create livestream service</a></li><li><a href="https://replit.com/@rahulbanerjee26/Api-Video-Live-Stream-View">React App</a></li><li><a href="https://github.com/rahulbanerjee26/api.video_live_stream">GitHub repo</a></li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2><a href="https://dev.to/new#implementing-your-own-livestream-service"></a>Implementing Your Own Livestream Service</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The tutorial can be broken into three parts. In the first part, you will use api.video’s&nbsp;<a href="https://github.com/apivideo/api.video-nodejs-client">Node.js Client</a>&nbsp;to create your own livestream service. In the second part, you will create a simple React App to host your livestream service. The UI can be built using any framework you prefer. For this tutorial, we’ll stick with React. Finally, you will connect Zoom to your livestream service for users to be able to view it.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://dev.to/new#creating-the-livestream-service"></a>Creating the Livestream Service</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Before proceeding, you will have to&nbsp;<a href="https://dashboard.api.video/register">create an account</a>&nbsp;with api.video. Once you have an account, log in and head over to your dashboard. Scroll down, and you should see a Sandbox API Key:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--cIVGcpeU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/T3ebpdj.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--cIVGcpeU--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/T3ebpdj.png" alt="Sandbox API Key"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Copy this key. This will be used by api.video’s API to authenticate you. For this tutorial, you can work in a Sandbox environment.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, head over to&nbsp;<a href="https://replit.com/~">Replit</a>. If you do not already have an account, you can create one&nbsp;<a href="https://replit.com/signup">here</a>. Create a new repl and select Node.js for the template:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iibMLQfs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/Yg6Oph4.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iibMLQfs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/Yg6Oph4.png" alt="Node.js Replit template"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Then, in your&nbsp;<code>index.js</code>&nbsp;file, you should see options to select a template. If you would like, you can try playing around with a template. However, for this tutorial, you can simply start from scratch.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--YN5OBo0X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/0CJ4LDv.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--YN5OBo0X--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/0CJ4LDv.png" alt="Templates for Node.js in Replit"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Save your api.video API Key as an environment variable. Replit has a feature that allows you to conveniently store your secrets as environment variables:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aPsNj89W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/HKnsnZf.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aPsNj89W--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/HKnsnZf.png" alt="Environment variable in Replit"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Replace the value for the variable with your api.video Sandbox API Key. After you create your environment variable, you should see an option to insert a code snippet to import the variable:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--jC8PnjVd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/gu73Vyd.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jC8PnjVd--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/gu73Vyd.png" alt="Import env variable in Replit"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Here’s the code snippet to do so:</p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
{% embed https://gist.github.com/rahulbanerjee26/ee148286d66c14c6ca8839f25b343094 %}
<!-- /wp:shortcode -->

<!-- wp:paragraph -->
<p>Next, you will have to install api.video’s&nbsp;<a href="https://github.com/apivideo/api.video-nodejs-client">Node.js Client Library</a>. Replit has a feature that allows you to search for packages and install them. Click on the&nbsp;<strong>box icon</strong>&nbsp;in the left sidebar and search for “@api.video/nodejs-client.”</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--W9Y-c-Di--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/3DO06GH.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--W9Y-c-Di--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/3DO06GH.png" alt="Install package in Replit"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Click on the&nbsp;<strong>plus icon</strong>&nbsp;to install the package. Optionally, you can use the&nbsp;<code>npm install</code>&nbsp;command in your repl’s shell to install it as well.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Import the package you just installed using this code:</p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
{% embed https://gist.github.com/rahulbanerjee26/9f1f430cea980c35be890e4175105648 %}
<!-- /wp:shortcode -->

<!-- wp:paragraph -->
<p>Now, create an asynchronous function to create the livestream service:</p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
{% embed https://gist.github.com/rahulbanerjee26/9b6315a962ff7fcdc0c9fee18ee37677 %}
<!-- /wp:shortcode -->

<!-- wp:paragraph -->
<p>You will have to use your API key when creating the client instance. The client instance has a method called <code>liveStreams.create</code> that lets you create the livestream service. You have to create a key-value pair for your livestream’s name. If you would like to add a thumbnail to your livestream, you can use the client instance’s <code>liveStreams.uploadThumbnail</code> method to do so:</p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
{% embed https://gist.github.com/rahulbanerjee26/9d88f004d7e0dcb150a1a21183d44b45 %}
<!-- /wp:shortcode -->

<!-- wp:paragraph -->
<p>This is another asynchronous function, similar to the previous function. Here, it accepts a couple of parameters: the livestream ID that will be returned by api.video and the path of your JPG file.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Replit lets you upload files to your repl project. Go to&nbsp;<strong>Files</strong>&nbsp;in the sidebar. You can either drag and drop your image or click on the three dots and select&nbsp;<strong>Upload file</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SnvV5qwn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/wSw2Lco.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SnvV5qwn--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/wSw2Lco.png" alt="Upload file"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If you need a thumbnail image, you can use&nbsp;<a href="https://imgur.com/qrxjvSp">this one</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, call the function that creates the livestream service and its ID, which will be used to add the thumbnail. Use this code to do both:</p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
{% embed https://gist.github.com/rahulbanerjee26/a26285c4bc07f693e9c34319bb8b80dc %}
<!-- /wp:shortcode -->

<!-- wp:paragraph -->
<p>If you stored your thumbnail image in the same level as your&nbsp;<code>index.js</code>&nbsp;file, the path is simply the name of the project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you want, you can also optionally install the&nbsp;<code>prettier</code>&nbsp;package to format your code. Once you have installed it, open the&nbsp;<code>package.json</code>&nbsp;file and add the following to your Scripts object:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>"prettier": "prettier --write *.js"</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Now, you can head over to your repl’s shell and type the following command to format and prettify your code:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>npm run prettier</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>Once complete, you can run your code using either the shell or the green&nbsp;<strong>Run</strong>&nbsp;button. The output should look similar this:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--sYaZM7Oq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/aSCK9Yw.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--sYaZM7Oq--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/aSCK9Yw.png" alt="Ouput shown in Replit"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The output should have a key-value pair for the iframe of the livestream. You can use this iframe to display the livestream in your UI, so be sure to save the iframe value.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>After you have created your livestream service, you can head to your api.video&nbsp;<a href="https://dashboard.api.video/livestreams">account dashboard</a>&nbsp;to view your livestreams.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--iXo8LHeb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/ineXmh9.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--iXo8LHeb--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/ineXmh9.png" alt="Dashboard"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://dev.to/new#creating-the-react-ui"></a>Creating the React UI</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To best manage your code, create a new repl for this step and select&nbsp;<strong>React.js</strong>&nbsp;for the template.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--A2TuqQ_s--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/jg7qzGY.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--A2TuqQ_s--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/jg7qzGY.png" alt="React.js template in Replit"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>This will create a React boilerplate. You can run the app:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--9USxhD5E--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/gHgtufF.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--9USxhD5E--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/gHgtufF.png" alt="Replit’s React App"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The URL is shown in the browser. In my case, it is:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>https:&#47;&#47;live-stream-UI.rahulbanerjee26.repl.co</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>If your repl is public, the URL can be accessed from anywhere and by anyone. Additionally, as long as your repl is running, the URL will render your React App. This is a really useful feature if you want to test your app on different screens or if you want to share it with other developers for testing. Replit also supports live reload by default, so any changes you make in your code will be reflected in the browser almost instantly.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For the UI, you can add some text and your livestream’s iframe element. Here is the component to use:</p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
{% embed https://gist.github.com/rahulbanerjee26/1e8833c174cada51708e80e9a35769d5 %}
<!-- /wp:shortcode -->

<!-- wp:paragraph -->
<p>Replace the iframe element with the iframe value you saved in the previous section. Then, head to your browser, and you should see your thumbnail image along with the text in the h1 tag. You can add some CSS to style the app if you’d like:</p>
<!-- /wp:paragraph -->

<!-- wp:shortcode -->
{% embed https://gist.github.com/rahulbanerjee26/28cb1e69f1e6c7e94bf592de2a3cd268 %}
<!-- /wp:shortcode -->

<!-- wp:paragraph -->
<p>Replit adds a small box with a preview of the color next to your color hex codes. If you click on it, you should see a color picker to select a color of your choice.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ayBMKjpm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/3po14W2.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ayBMKjpm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/3po14W2.png" alt="Color picker in Replit"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>After you have added your styling, your React App should look something like this:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--ImpBCYpS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/PXrwohc.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--ImpBCYpS--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/PXrwohc.png" alt="Screenshot of React App"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3><a href="https://dev.to/new#connecting-zoom-to-your-livestream-service"></a>Connecting Zoom to Your Livestream Service</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Log in to your Zoom account and create a meeting:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pcpYnK5D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/xkb1rKR.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pcpYnK5D--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/xkb1rKR.png" alt="Zoom meeting"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>After you create your meeting, go to your meeting information and scroll down to select&nbsp;<strong>Configure Custom Streaming Service</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--cbVU1TIf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/lIkwarT.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--cbVU1TIf--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/lIkwarT.png" alt="Zoom livestream"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, you will need some information from the livestream service you created in the previous steps. Head over to your api.video dashboard and go to your livestream service. Click on the&nbsp;<strong>See details</strong>&nbsp;option for the service. You should see your stream key and the RTMP Server URL. You’ll need both these values. Go back to your Zoom meeting details. For&nbsp;<strong>Stream URL</strong>, add the RTMP Server URL from api.video, and for&nbsp;<strong>Stream key</strong>, add your api.video livestream’s key. Then, for&nbsp;<strong>Live streaming page URL</strong>, add the URL to your React App. Here’s what my Zoom livestream configuration looks like:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QUsDnDjo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/VQuf2nw.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QUsDnDjo--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/VQuf2nw.png" alt="Zoom meeting configuration"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>When you are hosting your Zoom meeting, simply click on&nbsp;<strong>More</strong>&nbsp;&gt;&nbsp;<strong>Live on Custom Live Streaming Service</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--0XF1IaHk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/3Sol1bi.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--0XF1IaHk--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/3Sol1bi.png" alt="Zoom livestream service"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Your React App should now display your livestream. I tried live sharing VS Code in my Zoom meeting, and here’s the result in the React App:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--fge0sKOy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/Bgi7hmH.png"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--fge0sKOy--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.imgur.com/Bgi7hmH.png" alt="Livestream React"/></a></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Since I am in the sandbox environment, there is a watermark. To remove it, you can upgrade to the production plan.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2><a href="https://dev.to/new#conclusion"></a>Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this tutorial, you built your own livestreaming service using&nbsp;<a href="https://api.video/">api.video</a>. You also created a simple React App for others to view your livestream via Zoom. You were also introduced to&nbsp;<a href="https://replit.com/~"><em>Replit</em></a>, an in-browser IDE that can be used for livestreaming, among many other things. Although this tutorial only discussed support for Node.js and React, Replit supports other languages and frameworks as well, including C++, Python, Vue.js, Svelte, and more.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Replit also has support for unit tests and version control and comes with a built-in database. You can read about more projects done in Replit&nbsp;<a href="https://blog.replit.com/">on their blog</a>.</p>
<!-- /wp:paragraph -->