- LIVE DEMO (this demo link will stop after railways free usage exceed)
- webvc live (watch demo video on the youtube)
- Project overview
- Technology
- Key Features
- How to run application locally ?
- Why agora ?
- How agora works ?
This project is a web video calling application that utilizes the Agora Real-Time Communication (RTC) SDK to enable real-time video communication between users. The application incorporates essential features such as user signup, forget password capability, password matching functionality for the signup page, and additional controls for the video call experience, including mic mute/unmute, camera mute/unmute, and end call functionality.
The application aims to provide a seamless and intuitive user experience for web-based video calling, with added functionality for user management and call control. By leveraging the Agora RTC SDK, it ensures reliable and efficient real-time communication between participants.
- WebRTC (agora)
- Python (Django)
- Database (PostgreSQL)
- HTML, JavaScript, CSS, Bootstrap
- Host server on railway
-
Video Calling: The application allows users to initiate video calls with other participants in real time. It leverages the Agora RTC SDK to establish reliable and high-quality video communication.
-
User Signup: Users can create new accounts by registering their credentials, including username, email address, and password. The signup process ensures password matching functionality to validate accurate password input.
-
Forget Password: If users forget their passwords, they can utilize the "Forget Password" feature to initiate a password reset process. This typically involves sending a password reset link or verification code to the user's registered email address.
-
Mic Mute/Unmute: During a video call, participants can easily control their microphone's audio input by toggling the mic mute/unmute functionality. This allows users to silence or enable their audio as desired.
-
Camera Mute/Unmute: Participants can control their camera's video feed during a video call. By using the camera mute/unmute functionality, users can turn off or resume their video streaming according to their preferences.
-
End Call Functionality: Users have the ability to terminate ongoing video calls using the end call feature. This action disconnects the call and returns participants to the application's main interface.
-
Responsive Web Application: The application is designed to be responsive, ensuring optimal user experience across a variety of devices and screen sizes. It automatically adapts its layout and functionality to provide a seamless video calling experience on desktops, laptops, tablets, and mobile devices.
git clone https://github.com/ShubhamOulkar/webvc.git
pip install -r requirements.txt
cd mainfolders
-
open mainfolders/webvc/views.py file and add appId and appCertificate from agora. How to get appID and appCertificate
-
open mainfolders/webvc/static/webvc/js/strems.js add APP_ID here as well.
const APP_ID = '**************'
const CHANNEL = sessionStorage.getItem('room')
const TOKEN = sessionStorage.getItem('token')...
- open mainfolders/mainfolder/settings.py add EMAIL_HOST_USER(add user gmail) and EMAIL_HOST_PASSWORD.
if you are using gmail then see how to get gmail app password.
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
-
Pre-built Infrastructure: Agora provides a robust and scalable infrastructure for real-time communication. Instead of building and maintaining your own infrastructure, Agora offers a ready-to-use solution, eliminating the need for complex server setup, maintenance, and monitoring. This pre-built infrastructure reduces development time and effort significantly.
-
Comprehensive SDK and APIs: Agora offers a feature-rich SDK with a comprehensive set of APIs and libraries. These APIs abstract away the complexities of audio and video transmission, network connectivity, media synchronization, and encoding/decoding. Developers can leverage these APIs to handle real-time communication without needing to delve into low-level details.
-
Cross-platform Compatibility: Agora RTC SDK supports a wide range of platforms, including web browsers, iOS, Android, Windows, macOS, and Linux. This cross-platform compatibility allows developers to write their code once and deploy it across multiple platforms, saving time and effort in platform-specific development.
-
Easy Integration: Agora RTC SDK is designed for easy integration into existing applications. The SDK provides clear documentation, sample code, and tutorials that guide developers through the integration process. Agora also offers SDKs for popular programming languages, making it convenient for developers to work with the language they are comfortable with.
The following figure shows the workflow you need to implement to integrate Voice Calling feature into your app.
To implement this logic, you take the following steps:
-
Create an instance of the Agora Engine by calling AgoraRTC.createClient.
-
To connect to a channel, call join and pass the app ID, user ID, token, and channel name.
-
Create and publish the audio track:
Call createMicrophoneAndCameraTracks to create an audio track.
-
Publish the audio track by calling publish.
-
When a remote user joins the channel, this app:
Listens for a client.on("user-published") event which returns an IAgoraRTCRemoteUser object and a string. The string indicates the type of track.
-
Retrieves the remote track using the fuction handleUserJoined and add user by calling await client.subscribe(user, mediaType).
-
Plays the retrieved tracks by calling play.
Following code snippets will give you some idea about agora SDK
1 : Initiate the voice SDK engine
// initiate the voice SDK engine
const client = AgoraRTC.createClient({mode:'rtc', codec:'vp8'})
2: set required event listners
// set required event listners
client.on('user-published', handleUserJoined)
client.on('user-left', handleUserLeft)
3: join channel
// join channel after retrieve of token for channel
try {
await client.join(APP_ID, CHANNEL, TOKEN, UID)
}catch(error){
console.error(error)
window.open('/vcRoom/','_self')
}
4: Create audio and video tracks
// create audio and video tracks
localTracks = await AgoraRTC.createMicrophoneAndCameraTracks()
5: push tracks to the channel
// push audio and video tracks to channel
await client.publish([localTracks[0],localTracks[1]])
6: add remote user to channel
// add remote user to channel, media types are audio or video
await client.subscribe(user, mediaType)
7: play local video and audio track
// play video track for user
localTracks[1].play(`user-${UID}`)
localTracks[0].play(`user-${UID}`)
8: play remote video
// remote user video track
user.videoTrack.play(`user-${user.uid}`)
9: remote user leave
// remote user video call leave
delete remoteUsers[user.uid]
10: stop local tracks and leave local user
for (let i = 0 ; localTracks.length >i ; i++){
// stop local tracks
localTracks[i].stop()
localTracks[i].close()
}
// leave local user
await client.leave()
This project is licensed under the Apache License.
Feel free to customize the content and structure of the README.md file according to your specific project requirements and information.