loading...
Cover image for TwilioHackathon - Video Chat app using Gatsby and twilio-2

TwilioHackathon - Video Chat app using Gatsby and twilio-2

nabendu82 profile image Nabendu Updated on ・2 min read

Alt Text

Welcome to part-2 of the series. We will continue our journey to build a simple video chat app with twilio api, for the dev.to hackathon.

We had logged into the twilio dashboard in part-1. Now, click on the three dots on the left menu as in the screenshot below.

Three dotsThree dots

Next, click on Programmable Video in the menu.

Programmable VideoProgrammable Video

In the next screen we have to click on Show API Credentials link.

Show API CredentialsShow API Credentials

From the next page note down your ACCOUNT SID and AUTH TOKEN.

CredentialsCredentials

Now, time to put both the secrets in a .env file. Create a .env file in the root directory and put ACCOUNT SID and AUTH TOKEN into, TWILIO_ACC_SID and TWILIO_AUTH_TOKEN variables.

.env.env

Then click on Tools in the left menu.

ToolsTools

After that click on the API Keys sub-menu link. Next, we have to click on Create new API Key button.

API KeysAPI Keys

In the next screen, we have to give the API key a name and then click on Create API Key button.

NameName

After that in the next screen, we will be shown the SID and SECRET. We need to note them both.

SecretSecret

Then click on the checkbox and the Done button.

CheckboxCheckbox

After that in the next screen our secret won’t be shown. And this means our API Keys are saved.

SavedSaved

Next, again go to the .env file and save these two variables.

.env.env

The settings of API keys took a lot of time, so we will start with twilio functions in the next part.

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

Posted on by:

nabendu82 profile

Nabendu

@nabendu82

Fullstack JS dev, Upcoming Author "Gatsby Cookbook"

Discussion

pic
Editor guide