speakOut
Open Source Real Time Communication Website.
Recently I developed an Open Source Real Time Communication Website called speakOut which helps users conduct meetings, livestreams, project reviews & informal hangout sessions. speakOut aims to be the most secure application in today’s market in high definition real time video and audio.
In this blog I’ll give you an overview of how I made the platform.
I used the Agora.io Web RTC SDK to make the main functionality of the website (group video calls as well as livestreams).
Follow along if you too want to learn how to make such an application.
Don’t worry, basic knowledge of frontend frameworks like MaterializeCSS and or Bootstrap along with knowledge of JavaScript and JQuery are more than enough to make this.
Tech Stack:
- MaterializeCSS for the display pages (Home & Error pages).
- Bootstrap 4.5 for the functional pages (Group VC & Livestream pages).
- JavaScript & JQuery.
- Agora RTC Video SDK or Akshat’s Agora RTC CDN.
You must be wondering why I mixed up MaterializeCSS as well as Bootstrap. The reason is that I am more comfortable with Bootstrap and had a deadline for Agora’s Superstar Technical Test and hence used Bootstrap for the functionality but MaterializeCSS looks way cooler for display pages and hence used it there. Feel free to use either one for your project.
Diving Deep:
I won’t touch upon how the frontend was made as that can very well be deciphered from the code found on my GitHub repository: https://github.com/akshatvg/speakOut.
Group VC:
I used modals to take in the Channel Names someone wants to join or create for a meeting. I hardcoded the Agora App ID generated from the Agora Console.
Do have a quick look at the Agora documentation before proceeding.
Now comes the time to actually make something functional!
The above code helps make the Group VC actually functional. Here you Initialise Stream, Set Video Quality, Generate a Token (to ensure no one joins a channel without having access to it) and actually append new users to the screen.
The person himself is displayed on the bottom right. All the others are appended to the bottom left. Anyone can be double clicked to be made the centre of attention by making the person’s video full-screen sized.
The specific functions can be found to be used in the Agora Documentation and GitHub repositories to understand them a little more.
Go Live:
The same methodology has been used as in Group Video calls but the difference is that here, the stream is one way and multiple people shouldn’t be displayed onto the screen making it even more easier to integrate as compared to Group VCs.
The mechanism to initialise, join, leave and all other features as compared to Video Calls are exactly the same and hence I’ve not repeated them here.
The only extra “feature” here is that here we find all I/O devices connected to the main device used for the stream so the person going live can choose anything convenient to them.
We have now created the stream. Time to join one!
Join Livestream:
Joining a Livestream is something very basic. You logically just need to display the video of the person going live onto the screens of people using the same channel name or ID. It is a one-way interaction and the person live can’t see or hear the viewers.
You may notice that this code is quite small and hence justifies that nothing much has to be done to view a livestream.
We have now successfully set up all the features of speakOut as expected!
Deployed Link:
I have deployed this at https://speakout.akshatvg.com. Try out the application here ✌🏻
Liked the project but want to improve it further?
Enhancements:
Fork my GitHub repository at https://github.com/akshatvg/speakOut and try to add:
1. Screen Share
2. Real Time Messaging
3. Login, Logout to create a user Profile with display picture.
Demo Video:
I hope you liked this blog and understood how Agora works and how easily it was implemented on speakOut. Do use the platform and let me know if you find any bugs.
