Video Chat app using Gatsby and twilio-6

Welcome to part-6 of the series. You can find part-5 here.

In previous part we got our result back from twilio. Now, it’s time to store the result so that we can use it in the next part. Update the login-form.js file, with a props storeToken and then save the jwt in it.

Image for post
Image for post
login-form.js

Next, we will update index.js to have a new state token and pass the props storeToken in LoginForm.

We are using ternary logic to display the form if user is not logged in or else for the time been Has Token text.

Image for post
Image for post
index.js

Time to test our code in http://localhost:8000/. On opening we will get the Login form.

Image for post
Image for post
Login Form

On giving a name and clicking on Join Video Chat, we will be taken to below screen.

Image for post
Image for post
Successful

Next, we will create the Video component. Create a new file video.js inside the components folder. Here, we are using useEffect hook which will fire when the token changes. The token comes as a props and is used to connect to a room, using the twilio-video inbuilt method.

Image for post
Image for post
video.js

Next, let’s use this component in index.js when the user is authenticated.

Image for post
Image for post
index.js

We will again login in our web-app, by giving a Display Name and clicking on Join Video Chat button.

Image for post
Image for post
Login

It will open the pop-up to ask for permission to use video and audio. We need to click on Allow.

Image for post
Image for post
Allow

It will successfully log us in and show Video.

Image for post
Image for post
Video

This completes part-6 of the series. You can find part-7 here.

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

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

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