![]() env, as shown in the code snippet below: PORT=3000 Next, we need to add Twilio credentials in the environment variables file –. For that, we need to install the necessary packages by running the following command: yarn add dotenv express ngrok nodemon twilio To fetch the access token, we need to create a new Node server project. After setting up your account, you need to go to the location directed by the screenshot below: How to Setup the Server to Handle Fetching the Access Token In order to get your Twilio API key, you are going to need a Twilio account. You can install these packages either in advance or while going through the tutorial.ADVERTISEMENT How to Get Your Twilio API Key This is the Home Screen you’ll see when you open the app. When the text input is empty, the join button will be disabled. The join button has a text input associated with it to provide the channel ID to join the stream. The Home Screen has 2 buttons, Start and Join. You can find the documentation for the React Native Navigation here. In the starter code, the Navigation is set up using a Stack Navigator with the Home screen and a dummy Video Conference Screen. Follow the Repository’s README for instructions. You can clone it from this repository on GitHub. To focus more on the Video conference, I’ve prepared a starter code. Make sure you’re following the React Native CLI Quickstart and not the Expo CLI Quickstart. ![]() You can follow this documentation to set up the environment. This is because video calling SDKs require native modules that are not supported by Expo. Agora’s React Native SDK does NOT work with expo managed workflow. IMPORTANT - We will not be using Expo in our project. We’ll be needing this later while setting up Agora in our app. Now, click on the closed eye icon near the App ID to reveal it and copy the App ID. Once you hit on submit, it’ll create a new project and you should see it on the Project Management Console. Fill out the project name and set the authentication mechanism to testing. Once you’ve signed up, you’ll see the dashboard below. You can reach the signup page from here.įill in the details and create an account or you can signup with Google, Github, or Cocos. I’ve made a commit for every step in this tutorial. If you want to take a look at the final code, check out this Github Repo. We’ll be going through these steps in this article: Here is the documentation for React Native Agora. ![]() If you’d like to learn more about Agora, visit their website or read this article. You can learn more about Agora’s capacity here.Īgora is a paid service, but the first 10,000 minutes are free every month. They also recommend limiting the number of users sending streams concurrently to 17 at most. Real-Time Messaging (which is in BETA at the time of writing this article).Īgora supports up to 1 million users in a channel. Its core technology is real-time communication (RTC).Īgora provides SDKs to build apps that require real-time engagement like: It’s a service provider used for real-time voice and video. AgoraĪs I mentioned in my previous article, Agora was founded in 2014. If you are not comfortable with the fundamentals, please refer to this tutorial before beginning with this project. The fundamentals of React and React Native will not be covered in this tutorial. ![]() How to share a room code for others to join the video conference. How to mute local/remote audio and video feed. How to create/join a video conference using Agora. In this tutorial, we will build a Video Conference application with the help of React Native and Agora.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |