Video Chat app using Gatsby and twilio-8

Photo by Caspar Camille Rubin on Unsplash

Welcome to the final part of the series. You can find the part-7 here.

Our web-app is almost finish and only some CSS remains, so let’s start it.

I also want to show the name of the Organiser, so let’s get if from login-form.js. We will use a callback function storeName which is similar to storeToken, to send the name back.

login-form.js

Next, let’s update in index.js and use the logic similar to that of token. We are passing the name also, to the Video component.

index.js

Next, let’s update the Video component in the video.js file. Here, we are first importing a video.css file. We will make it soon. After that we are destructuring the name prop.

video.js

After that in the video.js file, do the following changes. We are first changing the enclosing div to a fragment. After that adding Organiser and using the name prop.

Also adding a h2 for Remote participants. Last adding a className for remoteVideRef div, which we are going to style next.

video.js

Add a video.css file in the same folder and add this simple styles into it.

video.css

All the changes are done, so time to test it in localhost. It is working fine and i checked it my logging from three different browsers.

localhost

It’s time to push the code in github, to deploy it automatically. After, it got deployed i logged in from 3 different devices.

Deployed

It is working fine but found a bug ie for remote participant it will show his name in place of Organiser. So, let’s change the way it will look for each user. I am now showing the name in Connect, so it will be different for each user.

video.js

Also, let’s add below lines in video.css file.

video.css

And it is working fine for different users.

Organizer
Participant

I will redeploy now and check the web-app. I am testing with all 3 -2 laptops and 1 phone.

Working fine

Now, my app is complete and deployed. As told earlier this is a very Simple Video app, which can be created with ease and deployed in no time with netlify.

After that share the link with your known people and enjoy video conferencing. We get 15 dollars free credits from twilio and i used 3.24 dollars while making this project.

Twilio dashboard

I am submitting the web-app soon for the hackathon, so i had to add a README and LICENSE file. I had added both in my github and also joined the Twilio CodeExchange community

The details about the submission rules are here.

You can also find the code for this project in this github link.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Xamarin Mobile Development: add an image

How to deploy multiple Django apps on a single server using NGINX and Gunicorn?

Integrating Keycloak as a Third Party Key Manager with WSO2 API Manager

🏝Welcome to the new MetaWorld 🎉

How to add a new field in Laravel Nova Resource

Functional programming with Swift

Docker Network Drivers Overview | Networking in Docker #3

New Method for splash screen Kotlin in 2021

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Create a PERN Todo List

Bankist App: Banking made minimalist.

Implement Load More Pagination in React

How to add google map API to your website & Fix google map API Errors

How to add google map API to your website & Fix google map API Errors