Try Agora for Free
Sign up and start building! You don’t pay until you scale.
Manitej Pratha is a passionate student developer, ReactJS lover, and Javascript enthusiast who also has vivid interest in Web, Android, and Azure Cloud. Know more about Manitej at manitej.rocks!
The current buzz in the market is all about audio streaming apps and podcasts. Though apps like Clubhouse started the trend, big players like Twitter and Discord were quick enough to bring out their own versions of this app and catch up to the competition. The pandemic has definitely brought a big change to how people spend their time.
Luckily, we don’t need to reinvent the wheel to create something useful. There are many services that help us make our tasks way easier and build in less time without compromising on security and features. In this tutorial, let’s see how we can build an app that is similar to these audio streaming apps in minutes.
In this file, we imported the react-router components and wrapped up all the routes under the authContext
We have three routes:
In this route, we allow users to create an account in our app using Firebase’s Google OAuth authentication.
When the users register on the app, we redirect them to the main page of the app, where we display all the public rooms. Clicking a room will take them to the join room route.
In this route, we allow the user to join a room and listen and talk.
Only logged-in users can access rooms and join room routes so we need to protect them. We will store the current user in authContext.js using Context API.
There are some routes in our app that are accessible only to a logged-in user. If there is no active logged-in user, we need to ask them to log in first. To do this, we create a component that checks for the current user. If there is a user logged in, then it’ll give access to the private route. Otherwise, it will redirect the user to the login page.
This file is used as a global store for the user info. All components can access the user state from this component. It uses the firebase’s onAuthStateChanged method and stores the current user info in the currentUser state, It passes this state to all components. every time the user's state changes firebase automatically triggers the onAuthStateChanged method and updates the state to all components.
Only logged-in users can create rooms and join them. we will be using firebase google login for user auth. We display a button to the user, clicking on which will start the firebase google login, on successful login we push the user to a new route using the useHistory hook from react-router-dom. If the user is already logged in we automatically redirect him to the route.
In this component (Home.js), we fetch all the rooms from the Firestore in real-time and render them on the / route. The Create Room button is used to create rooms.
https://gist.github.com/Manitej66/74feffa7dc2f861e7589f9f412c92727
The Rooms component is used to get all the rooms from the database and display them. When the user clicks the Trash button on the card, we call the deleteRoom method, which will delete the room from the database using the document ID. When the user clicks the Join Room button, we redirect them to a new route, where they can join the room.
The Create Room component is used to create rooms. We display a modal to get the information required to create a room, such as a room name and visibility status. When the user clicks the Create Room button, we add a new document to the Cloud Firestore database using the addDoc method
We use the Join Room component to join a room. After the user clicks the Join Room button, we add the current user to the stream. We first make an API call to a server to generate an auth token for the current user. The API response gives us the token that we can use to join a stream. Once the user joins the room, we add their info to the Cloud Firestore database of the respective document of the room. Finally, we start the Agora stream in the div tag with id me, using the play() method from the Agora SDK.
Start the dev server, click on create room and create a room with any details and join the room. Open another browser and navigate to the website. Now you can see the earlier created room(if it's public). Click on join room. now you will see 2 participants on the screen. At the bottom of the screen, you’ll have controls like muting audio, changing audio stream quality, input and output devices. That's it. below are screenshots attached for the same.
That’s all there is to it! With the power of technologies like the AgoraSDK, we can build a full-fledged, production-grade web app. Agora takes care of all the work required in the back end so that we don’t need to worry to handle all the complicated stuff. And Agora gives us 10,000 free minutes per month.
