TwilioHackathon - Video Chat app using Gatsby and twilio-7
Tags: twiliohackathon, gatsby, react, webdev
Published: 2020-04-20 10:44:01

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/66s0huqlgnyzmy52cu8a.jpeg)

Welcome to part-7 of the series. We will now start showing the local web-cam video. So, open your **video.js** file and update the highlighted parts. Here, we are using **useRef** as we want to attach the video to the div.

We are using a inbuilt **createLocalVideoTrack()** from twilio and using it to attach the video of web-cam to the div **localVidRef**

![video.js](https://cdn-images-1.medium.com/max/2880/1*bfz_LxtobiST0SVZf52tpQ.png)*video.js*

Now, again go to [http://localhost:8000/](http://localhost:8000/) and login with any username.

![login](https://cdn-images-1.medium.com/max/2880/1*R6StZf_H_1bLq9KdYeTDoQ.png)*login*

After that allow the browser to use Camera and Microphone.

![Allow](https://cdn-images-1.medium.com/max/2880/1*kmQT-Qm7SvhdPhEDU1x73g.png)*Allow*

And you will be able to see yourself in the video.

![The Video](https://cdn-images-1.medium.com/max/2880/1*cRFTu6zDI-nbMs3pqF-YQA.png)*The Video*

Now, it’s time to attach the remote participants. So, update the **video.js** file as below. We are adding another ref **remoteVidRef** to a div.

After that taking the result and looping through each participant. Each participant can have one or more track(means camera), so we are looping through them also. And then appending it to **remoteVidRef**

![video.js](https://cdn-images-1.medium.com/max/2880/1*TPR4fBdz0ll9ejBFmWj6jQ.png)*video.js*

And it seems to working, as we are able to see two videos now.

![Two videos](https://cdn-images-1.medium.com/max/2880/1*f99TyVllq6AxRq4uFZ0Cwg.png)*Two videos*

It’s time to deploy in netlify, so that i can test from two devices. So, open your netlify dashboard and click on **New site from Git** button.

![Netlify](https://cdn-images-1.medium.com/max/2880/1*SWpWzZPQnXx14RKWFvDG8w.png)*Netlify*

Next, click on github as my code is in [https://github.com/nabendu82/SimpleVideoApp](https://github.com/nabendu82/SimpleVideoApp)

![Github](https://cdn-images-1.medium.com/max/2880/1*w07SEPOfUkgq-r7Lmk59hg.png)*Github*

After that i need to search the repo, as i have a lot of them. After getting the repo, we need to click on it.

![Search](https://cdn-images-1.medium.com/max/2880/1*iIC8SNrzm_CvqkvJ2BG3LA.png)*Search*

After that keep all the default setting and click on **Deploy Site** button.

![Deploy](https://cdn-images-1.medium.com/max/2880/1*n8QbgxBDebhYEPSqR_Ds6g.png)*Deploy*

In the next screen, click on **Site settings** button quickly.

![Site settings](https://cdn-images-1.medium.com/max/2880/1*lqPeHJ8cUkilFDQZwSGyhg.png)*Site settings*

Next, scroll a bit and click on **Change site name** button.

![Change](https://cdn-images-1.medium.com/max/2880/1*NJP7N_rNXAskd16TglFiuA.png)*Change*

It will open a pop-up, in which you can change the random site name to something meaningful

![Meaningful](https://cdn-images-1.medium.com/max/2880/1*PV8UiR1VbjFXJeuQObS0vg.png)*Meaningful*

And finally our site is deployed.

![Deployed](https://cdn-images-1.medium.com/max/2880/1*llE2l2qZN6hlVqtdacwx3g.png)*Deployed*

Now, the app is deployed and i logged in from two machines but i was not able to see both videos. As, per the youtube video i am following we missed a part.

Need to add the updated part in **video.js** file.

![video.js](https://cdn-images-1.medium.com/max/2880/1*Vzu6XWy5Jr9dBYLOsoD9Aw.png)*video.js*

I pushing the code, which automatically deployed to netlify. I am able to logging from multiple devices and see the videos.

![Working](https://cdn-images-1.medium.com/max/2880/1*HSF15zNDZYrzhbf07kQxdA.png)*Working*

This completes part-7 of the series. There are some CSS and other changes remaining, before submitting my app for hackathon. See you soon.

You can also find the code for this project in [this](https://github.com/nabendu82/SimpleVideoApp) github link.