DEV Community: Sagar Kava

Namo-Turn-Detection-v1: Semantic Turn Detection for AI Voice Agents

Sagar Kava — Wed, 01 Oct 2025 14:10:02 +0000

Turn-taking — the ability to know exactly when a user has finished speaking — is the invisible force behind natural human conversation. Yet most voice agents today rely on Voice Activity Detection (VAD) or fixed silence timers, leading to premature cut-offs or long, robotic pauses.

We introduce NAMO Turn Detector v1 (NAMO-v1), an open-source, ONNX-optimized semantic turn detector that predicts conversational boundaries by understanding meaning , not just silence. NAMO achieves <19 ms inference for specialized single-language models, <29 ms for multilingual , and up to 97.3 % accuracy — making it the first practical drop-in replacement for VAD in real-time voice systems.

1. Why Existing Approaches Break Down

Most deployed voice agents use one of two approaches:

Silence-based VAD: very fast and lightweight but either interrupts users mid-sentence or waits too long to be sure they’re done.
ASR endpointing (pause + punctuation): better than raw energy detection, but still a proxy; hesitations and lists often look “finished” when they’re not, and behavior varies wildly across languages.

Both approaches force product teams into a painful latency vs. interruption trade-off : either set a long buffer (safe but robotic) or a short one (fast but rude).

2. NAMO’s Semantic Advantage

NAMO replaces “silence as a proxy” with semantic understanding. The model looks at the text stream from your ASR and predicts whether the thought is complete. This single change brings:

Lower floor transfer time (snappier replies) without raising false cut-offs.
Multilingual robustness: one model works across 23+ languages , no per-language tuning.
Production latency: ONNX-quantized models run in <30 ms on CPU/GPU with almost no accuracy loss.
Observability & tuning: you can get calibrated probabilities and adjust thresholds for “fast vs. safe.”

Namo uses Natural Language Understanding to analyze the semantic meaning and context of speech, distinguishing between:

Complete utterances (user is done speaking)
Incomplete utterances (user will continue speaking)

Key Features

Semantic Understanding : Analyzes meaning and context, not just silence
Ultra-Fast Inference : <19ms for specialized models, <29ms for multilingual
Lightweight : ~135MB (specialized) / ~295MB (multilingual)
High Accuracy : Up to 97.3% for specialized models, 90.25% average for multilingual
Production-Ready : ONNX-optimized for real-time, enterprise-grade applications
Easy Integration : Standalone usage or plug-and-play with VideoSDK Agents SDK

3. Performance Benchmarks

Latency & Throughput

Using ONNX quantization, NAMO moves from 61 ms to 28 ms inference (multilingual) and 38 ms to 14.9 ms (specialized).

Relative speedup: up to 2.56×
Throughput: doubled (35.6 to 66.8 tokens/sec)

Accuracy Impact

Quantization preserves accuracy:

Confusion matrices show virtually unchanged true/false rates before and after quantization.

Language Coverage

Average multilingual accuracy: 90.25 %

Specialized single-language models: 97.3 % (Turkish/Korean), >93 % Hindi, Japanese, German.

5. Impact on Real-Time Voice AI

With NAMO you get:

Snappier responses without the “one Mississippi” delay.
Fewer interruptions when users pause mid-thought.
Consistent UX across markets without tuning for each language.
Cost-effective scaling — works with any STT and runs efficiently on commodity servers.

6. Impact on Real-Time Voice AI

Namo offers both specialized single-language models and a unified multilingual model

Variant	Languages / Focus	Model Size	Latency*	Typical Accuracy
Multilingual	23 languages	~295 MB	< 29 ms	~90.25 % (average)
Language-Specialized	One language per model	~135 MB	< 19 ms	Up to 97.3 %

* Latency measured after quantization on target inference hardware.

Multilingual Model (Recommended):

Model: Namo-Turn-Detector-v1-Multilingual
Base: mmBERT
Languages: All 23 supported languages
Inference: <29ms
Size: ~295MB
Average Accuracy: 90.25%
Model Link: Namo Turn Detector v1 - MultiLingual

Performance Benchmarks for Multilingual Model

Evaluated on 25,000+ diverse utterances across all supported languages.

Language	Accuracy	Precision	Recall	F1 Score	Samples
🇹🇷 Turkish	97.31%	0.9611	0.9853	0.9730	966
🇰🇷 Korean	96.85%	0.9541	0.9842	0.9690	890
🇯🇵 Japanese	94.36%	0.9099	0.9857	0.9463	834
🇩🇪 German	94.25%	0.9135	0.9772	0.9443	1,322
🇮🇳 Hindi	93.98%	0.9276	0.9603	0.9436	1,295
🇳🇱 Dutch	92.79%	0.8959	0.9738	0.9332	1,401
🇳🇴 Norwegian	91.65%	0.8717	0.9801	0.9227	1,976
🇨🇳 Chinese	91.64%	0.8859	0.9608	0.9219	945
🇫🇮 Finnish	91.58%	0.8746	0.9702	0.9199	1,010
🇬🇧 English	90.86%	0.8507	0.9801	0.9108	2,845
🇵🇱 Polish	90.68%	0.8619	0.9568	0.9069	976
🇮🇩 Indonesian	90.22%	0.8514	0.9707	0.9071	971
🇮🇹 Italian	90.15%	0.8562	0.9640	0.9069	782
🇩🇰 Danish	89.73%	0.8517	0.9644	0.9045	779
🇵🇹 Portuguese	89.56%	0.8410	0.9676	0.8999	1,398
🇪🇸 Spanish	88.88%	0.8304	0.9681	0.8940	1,295
🇮🇳 Marathi	88.50%	0.8762	0.9008	0.8883	774
🇺🇦 Ukrainian	87.94%	0.8164	0.9587	0.8819	929
🇷🇺 Russian	87.48%	0.8318	0.9547	0.8890	1,470
🇻🇳 Vietnamese	86.45%	0.8135	0.9439	0.8738	1,004
🇸🇦 Arabic	84.90%	0.7965	0.9439	0.8639	947
🇧🇩 Bengali	79.40%	0.7874	0.7939	0.7907	1,000

Average Accuracy: 90.25% across all languages

Specialized Single-Language Models

Architecture : DistilBERT-based
Inference : <19ms
Size : ~135MB each

Language	Model Link	Accuracy
🇰🇷 Korean	Namo-v1-Korean	97.3%
🇹🇷 Turkish	Namo-v1-Turkish	96.8%
🇯🇵 Japanese	Namo-v1-Japanese	93.5%
🇮🇳 Hindi	Namo-v1-Hindi	93.1%
🇩🇪 German	Namo-v1-German	91.9%
🇬🇧 English	Namo-v1-English	91.5%
🇳🇱 Dutch	Namo-v1-Dutch	90.0%
🇮🇳 Marathi	Namo-v1-Marathi	89.7%
🇨🇳 Chinese	Namo-v1-Chinese	88.8%
🇵🇱 Polish	Namo-v1-Polish	87.8%
🇳🇴 Norwegian	Namo-v1-Norwegian	87.3%
🇮🇩 Indonesian	Namo-v1-Indonesian	87.1%
🇵🇹 Portuguese	Namo-v1-Portuguese	86.9%
🇮🇹 Italian	Namo-v1-Italian	86.8%
🇪🇸 Spanish	Namo-v1-Spanish	86.7%
🇩🇰 Danish	Namo-v1-Danish	86.5%
🇻🇳 Vietnamese	Namo-v1-Vietnamese	86.2%
🇫🇷 French	Namo-v1-French	85.0%
🇫🇮 Finnish	Namo-v1-Finnish	84.8%
🇷🇺 Russian	Namo-v1-Russian	84.1%
🇺🇦 Ukrainian	Namo-v1-Ukrainian	82.4%
🇸🇦 Arabic	Namo-v1-Arabic	79.7%
🇧🇩 Bengali	Namo-v1-Bengali	79.2%

Try It Yourself!

We’ve provided an inference script to help you quickly test these models. Just plug it in and start experimenting!

Hugging Face Models: https://huggingface.co/videosdk-live/models
Github Repo Link: https://github.com/videosdk-live/NAMO-Turn-Detector-v1/tree/main

Integration with VideoSDK Agents

For seamless integration into your voice agent pipeline:

from videosdk_agents import NamoTurnDetectorV1, pre_download_namo_turn_v1_model

# Download model files (one-time setup)
# For multilingual (default):
pre_download_namo_turn_v1_model()

# For specific language:
# pre_download_namo_turn_v1_model(language="en")

# Initialize turn detector
turn_detector = NamoTurnDetectorV1() # Multilingual
# turn_detector = NamoTurnDetectorV1(language="en") # English-specific

# Add to your agent pipeline
from videosdk_agents import CascadingPipeline

pipeline = CascadingPipeline(
    stt=your_stt_service,
    llm=your_llm_service,
    tts=your_tts_service,
    turn_detector=turn_detector # Namo integration
)

7. Training & Testing

Each model includes Colab notebooks for training and testing:

Training Notebooks : Fine-tune models on your own datasets
Testing Notebooks : Evaluate model performance on custom data

Visit individual model pages for notebook links:

Looking Ahead: Future Directions

Multi-party turn-taking detection: deciding when one speaker yields to another.
Hybrid signals : combine semantics with prosody, pitch, silence, etc.
Adaptive thresholds & confidence models : dynamic sensitivity based on conversation flow.
Distilled / edge versions for latency-constrained devices.
Continuous learning / feedback loop : let models adapt to usage patterns over time.

Conclusion

NAMO-v1 turns a long-standing bottleneck — turn-taking — into a solved engineering problem. By combining semantic intelligence with real-time speed , it finally allows voice AI systems to feel human, fast, and globally scalable.

Citation

@software{namo2025,
  title={Namo Turn Detector v1: Semantic Turn Detection for Conversational AI},
  author={VideoSDK Team},
  year={2025},
  publisher={Hugging Face},
  url={https://huggingface.co/collections/videosdk-live/namo-turn-detector-v1-68d52c0564d2164e9d17ca97}
}

How to Build an AI Telephony Agent for Inbound and Outbound Calls with Open-source framework

Sagar Kava — Wed, 30 Jul 2025 17:12:54 +0000

What if you could build your own AI-powered voice agent one that can answer and place calls, handle appointment scheduling, route customers, collect feedback, and even run automated surveys, all in real time? In this blog, I'll show you how to build a robust, production-ready AI telephony agent with SIP and VoIP integration using Python, VideoSDK, and the latest AI models all open source and totally extensible.

We'll go step by step from project setup to a working inbound and outbound AI voice agent. You’ll get code you can copy, clear explanations, and links to deeper docs for each component. By the end, you’ll have the foundation for scalable, enterprise-grade customer service automation or custom telephony workflows.

Star VideoSDK Repositoris ⭐️

Get instant notifications for new releases and updates. Your support helps us grow and improve VideoSDK!

videosdk-live / agents

Open-source framework for developing real-time multimodal conversational AI agents.

VideoSDK AI Agents

Open-source framework for developing real-time multimodal conversational AI agents.

Overview

The AI Agent SDK is a Python framework built on top of the VideoSDK Python SDK that enables AI-powered agents to join VideoSDK rooms as participants. This SDK serves as a real-time bridge between AI models (like OpenAI and Gemini) and your users, facilitating seamless voice and media interactions.

#	Feature	Description
1	🎤 Real-time Communication (Audio/Video)	Agents can listen, speak, and interact live in meetings.
2	📞 SIP & Telephony Integration	Seamlessly connect agents to phone systems via SIP for call handling, routing, and PSTN access.
3	🧍 Virtual Avatars	Add lifelike avatars to enhance interaction and presence using Simli.
4	🤖 Multi-Model Support	Integrate with OpenAI, Gemini, AWS NovaSonic, and more.
5	🧩 Cascading Pipeline	Integrates with different providers of STT, LLM, and TTS seamlessly.
6	🧠 Conversational Flow	Manages turn detection and VAD for

…

View on GitHub

Why AI Telephony And Why Now?

Traditional telephony systems are rigid, expensive, and hard to adapt to new business needs. But with AI voice agents and SIP (Session Initiation Protocol), you can build next-generation solutions: think appointment bots, emergency notification systems, automated feedback collectors, and more. The magic lies in combining real-time VoIP telephony (using SIP trunks from providers like Twilio) with advanced AI like Google Gemini or OpenAI for natural conversations and smart call handling.

Architecture Overview: Modular, Extensible, Real-Time

Our architecture separates concerns for maximum flexibility:

SIP Integration (VoIP telephony, call control, DTMF, call transfer, call recording)
AI Voice Agent (Powered by VideoSDK’s agent framework, integrates LLMs, STT, TTS, sentiment analysis)
Session Management (Inbound/outbound call routing, session lifecycle)
Provider Abstraction (Easily switch SIP providers Twilio, Plivo, etc.)
Pluggable AI Capabilities (Swap in Google, OpenAI, or custom models)

You can add features like runtime configuration, call transcription, web dashboards, and more all with Python.

Project Structure

Let’s start by laying out the recommended project structure, just like the demo repo:

ai-telephony-demo/
├── ai/ # AI and LLM plugins (optional, for custom logic)
├── providers/ # Telephony/SIP provider integrations
├── services/ # Business logic, utilities, and workflow services
├── voice_agent.py # Core AI voice agent
├── server.py # FastAPI application and entrypoint
├── config.py # Environment-driven config
├── requirements.txt # Python dependencies

Dependencies

Install the dependencies listed in requirements.txt:

pip install -r requirements.txt

Key dependencies include:

fastapi & uvicorn for the server
videosdk, videosdk-agents, and plugins for agent logic
twilio, google-cloud-speech, google-cloud-texttospeech for SIP & AI
python-dotenv for config

Configuration

Create a .env file in your project root with all the required keys:

VIDEOSDK_AUTH_TOKEN=your_videosdk_auth_token
VIDEOSDK_SIP_USERNAME=your_sip_username
VIDEOSDK_SIP_PASSWORD=your_sip_password
GOOGLE_API_KEY=your_google_api_key
TWILIO_SID=your_twilio_sid
TWILIO_AUTH_TOKEN=your_twilio_auth_token
TWILIO_NUMBER=your_twilio_phone_number

Your config.py loads and validates these:

import os
import logging
from dotenv import load_dotenv

load_dotenv()
logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(name)s - %(levelname)s - %(message)s')
logger = logging.getLogger( __name__ )

class Config:
    VIDEOSDK_AUTH_TOKEN = os.getenv("VIDEOSDK_AUTH_TOKEN")
    VIDEOSDK_SIP_USERNAME = os.getenv("VIDEOSDK_SIP_USERNAME")
    VIDEOSDK_SIP_PASSWORD = os.getenv("VIDEOSDK_SIP_PASSWORD")
    GOOGLE_API_KEY = os.getenv("GOOGLE_API_KEY")
    TWILIO_ACCOUNT_SID = os.getenv("TWILIO_SID")
    TWILIO_AUTH_TOKEN = os.getenv("TWILIO_AUTH_TOKEN")
    TWILIO_NUMBER = os.getenv("TWILIO_NUMBER")

    @classmethod
    def validate(cls):
        required_vars = {
            "VIDEOSDK_AUTH_TOKEN": cls.VIDEOSDK_AUTH_TOKEN,
            "VIDEOSDK_SIP_USERNAME": cls.VIDEOSDK_SIP_USERNAME,
            "VIDEOSDK_SIP_PASSWORD": cls.VIDEOSDK_SIP_PASSWORD,
            "GOOGLE_API_KEY": cls.GOOGLE_API_KEY,
            "TWILIO_SID": cls.TWILIO_ACCOUNT_SID,
            "TWILIO_AUTH_TOKEN": cls.TWILIO_AUTH_TOKEN,
            "TWILIO_NUMBER": cls.TWILIO_NUMBER,
        }
        missing = [v for v, val in required_vars.items() if not val]
        if missing:
            for v in missing:
                logger.error(f"Missing environment variable: {v}")
            raise ValueError(f"Missing required environment variables: {', '.join(missing)}")
        logger.info("All required environment variables are set.")

Config.validate()

The Voice Agent: AI-Powered Call Automation

Your agent logic lives in voice_agent.py. Here’s the real implementation from the repo:

import logging
from typing import Optional, List, Any
from videosdk.agents import Agent

logger = logging.getLogger( __name__ )

class VoiceAgent(Agent):
    """An outbound call agent specialized for medical appointment scheduling."""

    def __init__ (
        self,
        instructions: str = "You are a medical appointment scheduling assistant. Your goal is to confirm upcoming appointments (5th June 2025 at 11:00 AM) and reschedule if needed.",
        tools: Optional[List[Any]] = None,
        context: Optional[dict] = None,
    ) -> None:
        super(). __init__ (
            instructions=instructions,
            tools=tools or []
        )
        self.context = context or {}
        self.logger = logging.getLogger( __name__ )

    async def on_enter(self) -> None:
        self.logger.info("Agent entered the session.")
        initial_greeting = self.context.get(
            "initial_greeting",
            "Hello, this is Neha, calling from City Medical Center regarding your upcoming appointment. Is this a good time to speak?"
        )
        await self.session.say(initial_greeting)

    async def on_exit(self) -> None:
        self.logger.info("Call ended")

You can customize instructions, context, and plug in different tools/plugins for STT, TTS, or LLMs.

The Server: Handling Calls, Routing, and Agent Sessions

The server.py file uses FastAPI to handle incoming SIP webhooks, manage sessions, and glue everything together:

import logging
from fastapi import FastAPI, Request, Form, BackgroundTasks, HTTPException
from fastapi.responses import PlainTextResponse
from config import Config
from models import OutboundCallRequest, CallResponse, SessionInfo
from providers import get_provider
from services import VideoSDKService, SessionManager

logger = logging.getLogger( __name__ )

app = FastAPI(
    title="VideoSDK AI Agent Call Server (Modular)",
    description="Modular FastAPI server for inbound/outbound calls with VideoSDK AI Agent using different providers.",
    version="2.0.0"
)

videosdk_service = VideoSDKService()
session_manager = SessionManager()
sip_provider = get_provider("twilio") # Use your SIP provider

@app.get("/health", response_class=PlainTextResponse)
async def health_check():
    active_sessions = session_manager.get_active_sessions_count()
    return f"Server is healthy. Active sessions: {active_sessions}"

@app.post("/inbound-call", response_class=PlainTextResponse)
async def inbound_call(
    request: Request,
    background_tasks: BackgroundTasks,
    CallSid: str = Form(...),
    From: str = Form(...),
    To: str = Form(...),
):
    logger.info(f"Inbound call received from {From} to {To}. CallSid: {CallSid}")
    try:
        room_id = await videosdk_service.create_room()
        session = await session_manager.create_session(room_id, "inbound")
        background_tasks.add_task(session_manager.run_session, session, room_id)
        sip_endpoint = videosdk_service.get_sip_endpoint(room_id)
        twiml = sip_provider.generate_twiml(sip_endpoint)
        logger.info(f"Responding to {sip_provider.get_provider_name()} inbound call {CallSid} with TwiML to dial SIP: {sip_endpoint}")
        return twiml
    except HTTPException as e:
        logger.error(f"Failed to handle inbound call {CallSid}: {e.detail}")
        return PlainTextResponse(f"<Response><Say>An error occurred: {e.detail}</Say></Response>", status_code=500)
    except Exception as e:
        logger.error(f"Unhandled error in inbound call {CallSid}: {e}", exc_info=True)
        return PlainTextResponse("<Response><Say>An unexpected error occurred. Please try again later.</Say></Response>", status_code=500)

@app.post("/outbound-call")
async def outbound_call(request_body: OutboundCallRequest, background_tasks: BackgroundTasks):
    to_number = request_body.to_number
    initial_greeting = request_body.initial_greeting
    logger.info(f"Request to initiate outbound call to: {to_number}")

    if not to_number:
        raise HTTPException(status_code=400, detail="'to_number' is required.")

    try:
        room_id = await videosdk_service.create_room()
        session = await session_manager.create_session(
            room_id, 
            "outbound", 
            initial_greeting
        )
        background_tasks.add_task(session_manager.run_session, session, room_id)
        sip_endpoint = videosdk_service.get_sip_endpoint(room_id)
        twiml = sip_provider.generate_twiml(sip_endpoint)
        call_result = sip_provider.initiate_outbound_call(to_number, twiml)
        logger.info(f"Outbound call initiated via {sip_provider.get_provider_name()} to {to_number}. "
                   f"Call SID: {call_result['call_sid']}. VideoSDK Room: {room_id}")
        return CallResponse(
            message="Outbound call initiated successfully",
            twilio_call_sid=call_result['call_sid'],
            videosdk_room_id=room_id
        )
    except HTTPException as e:
        logger.error(f"Failed to initiate outbound call to {to_number}: {e.detail}")
        raise e
    except Exception as e:
        logger.error(f"Unhandled error initiating outbound call to {to_number}: {e}", exc_info=True)
        raise HTTPException(status_code=500, detail=f"Failed to initiate outbound call: {e}")

if __name__ == " __main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

Modular Providers, Services, and Models

The demo repo is designed to be modular and extensible:

providers/ contains code for handling different SIP providers (Twilio, Vonage, etc).
services/ manages VideoSDK integration, room/session management, and business logic.
models.py defines request/response data for FastAPI endpoints.

You can easily add or swap providers, business rules, and AI models

Extending with MCP & Agent2Agent Protocol

To enable advanced features like agent-to-agent transfer, call control, and real-time management:

Integrate the MCP protocol for call control, muting, and participant management.
Use the Agent2Agent protocol to automate handoffs and workflows between agents.

You can build on the provided classes and add hooks in your VoiceAgent or session logic to coordinate with these protocols.

Running and Testing

Use tools like ngrok to expose your server to the public internet for SIP webhooks.
Configure your SIP provider (e.g., Twilio) to point to your /inbound-call endpoint.
Trigger inbound or outbound calls and watch your AI agent handle real conversations!

Start your FastAPI server:

uvicorn server:app --reload

Key Takeaways

This open-source project provides a real, modular foundation for AI-powered telephony using SIP, VoIP, and cloud AI.
The code is production-grade and extensible just add your workflows, providers, or AI plugins.
You can enable advanced call control, routing, A2A communication, and more with VideoSDK protocols.

Resources & Next Steps

Explore the ai-telephony-demo repo for the full codebase and more docs.
Learn more about VideoSDK AI Agents, A2A, and MCP.
Build your own use case: appointment scheduling, customer service automation, or scalable feedback collection!

💎 Top 12+ Open-Source Gems to Become the Ultimate Developer

Sagar Kava — Tue, 01 Jul 2025 17:44:41 +0000

Want to take your skills from decent to elite? These open-source repositories are not just popular—they’re packed with practical knowledge, hands-on challenges, and community support. Whether you’re into AI, web dev, system architecture, or interview prep, this list gives you the best open-source projects to grow as a developer.

1. VideoSDK Agents

Python

Build AI agents that support voice, video, screen share, and chat in real time.
Integrates with OpenAI, Claude, Gemini, and Ollama out of the box.
Includes components like ASR (speech-to-text), TTS (text-to-speech), and action plugins.
Perfect for creating AI call assistants, virtual meeting tools, and multimodal chatbots.

2. Build Your Own X

🧠 Markdown

Learn how to build popular systems from scratch: interpreters, compilers, Git, Docker, blockchain, and more.
Language-agnostic resources — build in Python, Go, Rust, or any language you prefer.
Encourages deep learning through creation and reverse engineering.
Ideal for systems programmers, CS students, and low-level enthusiasts.

3. System Design Primer

🧠 Python

Learn how to design scalable and fault-tolerant systems used by companies like Google and Amazon.
Includes diagrams, trade-offs, and real interview questions.
Covers caching, load balancing, queues, microservices, and CAP theorem.
Great for senior devs, backend engineers, and interview preparation.

4. FreeCodeCamp

📘 TypeScript

Learn HTML, CSS, JavaScript, React, Python, and more with structured curriculums.
Earn verified certifications for web development, data science, and machine learning.
Complete thousands of coding exercises and real-world projects.
Backed by one of the largest open-source communities in the world.

5. Lobe Chat

🤖 TypeScript

Deploy your own AI chatbot interface supporting OpenAI, Claude, Gemini, Ollama, and other LLMs.
Beautiful, responsive UI for both desktop and mobile.
Easily customizable with plugins and cloud sync features.
Suitable for self-hosted ChatGPT alternatives or commercial AI apps.

6. Generative AI for Beginners

📓 Jupyter Notebook

Microsoft’s hands-on course to understand and build with generative AI tools.
Includes prompt engineering, embeddings, image generation, and chat interfaces.
Based on real use cases and includes example notebooks to follow along.
Excellent entry point for AI-focused developers and students.

7. Project-Based Learning

📘 Multi-language

Features real-world projects sorted by programming language (Python, JavaScript, Go, Rust, etc.).
Covers areas like web dev, CLI tools, game dev, machine learning, and more.
Each project is linked to detailed tutorials and guides.
Great for portfolio building and practical skill application.

8. Public APIs

🌐 Python

Discover 1,000+ free and open APIs across categories like weather, finance, machine learning, games, etc.
Useful for hackathons, school projects, and startup MVPs.
Includes authentication methods, rate limits, and category filters.
Ideal for building apps fast using public data.

9. Hello Algo

📦 Java (multi-language)

Visual and animated walkthroughs of common data structures and algorithms.
Code examples available in Java, Python, C++, and JavaScript.
Covers recursion, trees, graphs, sorting, backtracking, and more.
Fantastic for algorithm learners and competitive programming prep.

10. Developer Roadmap

🛤️ TypeScript

Detailed visual guides outlining what to learn for each developer path: front-end, back-end, DevOps, etc.
Links to tutorials, articles, tools, and best practices.
Regularly updated with industry trends and modern stacks.
Great for self-taught devs or anyone creating a structured learning plan.

11. Dify

🛠 TypeScript

A full-stack LLM platform to build AI chatbots, agents, workflows, and apps.
Features role-based access, prompt chaining, plugin extensions, and data injection.
Comes with a beautiful admin UI for managing conversations, datasets, and agents.
Excellent for SaaS builders and companies integrating AI into operations.

12. Free Programming Books

📚 Multi-language

Curated list of 1,000+ free books in dozens of programming languages and topics.
Includes books on data structures, algorithms, compilers, web development, machine learning, etc.
Offers multilingual support: English, Spanish, Russian, Arabic, Chinese, and more.
Ideal for lifelong learners, students, and autodidacts.

13. Coding Interview University

📘 Markdown

A complete computer science curriculum tailored for software engineering interviews.
Includes data structures, algorithms, systems design, OS, databases, and more.
Structured as a self-paced plan with resources and reading orders.
Designed by a self-taught engineer who successfully landed a job at Google.

Final Thoughts

If you're serious about growing as a developer—whether you're into AI, backend engineering, frontend design, or systems thinking—these open-source repositories are your best mentors. They’re free, practical, and updated by some of the smartest devs in the industry.

✅ Pro tip: Don’t just read. Fork the repo, build with it, and submit your first PR. That’s how you go from learning to mastering.

Build a AI Voice Agent with Gemini API

Sagar Kava — Fri, 20 Jun 2025 16:22:54 +0000

Learn how to build a fully functional, real-time AI voice agent you can talk to, using Google's GeminiAPI and VideoSDK for robust AI Voice Agent.

Ever wondered how you could talk to an AI, not by typing, but in a natural, real-time conversation? Imagine building a virtual doctor for initial consultations, an AI tutor that explains complex topics, or even a friendly companion to chat with.

Today, we're going to build just that. We'll create a fully functional, real-time AI voice agent that you can talk to directly in your browser. The agent will listen to you, understand what you're saying, and respond with a natural-sounding voice, all in real-time.

We will use the power of Google's Gemini Realtime API for lightning-fast conversational AI, and the robust infrastructure of VideoSDK to handle real-time audio streaming and session management. By the end of this tutorial, you'll have a working app with a React frontend and a Python backend that you can customize and expand upon.

Here's a quick peek at what we're building:

Prerequisites

Before we start, make sure you have the following ready:

Node.js (v16+) and npm/yarn – For our React frontend.
Python (3.8+) and pip – For our FastAPI backend.
A VideoSDK Account – To get your Auth Token for session management.
A Google Account – To get your free Gemini API key from AI Studio.

How to Get Your VideoSDK Auth Token

Your application needs an Auth Token to connect to VideoSDK.

Sign Up: Go to videosdk.live and create a free account.
Navigate to API Keys: Once you're on the dashboard, find "API Keys" in the left-hand menu.
Generate a Token: You'll see your API Key and a "Generate Token" button. Click it to create a new, temporary token.
Copy Your Token: Copy the generated token. This is the value you'll use for VIDEOSDK_TOKEN in your backend and VITE_VIDEOSDK_TOKEN in your frontend. For development, this token is fine, but for production apps, you should generate tokens securely from a server.

How to Get Your Google Gemini API Key

We will use Google AI Studio to get a free API key. This is the simplest way to start building with Gemini.

Go to AI Studio: Open your browser and navigate to https://aistudio.google.com/.
Sign In: Sign in with your Google account.
Get API Key: Look for and click the Get API Key button, usually located in the top left corner.
Create API Key: In the pop-up window, click Create API key in new project.
Copy Your Key: Your new API key will be displayed. Copy it immediately and save it somewhere safe. This is the value you'll use for GOOGLE_API_KEY in your backend .env file.

Project Structure

We'll keep things simple with a monorepo structure.

/gemini-voice-agent
├── client/         # React Frontend
└── server.py       # Python FastAPI Backend

Backend Setup

Let's start by creating our Python server, which will manage the agent's connection to the meeting.

1. Create virtual environment & install dependencies

In your project root, set up a Python virtual environment.

# In the root /gemini-voice-agent directory
python3 -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate
pip install --upgrade pip
pip install fastapi uvicorn python-dotenv "videosdk-agents[google]"

The videosdk-agents[google] package conveniently bundles the core agent SDK with the necessary google plugins.

2. Create `.env` file in the project root

Create a file named .env in the root of your project and add your secret keys.

# .env
GOOGLE_API_KEY=your_google_api_key_from_ai_studio
VIDEOSDK_TOKEN=your_videosdk_auth_token_here

3. Create `server.py`

This file contains all our backend logic. It will expose two endpoints: one to make the agent join a meeting and one to make it leave.

# server.py
from fastapi.middleware.cors import CORSMiddleware
from fastapi import FastAPI, BackgroundTasks
from pydantic import BaseModel
from videosdk.agents import Agent, AgentSession, RealTimePipeline
from videosdk.plugins.google import GeminiRealtime, GeminiLiveConfig
import os
import uvicorn
from dotenv import load_dotenv
import asyncio
from typing import Dict

# Load environment variables from .env file
load_dotenv()

# Configuration
PORT = int(os.getenv("PORT", 8000))

# Initialize FastAPI app
app = FastAPI()

# Add CORS middleware to allow cross-origin requests
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# In-memory storage for active agent sessions
active_sessions: Dict[str, AgentSession] = {}

# Define the Agent's behavior
class MyVoiceAgent(Agent):
    def __init__(self, system_prompt: str, personality: str):
        super().__init__(instructions=system_prompt)
        self.personality = personality

    async def on_enter(self) -> None:
        # A simple greeting when the agent joins
        await self.session.say("Hey, I'm Gemini. How can I help you today?")

    async def on_exit(self) -> None:
        # A simple goodbye when the agent leaves
        await self.session.say("It was nice talking to you. Goodbye!")

# Pydantic models for request body validation
class MeetingReqConfig(BaseModel):
    meeting_id: str
    token: str
    model: str
    voice: str
    personality: str
    temperature: float
    system_prompt: str
    topP: float
    topK: float

class LeaveAgentReqConfig(BaseModel):
    meeting_id: str

# This function contains the long-running agent logic
async def server_operations(req: MeetingReqConfig):
    meeting_id = req.meeting_id

    # Configure Gemini Realtime model from Google
    model = GeminiRealtime(
        model=req.model,
        api_key=os.getenv("GOOGLE_API_KEY"),
        config=GeminiLiveConfig(
            voice=req.voice,
            response_modalities=["AUDIO"], # We only want audio back
            temperature=req.temperature,
            top_p=req.topP,
            top_k=int(req.topK),
        )
    )

    # Create a real-time pipeline to connect the model to the session
    pipeline = RealTimePipeline(model=model)

    # Create the agent session
    session = AgentSession(
        agent=MyVoiceAgent(req.system_prompt, req.personality),
        pipeline=pipeline,
        context={
            "meetingId": meeting_id,
            "name": "Gemini Agent",
            "videosdk_auth": req.token,
        }
    )

    # Store the session so we can manage it later
    active_sessions[meeting_id] = session

    try:
        # Start the session (this is a long-running, blocking call)
        await session.start()
    except Exception as ex:
        print(f"[{meeting_id}] [ERROR] in agent session: {ex}")
    finally:
        # Clean up the session from our active list once it ends
        if active_sessions.get(meeting_id) is session:
            active_sessions.pop(meeting_id, None)

# API endpoint to make the agent join a meeting
@app.post("/join-agent")
async def join_agent(req: MeetingReqConfig, bg_tasks: BackgroundTasks):
    # Run the long-running agent task in the background
    bg_tasks.add_task(server_operations, req)
    return {"message": f"Agent joining meeting {req.meeting_id}"}

# API endpoint to make the agent leave a meeting
@app.post("/leave-agent")
async def leave_agent(req: LeaveAgentReqConfig):
    session = active_sessions.pop(req.meeting_id, None)
    if session:
        # If a session is found, stop it gracefully
        await session.stop()
        return {"status": "removed"}
    return {"status": "not_found"}

if __name__ == "__main__":
    uvicorn.run("server:app", host="0.0.0.0", port=PORT, reload=True)

Breaking Down the Backend

MyVoiceAgent: This class defines our agent's personality and behavior. The instructions parameter in super().__init__ is the system prompt that tells Gemini its role. on_enter and on_exit are lifecycle hooks for greetings and goodbyes.
AgentSession: This is the core component from the VideoSDK Agent SDK. It manages the agent's connection to the VideoSDK meeting room, handling all the complex real-time communication protocols.
GeminiRealtime: This plugin configures the connection to Google's Gemini API, including the model, voice, and response parameters.
BackgroundTasks: The session.start() method is a blocking call that runs as long as the agent is in the meeting. We use FastAPI's BackgroundTasks to run it without freezing our API, allowing us to immediately return a response to the frontend.
active_sessions: This dictionary is a simple way to keep track of running sessions. This allows our /leave-agent endpoint to find and gracefully shut down the correct agent.

Frontend Setup

Now let's build the user interface where we can talk to our agent.

1. Create a new React + TypeScript project

Navigate to your project root and use Vite to scaffold a new app.

# From the root /gemini-voice-agent directory
npm create vite@latest client -- --template react-ts
cd client
npm install

2. Install dependencies

We need the VideoSDK React SDK for meeting controls, lucide-react for icons, and TailwindCSS for styling.

npm install @videosdk.live/react-sdk lucide-react tailwindcss postcss autoprefixer
npx tailwindcss init -p

3. Configure Tailwind CSS

Update tailwind.config.js to tell Tailwind which files to scan for classes.

// client/tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then, add the Tailwind directives to your main CSS file.

/* client/src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

4. Create a frontend `.env` file

In the client directory, create a .env file for your client-side environment variables.

# client/.env
VITE_VIDEOSDK_TOKEN=your_videosdk_auth_token_here
VITE_API_URL=http://localhost:8000

Note: Vite requires environment variables exposed to the browser to be prefixed with VITE_.

5. Build the React User Interface

Replace the contents of client/src/App.tsx with the following code. This component will handle creating a meeting, joining it, inviting the agent, and playing the agent's audio.

// client/src/App.tsx
import React, { useEffect, useMemo, useRef, useState } from "react";
import {
  MeetingProvider,
  useMeeting,
  useParticipant,
} from "@videosdk.live/react-sdk";
import { Mic, MicOff } from "lucide-react";

// Component to play the agent's audio
const AgentAudioPlayer = ({ participantId }: { participantId: string }) => {
  const { micStream, isMicOn } = useParticipant(participantId);
  const audioRef = useRef<HTMLAudioElement>(null);

  useEffect(() => {
    if (audioRef.current && micStream) {
      const mediaStream = new MediaStream();
      mediaStream.addTrack(micStream.track);
      audioRef.current.srcObject = mediaStream;
      audioRef.current.play().catch((err) => {
        console.error("Error playing audio:", err);
      });
    }
  }, [micStream]);

  return <>{isMicOn && <audio ref={audioRef} autoPlay style={{ display: "none" }} />}</>;
};

// Main meeting view component
const MeetingView = ({ meetingId, onLeave }: { meetingId: string, onLeave: () => void }) => {
  const { join, leave, toggleMic, localParticipant, participants } = useMeeting();

  const agentParticipant = useMemo(
    () => [...participants.values()].find(p => p.displayName === "Gemini Agent"),
    [participants]
  );

  useEffect(() => {
    // Call the backend to invite the agent when the user joins
    fetch(`${import.meta.env.VITE_API_URL}/join-agent`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        meeting_id: meetingId,
        token: import.meta.env.VITE_VIDEOSDK_TOKEN,
        // Agent Configuration - you can customize this
        model: "gemini-1.5-pro-latest",
        voice: "en-US-Standard-C",
        personality: "friendly",
        temperature: 0.9,
        system_prompt: "You are a helpful AI assistant. Keep your responses concise and to the point.",
        topP: 1,
        topK: 40,
      }),
    });

    return () => {
      // Call the backend to make the agent leave when the component unmounts
      fetch(`${import.meta.env.VITE_API_URL}/leave-agent`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ meeting_id: meetingId }),
      });
    };
  }, [meetingId]);

  return (
    <div className="flex flex-col items-center justify-center h-full p-4">
      <h2 className="text-2xl font-bold mb-4">Meeting ID: {meetingId}</h2>
      <div className="flex items-center justify-center space-x-4">
        <div className="flex flex-col items-center">
          <div className="w-24 h-24 bg-gray-700 rounded-full flex items-center justify-center">
            <p className="text-3xl">You</p>
          </div>
          <p>{localParticipant.displayName}</p>
        </div>
        {agentParticipant ? (
          <div className="flex flex-col items-center">
            <div className="w-24 h-24 bg-blue-600 rounded-full flex items-center justify-center">
              <p className="text-3xl">AI</p>
            </div>
            <p>{agentParticipant.displayName}</p>
            <AgentAudioPlayer participantId={agentParticipant.id} />
          </div>
        ) : (
          <div className="flex flex-col items-center">
             <div className="w-24 h-24 bg-gray-700 rounded-full flex items-center justify-center animate-pulse">
              <p className="text-3xl">AI</p>
            </div>
            <p>Agent is joining...</p>
          </div>
        )}
      </div>

      <div className="mt-8 flex space-x-4">
        <button onClick={() => toggleMic()} className="p-3 bg-gray-600 rounded-full">
          {localParticipant.isMicOn ? <Mic /> : <MicOff />}
        </button>
        <button onClick={() => {
          leave();
          onLeave();
        }} className="px-4 py-2 bg-red-500 rounded-lg">Leave</button>
      </div>
    </div>
  );
};

// Main App component
function App() {
  const [meetingId, setMeetingId] = useState<string | null>(null);

  const createMeeting = async () => {
    try {
      const res = await fetch(`https://api.videosdk.live/v2/rooms`, {
        method: "POST",
        headers: {
          authorization: `${import.meta.env.VITE_VIDEOSDK_TOKEN}`,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({}),
      });
      const { roomId } = await res.json();
      setMeetingId(roomId);
    } catch (error) {
      console.error("Error creating meeting:", error);
      alert("Failed to create meeting.");
    }
  };

  const onMeetingLeave = () => {
    setMeetingId(null);
  }

  return meetingId ? (
    <MeetingProvider
      config={{
        meetingId,
        micEnabled: true,
        webcamEnabled: false,
        name: "User",
        token: import.meta.env.VITE_VIDEOSDK_TOKEN,
      }}
      joinWithoutUserInteraction
    >
      <MeetingView meetingId={meetingId} onLeave={onMeetingLeave} />
    </MeetingProvider>
  ) : (
    <div className="h-screen w-screen flex flex-col items-center justify-center bg-gray-800 text-white">
      <h1 className="text-4xl font-bold mb-8">Gemini AI Voice Agent</h1>
      <button onClick={createMeeting} className="px-6 py-3 bg-blue-600 rounded-lg text-xl">
        Start a Conversation
      </button>
    </div>
  );
}

export default App;

Breaking Down the Frontend

MeetingProvider: This is the top-level wrapper from the VideoSDK React SDK. It provides the meeting context to all child components.
useMeeting() hook: This powerful hook gives us access to all essential meeting functions like join, leave, toggleMic, and the list of participants.
useParticipant() hook: This hook provides real-time information about a specific participant, including their micStream, which contains the raw audio data.
AgentAudioPlayer Component: This small component is crucial. It takes the agent's participantId, gets the micStream using the useParticipant hook, and pipes it into a standard HTML <audio> element to be played.
API Calls: When the user joins the meeting, a useEffect hook fires a POST request to our /join-agent backend endpoint. The cleanup function of the useEffect fires when the user leaves, calling the /leave-agent endpoint to ensure the agent is removed from the call and server resources are freed.

🚀 Run the App

It's time to see our creation in action! You'll need two separate terminal windows.

1. Start the Backend Server

In your first terminal, at the project root:

# Make sure your virtual environment is active
source venv/bin/activate 

# Start the server
uvicorn server:app --host 0.0.0.0 --port 8000 --reload

2. Start the Frontend App

In your second terminal, navigate to the client directory:

cd client
npm run dev

Now, open your browser and go to http://localhost:5173. Click "Start a Conversation," allow microphone permissions, and start talking to your very own AI agent!

Conclusion

Congratulations! You've successfully built a fully functional, real-time AI voice agent using Google Gemini and VideoSDK. You've learned how to:

Set up a Python backend to manage an AI agent.
Connect to Google's Gemini Realtime API for conversational AI.
Use VideoSDK to handle real-time audio streaming and session management.
Build a React frontend to interact with the agent in a browser.

This is just the beginning. You can now customize the agent's system prompt, personality, and even give it new tools and capabilities.

If you build something cool with this, we'd love to see it. Share it on X/Twitter and tag @video_sdk!

Happy hacking! 🚀

Build a Video Calling App with Call Trigger in Android (Kotlin) using Firebase and VideoSDK

Sagar Kava — Wed, 27 Nov 2024 07:40:04 +0000

In a world where connectivity through audio and video calls is essential, if you're planning to create a video-calling app with call-trigger functionality, you've come to the right place.

In this tutorial, we will build a comprehensive video calling app for Android that enables smooth call handling and high-quality video communication. We’ll utilize the Telecom Framework to manage call functionality, Firebase for real-time data synchronization, and VideoSDK to deliver clear, reliable video conferencing.

Take a moment to watch the video demonstration and review the complete codefor the sample app to see exactly what you'll be building in this blog.

Understanding the Telecom Framework

Before we get started, let’s take a closer look at the Telecom Framework. This framework manages both audio and video calls on Android devices, supporting traditional SIM-based calls as well as VoIP calls via the ConnectionService API.

The major components that Telecom manages are ConnectionService and InCallService:

ConnectionService handles the technical aspects of call connections, managing states, and audio/video routing.
InCallService manages the user interface, allowing users to see and interact with ongoing calls.

Understanding how the app will function internally before building it will make the development process smoother.

App Functionality Overview

To understand how the app functions, consider the following scenario: John wants to call his friend Max . John opens the app, enters Max's caller ID, and presses "Call." Max sees an incoming call UI on his device, with options to accept or reject the call. If he accepts, a video call is established between them using VideoSDK.

Steps in the Process:

User Action : John enters Max's Caller ID and initiates the call.
Database and Notification : The app maps the ID in the Firebase database and sends a notification to Max's device.
Incoming Call UI : Max’s device receives the notification, triggering the incoming call UI using the Telecom Framework.
Call Connection : If Max accepts, the video call begins using VideoSDK.

Here is a pictorial representation of the flow for better understanding.

Now that we have established the flow of the app and how it functions, let's get started with development!

Core Functionality of the App

The app relies on several key libraries to manage video calling and notifications:

Android Telecom Framework : Manages call routing and interaction with the system UI for incoming and outgoing calls.
Retrofit : Used for sending and receiving API requests, including call initiation and status updates.
Firebase Cloud Messaging (FCM): Handles push notifications to trigger call events.
Firebase Realtime Database : Stores user tokens and caller IDs for establishing video calls.
VideoSDK : Manages the actual video conferencing features.

Prerequisites

Android Studio (for Android app development)
Firebase Project (for notifications and database management)
VideoSDK Account (for video conferencing functionality)
Node.js and Firebase Tools (for backend development)

Make sure you have a basic understanding of Android development, Retrofit, and Firebase Cloud Messaging.

Now that we've covered the prerequisites, let's dive into building the app.

Android App Setup

Add Dependencies

In yoursettings.gradle, add Jetpack and Maven repositories:

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url 'https://www.jitpack.io' }
        maven { url "https://maven.aliyun.com/repository/jcenter" }
    }
}

In your build.gradle file, add the following dependencies:

   //VideoSdk
    implementation 'live.videosdk:rtc-android-sdk:0.1.35'
    implementation 'com.nabinbhandari.android:permissions:3.8'
    implementation 'com.amitshekhar.android:android-networking:1.0.2'

    //Firebase
    implementation 'com.google.firebase:firebase-messaging:23.0.0'
    implementation platform('com.google.firebase:firebase-bom:33.4.0')
    implementation 'com.google.firebase:firebase-analytics'

    //Retrofit
    implementation 'com.squareup.retrofit2:retrofit:2.9.0'
    implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
    implementation 'com.squareup.retrofit2:converter-scalars:2.9.0'

Set Permissions in `AndroidManifest.xml`

Ensure the following permissions are configured:

    <uses-feature
        android:name="android.hardware.camera"
        android:required="false" />
    <uses-feature
        android:name="android.hardware.telephony"
        android:required="false" />

    <uses-permission android:name="android.permission.ANSWER_PHONE_CALLS" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />

How to Configure Firebase for Notifications and Realtime Database

[a] Firebase Setup for Notifications & Realtime Database

Step 1: Add Firebase to Your Android App

Go to the Firebase Console and create a new project.
Download the google-services.json file and place it in your project’s app/ directory

Step 2: Add Firebase Dependencies

In your build.gradle files, add the necessary Firebase dependencies:

// Project-level build.gradle
classpath 'com.google.gms:google-services:4.3.10'

// App-level build.gradle
apply plugin: 'com.google.gms.google-services'

implementation 'com.google.firebase:firebase-messaging:23.0.0'
implementation 'com.google.firebase:firebase-database:20.0.0'

Step 3: Enable Firebase Messaging and Real-time Database

Enable Firebase Cloud Messaging (FCM) and Realtime Database in the Firebase console under your project settings.

Step 4: Firebase Service Configuration

Ensure your app is registered in Firebase, and implement a FirebaseMessagingService to handle notifications, which we will do later.

[b] Firebase Server-Side Setup (serviceAccount.json file)

To set up Firebase Admin SDK for your server, follow these steps:

Go to the Firebase Console and select your project.
In Project Settings , navigate to the Service Accounts tab.
Click on Generate a new private key to download your service account JSON file. This file will be named something like <your-project>-firebase-adminsdk-<unique-id>.json.

Project Structure

Root/
├── app/
│ ├── src/
│ │ ├── main/
│ │ │ ├── java/
│ │ │ │ ├── FirebaseDatabase/
│ │ │ │ │ └── DatabaseUtils.kt
│ │ │ │ ├── Meeting/
│ │ │ │ │ ├── MeetingActivity.kt
│ │ │ │ │ └── ParticipantAdapter.kt
│ │ │ │ ├── Network/
│ │ │ │ │ ├── ApiClient.kt
│ │ │ │ │ ├── ApiService.kt
│ │ │ │ │ ├── NetworkCallhandler.kt
│ │ │ │ │ └── NetworkUtils.kt
│ │ │ │ ├── Services/
│ │ │ │ │ ├── CallConnectionService.kt
│ │ │ │ │ ├── MyFirebaseMessagingService.kt
│ │ │ │ │ └── MyInCallService.kt
│ │ │ │ ├── MainActivity.kt
│ │ │ │ ├── MainApplication.kt
│ │ │ │ └── MeetingIdCallBack.kt
│ │ ├── res/
│ │ │ └── layout/
│ │ │ ├── activity_main.xml
│ │ │ ├── activity_meeting.xml
│ │ │ └── item_remote_peer.xml
├── build.gradle
└── settings.gradle

Let's get started with the basic UI of the call-initiating screen.

UI Development

The MainActivity layout provides the initial screen where users can initiate video calls. The key components include:

Caller ID Input : An EditText for entering the unique caller ID to initiate a call.
Call Button : A button to trigger the call.
Unique ID Display : Displays a unique ID for each user.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:background="?android:attr/windowBackground">

    <com.google.android.material.appbar.MaterialToolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:title="VideoSDK CallKit Example"
        app:titleTextColor="@color/white"
        android:background="?attr/colorPrimaryDark"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="vertical"
        android:gravity="center"
        android:padding="24dp"
        android:layout_weight="1">

   <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background_normal"
        android:orientation="vertical"
        android:layout_marginBottom="50dp"
        android:backgroundTint="#E7E1E1">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Your Caller ID"
            android:textSize="23sp"
            android:textColor="@color/black"
            android:paddingLeft="12dp"
            android:paddingRight="12dp"
            android:fontFamily="sans-serif-medium"
            android:gravity="center"
            android:elevation="4dp"
            android:layout_margin="8dp"
            android:clipToOutline="true"
            />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/black"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center"
            >
            <TextView
                android:id="@+id/txt_callId"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Call Id"
                android:textSize="32sp"
                android:textColor="@color/black"
                android:paddingLeft="12dp"
                android:paddingRight="12dp"
                android:fontFamily="sans-serif-medium"
                android:gravity="center"
                android:layout_margin="8dp"
                android:textIsSelectable="true"
                android:clipToOutline="true"
                />

            <ImageView
                android:id="@+id/copyIcon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/baseline_content_copy_24"
                android:padding="8dp"
                />
        </LinearLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background_normal"
        android:orientation="vertical"
        android:gravity="center"
        android:backgroundTint="#E7E1E1"
        android:padding="14dp"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Enter call ID of user you want to call"
            android:textSize="23sp"
            android:textColor="@color/black"
            android:fontFamily="sans-serif-medium"
            android:elevation="4dp"
            android:layout_marginBottom="20dp"
            />

        <EditText
            android:inputType="number"
            android:id="@+id/caller_id_input"
            android:layout_width="match_parent"
            android:layout_height="64dp"
            android:hint="Enter Caller ID"
            android:layout_marginBottom="10dp"
            android:background="@android:drawable/editbox_background_normal"
            android:textSize="18sp"
            android:textColor="@android:color/black"
            android:gravity="center"/>

        <Button
            android:id="@+id/call_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Call"
            android:padding="16dp"
            android:layout_marginTop="20dp"
            android:textSize="18sp"
            android:textColor="@android:color/white"
            />

    </LinearLayout>

    </LinearLayout>
</LinearLayout>

activity_main.xml

This is how the UI will look:

With the UI for calling in place let's start with the actual calling development.

Firebase Messaging for Call Initiation

To initiate the call process, we first need to secure user permission to manage notifications and calls.

class MainActivity : AppCompatActivity() {
    private lateinit var callerIdInput: EditText
    private lateinit var myId: TextView
    private lateinit var copyIcon: ImageView
    private var myCallId: String = (10000000 + Random().nextInt(90000000)).toString()
    private lateinit var FcmToken: String

    @RequiresApi(Build.VERSION_CODES.O)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        checkSelfPermission(REQUESTED_PERMISSIONS[0], PERMISSION_REQ_ID)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
            checkSelfPermission(REQUESTED_PERMISSIONS[1], PERMISSION_REQ_ID)
        }
    }

    override fun onRequestPermissionsResult(requestCode: Int, permissions: Array<String>, grantResults: IntArray
    ) {
        super.onRequestPermissionsResult(requestCode, permissions, grantResults)
        if (requestCode == 133) {
            var allPermissionsGranted = true
            for (result in grantResults) {
                if (result != PackageManager.PERMISSION_GRANTED) {
                    allPermissionsGranted = false
                    break
                }
            }

            if (allPermissionsGranted) {
                registerPhoneAccount()
            } else {
                Toast.makeText(this, "Permissions are required for call management", Toast.LENGTH_LONG).show()
            }
        }
    }

    private fun checkSelfPermission(permission: String, requestCode: Int): Boolean {
        if (ContextCompat.checkSelfPermission(this, permission) != PackageManager.PERMISSION_GRANTED)
        {
            ActivityCompat.requestPermissions(this, REQUESTED_PERMISSIONS, requestCode)
            return false
        }
        return true
    }

    companion object {
        private const val PERMISSION_REQ_ID = 22

        private val REQUESTED_PERMISSIONS = arrayOf(
            Manifest.permission.READ_PHONE_STATE,
            Manifest.permission.POST_NOTIFICATIONS
        )
    }
}

Once permission is granted, the next step is to identify each user and retrieve their messaging token, enabling us to send notifications effectively.

Don't worry if you encounter an error due to a missing file. Please continue following the steps, as the required file will be provided later in the guide.

class MainActivity : AppCompatActivity() {
    private lateinit var callerIdInput: EditText
    private lateinit var myId: TextView
    private lateinit var copyIcon: ImageView
    private var myCallId: String = (10000000 + Random().nextInt(90000000)).toString()
    private lateinit var FcmToken: String

    @RequiresApi(Build.VERSION_CODES.O)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        myId = findViewById(R.id.txt_callId)
        callerIdInput = findViewById(R.id.caller_id_input)

        copyIcon = findViewById(R.id.copyIcon)
        val callButton = findViewById<Button>(R.id.call_button)
        myId.text = myCallId

        val clipboardManager = getSystemService(CLIPBOARD_SERVICE) as ClipboardManager
        val clipData = ClipData.newPlainText("copied text", myCallId)

        copyIcon.setOnClickListener {
            clipboardManager.setPrimaryClip(clipData)
            Toast.makeText(this, "Copied to clipboard", Toast.LENGTH_SHORT).show()
        }

        NetworkCallHandler.myCallId = myCallId
        DatabaseUtils.myCallId = myCallId

        NetworkUtils().createMeeting(object : MeetingIdCallBack {
            override fun onMeetingIdReceived(meetingId: String, token: String) {
                MainApplication.meetingId=meetingId

            }
        })
        //Firebase Notification
        val channel = NotificationChannel("notification_channel", "notification_channel",
            NotificationManager.IMPORTANCE_DEFAULT
        )
        val manager = getSystemService(NotificationManager::class.java)
        manager.createNotificationChannel(channel)
        FirebaseMessaging.getInstance().subscribeToTopic("general")
            .addOnCompleteListener { task ->
                var msg = "Subscribed Successfully"
                if (!task.isSuccessful) {
                    msg = "Subscription failed"
                }
                Toast.makeText(this@MainActivity, msg, Toast.LENGTH_SHORT).show()
            }

        //Firebase Database Actions
        val databaseUtils = DatabaseUtils()
        val databaseReference = FirebaseDatabase.getInstance().reference
        FirebaseMessaging.getInstance().token.addOnCompleteListener { task: Task<String> ->
            FcmToken = task.result
            NetworkCallHandler.FcmToken = task.result
            DatabaseUtils.FcmToken = task.result
            databaseUtils.sendUserDataToFirebase(databaseReference)
        }

        //telecom Api
        registerPhoneAccount()

        callButton.setOnClickListener {
            val callerNumber = callerIdInput.text.toString()
            if (callerNumber.length == 8) {
                databaseUtils.retrieveUserData(databaseReference, callerNumber)
            } else {
                Toast.makeText(
                    this@MainActivity,
                    "Please input the correct caller ID",
                    Toast.LENGTH_SHORT
                ).show()
            }
        }
    }

    private fun registerPhoneAccount() {
        val phoneAccount = PhoneAccount.builder(MainApplication.phoneAccountHandle, "VideoSDK")
            .setCapabilities(PhoneAccount.CAPABILITY_CALL_PROVIDER)
            .build()

        MainApplication.telecomManager?.registerPhoneAccount(phoneAccount)

        if (ActivityCompat.checkSelfPermission(
                this,
                Manifest.permission.READ_PHONE_STATE
            ) != PackageManager.PERMISSION_GRANTED
        ) {
            return
        }
        var checkAccount = 0
        val list: List<PhoneAccountHandle> =
            MainApplication.telecomManager!!.callCapablePhoneAccounts
        for (handle in list) {
            if (handle.componentName.className == "live.videosdk.ConnectionService.quickstart.Services.CallConnectionService") {
                checkAccount++
                break
            }
        }
        if (checkAccount == 0) {
            val intent = Intent(TelecomManager.ACTION_CHANGE_PHONE_ACCOUNTS)
            startActivity(intent)
        }
    }
}

Check if the FirebaseMessaging token is already present in the database. If it exists, update the callee ID; otherwise, create a new entry in the database.

class DatabaseUtils {
    companion object{
    lateinit var myCallId: String
    lateinit var FcmToken: String
}
 private lateinit var calleeInfoToken : String

    val networkUtils: NetworkCallHandler = NetworkCallHandler()
    fun sendUserDataToFirebase(databaseReference: DatabaseReference) {
        val usersRef = databaseReference.child("User")

        usersRef.orderByChild("token").equalTo(FcmToken)
            .addListenerForSingleValueEvent(object : ValueEventListener {
                override fun onDataChange(dataSnapshot: DataSnapshot) {
                    if (dataSnapshot.exists()) {
                        // Token exists, update the callerId
                        for (userSnapshot in dataSnapshot.children) {
                            userSnapshot.ref.child("callerId").setValue(myCallId)
                                .addOnSuccessListener { aVoid: Void? ->
                                    Log.d("FirebaseData", "CallerId successfully updated.")
                                }
                                .addOnFailureListener { e: Exception? ->
                                    Log.e("FirebaseError", "Failed to update callerId.", e)
                                }
                        }
                    } else {
                        // Token doesn't exist, create new entry
                        val userId = usersRef.push().key
                        val map: MutableMap<String, Any?> = HashMap()
                        map["callerId"] = myCallId
                        map["token"] = FcmToken

                        if (userId != null) {
                            usersRef.child(userId).setValue(map)
                                .addOnSuccessListener { aVoid: Void? ->
                                    Log.d("FirebaseData", "Data successfully saved.")
                                }
                                .addOnFailureListener { e: Exception? ->
                                    Log.e("FirebaseError", "Failed to save data.", e)
                                }
                        }
                    }
                }

                override fun onCancelled(databaseError: DatabaseError) {
                    Log.e(
                        "FirebaseError",
                        "Error checking for existing token",
                        databaseError.toException()
                    )
                }
            })
    }
}

When the call is initiated, first verify if the caller ID exists in the Firebase database. If it does, proceed to invoke the notification method.

class DatabaseUtils {

    fun retrieveUserData(databaseReference: DatabaseReference, callerNumber: String) {
        databaseReference.child("User").orderByChild("callerId").equalTo(callerNumber)
            .addListenerForSingleValueEvent(object : ValueEventListener {
                override fun onDataChange(snapshot: DataSnapshot) {
                    if (snapshot.exists()) {
                        for (data in snapshot.children) {
                            val token = data.child("token").getValue(
                                String::class.java
                            )
                            if (token != null) {
                                calleeInfoToken = token
                                NetworkCallHandler.calleeInfoToken = token
                                networkUtils.initiateCall()
                                break
                            }
                        }
                    } else {
                        Log.d("TAG", "retrieveUserData: No matching callerId found")
                    }
                }

                override fun onCancelled(error: DatabaseError) {
                    Log.e("FirebaseError", "Failed to read data from Firebase", error.toException())
                }
            })
    }
}

We'll configure the VideoSDK token and Meeting ID as soon as the home screen loads, ensuring they're ready when the user initiates a call.

class NetworkUtils {
    //Replace with the token you generated from the VideoSDK Dashboard
    var sampleToken: String = MainApplication.token
    fun createMeeting(callBack: MeetingIdCallBack) {

        AndroidNetworking.post("https://api.videosdk.live/v2/rooms")
            .addHeaders("Authorization", sampleToken) //we will pass the token in the Headers
            .build()
            .getAsJSONObject(object : JSONObjectRequestListener {
                override fun onResponse(response: JSONObject) {
                    try {
                        // response will contain `roomId`
                        val meetingId = response.getString("roomId")
                        callBack.onMeetingIdReceived(meetingId,sampleToken)
                        //
                    } catch (e: JSONException) {
                        e.printStackTrace()
                        Log.d("TAG", "onResponse: $e")
                    }
                }

                override fun onError(anError: ANError) {
                    anError.printStackTrace()
                    Log.d("TAG", "onError: ")
                }
            })
    }
}

The MeetingIdCallBack the interface allows us to receive the meetingId and token in our MainActivity

interface MeetingIdCallBack {
    fun onMeetingIdReceived(meetingId: String, token: String)
}

using onMeetingIdReceived callback method to get meetingId and token.

class MainActivity : AppCompatActivity() {

    @RequiresApi(Build.VERSION_CODES.O)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

            NetworkUtils().createMeeting(object : MeetingIdCallBack {
            override fun onMeetingIdReceived(meetingId: String, token: String) {
                MainApplication.meetingId=meetingId

            }
        })
    }
}

The next step is to initiate the call.

For this, we’ll set up an Express server with two APIs as Firebase functions—one to trigger notifications on the other device and another to update the call status (accepted or rejected).

Start by importing and initializing the required packages in server.js .

we will also need to initialize Firebase Admin SDK.

const functions = require("firebase-functions");
const express = require("express");
const cors = require("cors");
const morgan = require("morgan");
var admin = require("firebase-admin");
const { v4: uuidv4 } = require("uuid");

const app = express();
app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(morgan("dev"));

// Path to your service account key file for Firebase Admin SDK
var serviceAccount = require("add_path_here");

// Initialize Firebase Admin SDK
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "database_url" // Replace with your database URL
});

// Home Route
app.get("/", (req, res) => {
  res.send("Hello World!");
});

// Start the Express server
app.listen(9000, () => {
  console.log(`API server listening at http://localhost:9000`);
});

// Export app as a Firebase Cloud Function
exports.app = functions.https.onRequest(app);

The first API we need is initiate-call, which will be used to send a notification to the receiving user and start the call by sending details like caller information and VideoSDK room details.

// Initiate call notification (for Android)
app.post("/initiate-call", (req, res) => {
  const { calleeInfo, callerInfo, videoSDKInfo } = req.body;

  var FCMtoken = calleeInfo.token;
    const info = JSON.stringify({
      callerInfo,
      videoSDKInfo,
      type: "CALL_INITIATED",
    });
    var message = {
      data: {
        info,
      },
      android: {
        priority: "high",
      },
      token: FCMtoken,
    };

  // Send the FCM message using firebase-admin
  admin.messaging().send(message)
    .then((response) => {
      console.log("Successfully sent FCM message:", response);
      res.status(200).send(response);
    })
    .catch((error) => {
      console.log("Error sending FCM message:", error);
      res.status(400).send("Error sending FCM message: " + error);
    });
});

The second API we need is update-call, which updates the status of the incoming call (such as accepted, rejected, etc.) and sends a notification to the caller.

// Update call notification (for Android)
app.post("/update-call", (req, res) => {
  const { callerInfo, type } = req.body;
  const info = JSON.stringify({
    callerInfo,
    type,
  });

  var message = {
    data: {
      info,
    },
    token: callerInfo.token,
  };
  var message = {
    data: { info },
    token: callerInfo.token, // Token for the target device
    android: {
      priority: "high",
      notification: {
        title: "Call Updated",
        body: "Your call has been updated by " + callerInfo.name,
      },
    },
  };

  // Send the update message through firebase-admin
  admin.messaging().send(message)
    .then((response) => {
      console.log("Successfully updated call:", response);
      res.status(200).send(response);
    })
    .catch((error) => {
      console.log("Error updating call:", error);
      res.status(400).send("Error updating call: " + error);
    });
});

Now that the APIs are created, we will trigger them from the app.

Here the FCM_SERVER_URL needs to be updated with the URL of your Firebase functions.

You can either deploy the server or run the server in a local environment using npm run server.js

If you're running it on a local device, you need to use the device's IP address.

object ApiClient {
// Base URL for the API endpoint, replace "YOUR_BASE_URL" with the actual URL. e.g http://172.20.10.6:9000/
    private const val BASE_URL = "YOUR_BASE_URL" 
    private var retrofit: Retrofit? = null

    val client: Retrofit?
        get() {
            if (retrofit == null) {
                retrofit = Retrofit.Builder()
                    .baseUrl(BASE_URL) // ScalarsConverterFactory handles plain text responses
                    .addConverterFactory(ScalarsConverterFactory.create()) // GsonConverterFactory handles JSON responses
                    .addConverterFactory(GsonConverterFactory.create())
                    .build()
            }
            return retrofit
        }
}

Now, let's define endpoints for API Calls.

interface ApiService {

    @POST("/initiate-call")
    @JvmSuppressWildcards
    fun initiateCall(@Body callRequestBody: Map<String, Any>): Call<String>

    @POST("/update-call")
    @JvmSuppressWildcards
    fun updateCall(@Body callUpdateBody: Map<String, Any>): Call<String>
}

Initiates a call by sending caller, callee, and VideoSDK information to the server

and handles the server response and logs success or failure accordingly.

class NetworkCallHandler {

    fun initiateCall() {
        val apiService: ApiService = ApiClient.client!!.create(ApiService::class.java)

        val callerInfo: MutableMap<String, String> = HashMap()
        val calleeInfo: MutableMap<String, String> = HashMap()
        val videoSDKInfo: MutableMap<String, String> = HashMap()

        // callerInfo
        callerInfo["callerId"] = myCallId
        callerInfo["token"] = FcmToken
        // calleeInfo
        calleeInfo["token"] = calleeInfoToken
        // videoSDKInfo
        videoSDKInfo["meetingId"] = MainApplication.meetingId ?: return
        videoSDKInfo["token"] = MainApplication.token

        val callRequestBody: MutableMap<String, Any> = HashMap()
        callRequestBody["callerInfo"] = callerInfo
        callRequestBody["calleeInfo"] = calleeInfo
        callRequestBody["videoSDKInfo"] = videoSDKInfo

        val call: Call<String> = apiService.initiateCall(callRequestBody)
        call.enqueue(object : Callback<String> {
            override fun onResponse(call: Call<String>, response: Response<String>) {
                if (response.isSuccessful) {
                    Log.d("API", "Call initiated: " + response.body())
                } else {
                    Log.e("API", "Failed to initiate call: " + response.message())
                }
            }

            override fun onFailure(call: Call<String>, t: Throwable) {
                Log.e("API", "API call failed: " + t.message)
            }
        })
    }
}

The notification sent is now configured. Now we need to invoke the call when you receive the notification.

You can extract all the information from the notification body, which will help us to create a meeting.

class MyFirebaseMessagingService : FirebaseMessagingService() {

    companion object {
        private const val TAG = "FCMService"
        private const val CHANNEL_ID = "notification_channel"
        lateinit var FCMtoken: String
    }

    private var callerID: String? = null
    private var meetingId: String? = null
    private var token: String? = null

    override fun onNewToken(token: String) {
        super.onNewToken(token)
    }

    @RequiresApi(Build.VERSION_CODES.O)
    override fun onMessageReceived(remoteMessage: RemoteMessage) {
        val data = remoteMessage.data

        if (data.isNotEmpty()) {
            try {
                val `object` = JSONObject(data["info"]!!)

                val callerInfo = `object`.getJSONObject("callerInfo")
                callerID = callerInfo.getString("callerId")
                FCMtoken = callerInfo.getString("token")

                if (`object`.has("videoSDKInfo")) {
                    val videoSdkInfo = `object`.getJSONObject("videoSDKInfo")
                    meetingId = videoSdkInfo.getString("meetingId")
                    token = videoSdkInfo.getString("token")
                    handleIncomingCall(callerID)
                }

                val type = `object`.getString("type")
                when (type) {
                    "ACCEPTED" -> startMeeting()
                    "REJECTED" -> {
                        showIncomingCallNotification(callerID)
                        Handler(Looper.getMainLooper()).post {
                            Toast.makeText(applicationContext, "CALL REJECTED FROM CALLER ID: $callerID", Toast.LENGTH_SHORT).show()
                        }
                    }
                }

            } catch (e: JSONException) {
                throw RuntimeException(e)
            }
        } else {
            Log.d(TAG, "onMessageReceived: No data found in the notification payload.")
        }
    }

    private fun startMeeting() {
        val intent = Intent(applicationContext, MeetingActivity::class.java).apply {
            addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
            putExtra("meetingId", MainApplication.meetingId)
            putExtra("token", MainApplication.token)
        }
        startActivity(intent)
    }

    private fun handleIncomingCall(callerId: String?) {
        val extras = Bundle().apply {
            val uri = Uri.fromParts("tel", callerId, null)
            putParcelable(TelecomManager.EXTRA_INCOMING_CALL_ADDRESS, uri)
            putString("meetingId", meetingId)
            putString("token", token)
            putString("callerID", callerId)
        }

        try {
            MainApplication.telecomManager?.addNewIncomingCall(MainApplication.phoneAccountHandle, extras)
        } catch (cause: Throwable) {
            Log.e("handleIncomingCall", "error in addNewIncomingCall", cause)
        }
    }

    @RequiresApi(Build.VERSION_CODES.O)
    private fun showIncomingCallNotification(callerId: String?) {
        createNotificationChannel()

        val intent = Intent(this, MainActivity::class.java)
        val pendingIntent = PendingIntent.getActivity(this, 0, intent, PendingIntent.FLAG_MUTABLE)

        val notification = NotificationCompat.Builder(this, CHANNEL_ID)
            .setSmallIcon(R.drawable.baseline_call_24)
            .setContentTitle("Call REJECTED")
            .setContentText("Call from $callerId")
            .setPriority(NotificationCompat.PRIORITY_HIGH)
            .setFullScreenIntent(pendingIntent, true)
            .setAutoCancel(true)
            .setContentIntent(pendingIntent)
            .setCategory(NotificationCompat.CATEGORY_CALL)
            .build()

        val notificationManager = getSystemService(NOTIFICATION_SERVICE) as NotificationManager
        notificationManager.notify(1, notification)
    }

    @RequiresApi(Build.VERSION_CODES.O)
    private fun createNotificationChannel() {
        val channel = NotificationChannel(CHANNEL_ID, "Incoming Calls", NotificationManager.IMPORTANCE_HIGH)
        val notificationManager = getSystemService(NotificationManager::class.java)
        notificationManager.createNotificationChannel(channel)
    }
}

Add this MyFirebaseMessagingService to AndroidManifest.xml

<service
  android:name=".Services.MyFirebaseMessagingService"
  android:enabled="true"
  android:exported="true"
  android:permission="android.permission.BIND_TELECOM_CONNECTION_SERVICE">
  <intent-filter>
      <action android:name="com.google.firebase.MESSAGING_EVENT" />
      <action android:name="com.google.android.c2dm.intent.RECEIVE" />
  </intent-filter>
</service>

Now when the notification is received, this should trigger a call.

To achieve this, we need to register TelecomManager with a PhoneAccountHandle and CallConnectionService to manage and handle calls.

Initialize the TelecomManager and PhoneAccountHandle in the MainApplication class to make them accessible throughout the application.

Also, to initiate the call with the VideoSDK, you need to add the VideoSDK token to the main application. You can obtain this token from the VideoSDK Dashboard.

class MainApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        VideoSDK.initialize(applicationContext)

        telecomManager = getSystemService(TELECOM_SERVICE) as TelecomManager
        val componentName: ComponentName = ComponentName(this, CallConnectionService::class.java)
        phoneAccountHandle = PhoneAccountHandle(componentName, "myAccountId")
    }

    companion object {
        var telecomManager: TelecomManager? = null
        var phoneAccountHandle: PhoneAccountHandle? = null
        var meetingId: String? = null
        var token: String = "VideoSDK token"
    }
}

Now, In MainActivity we'll register the PhoneAccount and check for permission to manage Call Activity.

class MainActivity : AppCompatActivity() {
    private lateinit var callerIdInput: EditText
    private lateinit var myId: TextView
    private lateinit var copyIcon: ImageView
    private var myCallId: String = (10000000 + Random().nextInt(90000000)).toString()
    private lateinit var FcmToken: String

    @RequiresApi(Build.VERSION_CODES.O)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        //telecom Api
        registerPhoneAccount()
    }

    private fun registerPhoneAccount() {
        val phoneAccount = PhoneAccount.builder(MainApplication.phoneAccountHandle, "VideoSDK")
            .setCapabilities(PhoneAccount.CAPABILITY_CALL_PROVIDER)
            .build()

        MainApplication.telecomManager?.registerPhoneAccount(phoneAccount)

        if (ActivityCompat.checkSelfPermission(
                this,
                Manifest.permission.READ_PHONE_STATE
            ) != PackageManager.PERMISSION_GRANTED
        ) {
            return
        }
        var checkAccount = 0
        val list: List<PhoneAccountHandle> =
            MainApplication.telecomManager!!.callCapablePhoneAccounts
        for (handle in list) {
            if (handle.componentName.className == "live.videosdk.ConnectionService.quickstart.Services.CallConnectionService") {
                checkAccount++
                break
            }
        }
        if (checkAccount == 0) {
            val intent = Intent(TelecomManager.ACTION_CHANGE_PHONE_ACCOUNTS)
            startActivity(intent)
        }
    }
}

Next, to manage VoIP calls, we’ll create a new service CallConnectionService that extends ConnectionService. This service will handle the technical aspects of call connections, such as managing call states and routing audio/video.

class CallConnectionService : ConnectionService() {
    var callerID: String? = null
    val obj = NetworkCallHandler()

    override fun onCreateIncomingConnection(
        connectionManagerPhoneAccount: PhoneAccountHandle,
        request: ConnectionRequest
    ): Connection {
        // Create a connection for the incoming call
        val connection: Connection = object : Connection() {
            override fun onAnswer() {
                super.onAnswer()
                //getting videosdk info
                val extras = request.extras
                val meetingId = extras.getString("meetingId")
                val token = extras.getString("token")
                callerID = extras.getString("callerID")
                obj.updateCall("ACCEPTED")
                // Start the meeting activity with the extracted data
                val intent = Intent(
                    applicationContext,
                    MeetingActivity::class.java
                )
                intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
                intent.putExtra("meetingId", meetingId)
                intent.putExtra("token", token)
                startActivity(intent)

                //update
                setDisconnected(DisconnectCause(DisconnectCause.LOCAL))
                destroy()
            }

            override fun onReject() {
                super.onReject()
                val intent = Intent(
                    applicationContext,
                    MainActivity::class.java
                )
                intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
                startActivity(intent)
                //update
                obj.updateCall("REJECTED")
                setDisconnected(DisconnectCause(DisconnectCause.LOCAL))
                destroy()
            }
        }

        // Set call address
        connection.setAddress(request.address, TelecomManager.PRESENTATION_ALLOWED)
        connection.setCallerDisplayName(callerID, TelecomManager.PRESENTATION_ALLOWED)
        connection.setInitializing() // Indicates that the call is being set up
        connection.setActive() // Activate the call

        return connection
    }

    override fun onCreateOutgoingConnection(
        connectionManagerPhoneAccount: PhoneAccountHandle,
        request: ConnectionRequest
    ): Connection {
        // Create a connection for the outgoing call
        val connection: Connection = object : Connection() {}
        connection.setAddress(request.address, TelecomManager.PRESENTATION_ALLOWED)
        connection.setActive()
    }
}

Add the service to the AndroidManifest.xml

<service
    android:name=".Services.CallConnectionService"
    android:enabled="true"
    android:exported="true"
    android:permission="android.permission.BIND_TELECOM_CONNECTION_SERVICE">
    <intent-filter>
        <action android:name="android.telecom.ConnectionService" />
    </intent-filter>
</service>

Now, To display the default Android call UI, we'll create another service called MyInCallService.

package live.videosdk.connectionservice.connectionservice_quickstart.Services

import android.Manifest
import android.content.pm.PackageManager
import android.telecom.Call
import android.telecom.InCallService
import android.telecom.TelecomManager
import androidx.core.app.ActivityCompat

class MyInCallService : InCallService() {
    override fun onCallAdded(call: Call) {
        super.onCallAdded(call)
        call.registerCallback(object : Call.Callback() {
            override fun onStateChanged(call: Call, state: Int) {
                super.onStateChanged(call, state)
                if (state == Call.STATE_ACTIVE) {
                    // Handle the active call state
                }
            }
        })
        // Bring up the default UI for managing the call
        setUpDefaultCallUI(call)
    }

    override fun onCallRemoved(call: Call) {
        super.onCallRemoved(call)
        // Clean up call-related resources
    }

    private fun setUpDefaultCallUI(call: Call) {
        // Start the default in-call UI
        val telecomManager = getSystemService(TELECOM_SERVICE) as TelecomManager
        if (telecomManager != null) {
            if (ActivityCompat.checkSelfPermission(
                    this,
                    Manifest.permission.READ_PHONE_STATE
                ) != PackageManager.PERMISSION_GRANTED
            ) {
                return
            }
            telecomManager.showInCallScreen(true)
        }
    }
}

Add the service to AndroidMenifest.xmlThe first

<service
  android:name=".Services.MyInCallService"
  android:exported="true"
  android:permission="android.permission.BIND_INCALL_SERVICE">
  <intent-filter>
      <action android:name="android.telecom.InCallService" />
  </intent-filter>
</service>

Wow!! You just implemented the calling feature, which works like a charm.

VideoSDK Integration for VideoCall

The first step in integrating the VideoSDK is to initialize VideoSDK.

MainApplication.kt

class MainApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        VideoSDK.initialize(applicationContext)
    }
}

When the call is received, the intent is used to transition from the call screen to the meeting screen, passing the meetingId and videoSDK token along with it.

class CallConnectionService : ConnectionService() {

    override fun onCreateIncomingConnection(
        connectionManagerPhoneAccount: PhoneAccountHandle,
        request: ConnectionRequest
    ): Connection {
        // Create a connection for the incoming call
        val connection: Connection = object : Connection() {
            override fun onAnswer() {
                super.onAnswer()

                val intent = Intent(
                    applicationContext,
                    MeetingActivity::class.java
                )
                intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
                intent.putExtra("meetingId", meetingId)
                intent.putExtra("token", token)
                startActivity(intent)
            }
        }
            //...
    }
}

Next, we will add our MeetingView which will show the buttons and Participants View in the MeetingActivity.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MeetingActivity">

    <TextView
        android:id="@+id/tvMeetingId"
        style="@style/TextAppearance.AppCompat.Display1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Meeting Id" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rvParticipants"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btnMic"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginVertical="8dp"
            android:text="Mic"/>

        <Button
            android:id="@+id/btnLeave"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginVertical="8dp"
            android:layout_marginHorizontal="8dp"
            android:text="Leave"/>

        <Button
            android:id="@+id/btnWebcam"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginVertical="8dp"
            android:text="Webcam" />

    </LinearLayout>

</LinearLayout>

Here is the logic for the MeetingActivity

class MeetingActivity : AppCompatActivity() {
    // declare the variables we will be using to handle the meeting
    private var meeting: Meeting? = null
    private var micEnabled = true
    private var webcamEnabled = true

    private lateinit var rvParticipants: RecyclerView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_meeting)

        checkSelfPermission(REQUESTED_PERMISSIONS[0], PERMISSION_REQ_ID)
        checkSelfPermission(REQUESTED_PERMISSIONS[1], PERMISSION_REQ_ID)

        val token = intent.getStringExtra("token")
        val meetingId = intent.getStringExtra("meetingId")
        val participantName = "John Doe"

        // 1. Configuration VideoSDK with Token
        VideoSDK.config(token)
        // 2. Initialize VideoSDK Meeting
        meeting = VideoSDK.initMeeting(
            this@MeetingActivity, meetingId, participantName,
            micEnabled, webcamEnabled, null, null, true, null, null
        )

        // 3. Add event listener for listening upcoming events
        meeting!!.addEventListener(meetingEventListener)

        //4. Join VideoSDK Meeting
        meeting!!.join()

        (findViewById<View>(R.id.tvMeetingId) as TextView).text =
            meetingId

        // actions
        setActionListeners()

        rvParticipants = findViewById(R.id.rvParticipants)
        rvParticipants.setLayoutManager(GridLayoutManager(this, 2))
        rvParticipants.setAdapter(ParticipantAdapter(meeting!!))
    }

    // creating the MeetingEventListener
    private val meetingEventListener: MeetingEventListener = object : MeetingEventListener() {
        override fun onMeetingJoined() {
            Log.d("#meeting", "onMeetingJoined()")
        }

        override fun onMeetingLeft() {
            Log.d("#meeting", "onMeetingLeft()")
            meeting = null
            if (!isDestroyed) finish()
        }

        override fun onParticipantJoined(participant: Participant) {
            Toast.makeText(
                this@MeetingActivity,
                participant.displayName + " joined",
                Toast.LENGTH_SHORT
            ).show()
        }

        override fun onParticipantLeft(participant: Participant) {
            Toast.makeText(
                this@MeetingActivity,
                participant.displayName + " left",
                Toast.LENGTH_SHORT
            ).show()
        }
    }

    private fun setActionListeners() {
        // toggle mic
        findViewById<View>(R.id.btnMic).setOnClickListener { view: View? ->
            if (micEnabled) {
                // this will mute the local participant's mic
                meeting!!.muteMic()
                Toast.makeText(
                    this@MeetingActivity,
                    "Mic Disabled",
                    Toast.LENGTH_SHORT
                ).show()
            } else {
                // this will unmute the local participant's mic
                meeting!!.unmuteMic()
                Toast.makeText(
                    this@MeetingActivity,
                    "Mic Enabled",
                    Toast.LENGTH_SHORT
                ).show()
            }
            micEnabled = !micEnabled
        }

        // toggle webcam
        findViewById<View>(R.id.btnWebcam).setOnClickListener { view: View? ->
            if (webcamEnabled) {
                // this will disable the local participant webcam
                meeting!!.disableWebcam()
                Toast.makeText(
                    this@MeetingActivity,
                    "Webcam Disabled",
                    Toast.LENGTH_SHORT
                ).show()
            } else {
                // this will enable the local participant webcam
                meeting!!.enableWebcam()
                Toast.makeText(
                    this@MeetingActivity,
                    "Webcam Enabled",
                    Toast.LENGTH_SHORT
                ).show()
            }
            webcamEnabled = !webcamEnabled
        }

        // leave meeting
        findViewById<View>(R.id.btnLeave).setOnClickListener { view: View? ->
            // this will make the local participant leave the meeting
            meeting!!.leave()
        }
    }

    override fun onDestroy() {
        rvParticipants!!.adapter = null
        super.onDestroy()
    }

    private fun checkSelfPermission(permission: String, requestCode: Int): Boolean {
        if (ContextCompat.checkSelfPermission(this, permission) !=
            PackageManager.PERMISSION_GRANTED
        ) {
            ActivityCompat.requestPermissions(this, REQUESTED_PERMISSIONS, requestCode)
            return false
        }
        return true
    }

    companion object {
        private const val PERMISSION_REQ_ID = 22

        private val REQUESTED_PERMISSIONS = arrayOf(
            Manifest.permission.RECORD_AUDIO,
            Manifest.permission.CAMERA
        )
    }
}

Here, we display the participants in a RecyclerView. To implement this, you'll need to use the following RecyclerView Adapter components:

a. item_remote_peer : UI for each participant

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@color/cardview_dark_background"
    tools:layout_height="200dp">

    <live.videosdk.rtc.android.VideoView
        android:id="@+id/participantView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:visibility="gone" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="#99000000"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/tvName"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="4dp"
            android:textColor="@color/white" />

    </LinearLayout>

</FrameLayout>

b. ParticipantAdapter: Responsible for displaying video call participants in a RecyclerView. It manages participant join/leave events, shows video streams, and updates the view when a participant's video starts or stops.

public class ParticipantAdapter extends RecyclerView.Adapter<ParticipantAdapter.PeerViewHolder> {

    private final List<Participant> participants = new ArrayList<>();

    public ParticipantAdapter(Meeting meeting) {
        // adding the local participant(You) to the list
        participants.add(meeting.getLocalParticipant());

        // adding Meeting Event listener to get the participant join/leave event in the meeting.
        meeting.addEventListener(new MeetingEventListener() {
            @Override
            public void onParticipantJoined(Participant participant) {
                // add participant to the list
                participants.add(participant);
                notifyItemInserted(participants.size() - 1);
            }

            @Override
            public void onParticipantLeft(Participant participant) {
                int pos = -1;
                for (int i = 0; i < participants.size(); i++) {
                    if (participants.get(i).getId().equals(participant.getId())) {
                        pos = i;
                        break;
                    }
                }
                // remove participant from the list
                participants.remove(participant);

                if (pos >= 0) {
                    notifyItemRemoved(pos);
                }
            }
        });
    }

    @NonNull
    @Override
    public PeerViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new PeerViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_remote_peer, parent, false));
    }

    @Override
    public void onBindViewHolder(@NonNull PeerViewHolder holder, int position) {
        Participant participant = participants.get(position);

        holder.tvName.setText(participant.getDisplayName());

        // adding the initial video stream for the participant into the 'VideoView'
        for (Map.Entry<String, Stream> entry : participant.getStreams().entrySet()) {
            Stream stream = entry.getValue();
            if (stream.getKind().equalsIgnoreCase("video")) {
                holder.participantView.setVisibility(View.VISIBLE);
                VideoTrack videoTrack = (VideoTrack) stream.getTrack();
                holder.participantView.addTrack(videoTrack);
                break;
            }
        }
        // add Listener to the participant which will update start or stop the video stream of that participant
        participant.addEventListener(new ParticipantEventListener() {
            @Override
            public void onStreamEnabled(Stream stream) {
                if (stream.getKind().equalsIgnoreCase("video")) {
                    holder.participantView.setVisibility(View.VISIBLE);
                    VideoTrack videoTrack = (VideoTrack) stream.getTrack();
                    holder.participantView.addTrack(videoTrack);
                }
            }

            @Override
            public void onStreamDisabled(Stream stream) {
                if (stream.getKind().equalsIgnoreCase("video")) {
                    holder.participantView.removeTrack();
                    holder.participantView.setVisibility(View.GONE);
                }
            }
        });
    }

    @Override
    public int getItemCount() {
        return participants.size();
    }

    static class PeerViewHolder extends RecyclerView.ViewHolder {
        // 'VideoView' to show Video Stream
        public VideoView participantView;
        public TextView tvName;
        public View itemView;

        PeerViewHolder(@NonNull View view) {
            super(view);
            itemView = view;
            tvName = view.findViewById(R.id.tvName);
            participantView = view.findViewById(R.id.participantView);
        }
    }

    @Override
    public void onViewRecycled(@NonNull PeerViewHolder holder) {
        holder.participantView.releaseSurfaceViewRenderer();
        super.onViewRecycled(holder);
    }
}

The meeting is set up on the callee's side, and now you need to set up the meeting on the caller's side as well.

When the callee accepts the call, the update-call function on the server is called, which triggers a silent notification to the caller.

class NetworkCallHandler {

        fun updateCall(call_update: String){
        val fcmToken: String = MyFirebaseMessagingService.FCMtoken

        val callerInfo: MutableMap<String, String> = HashMap()
        val callUpdateBody: MutableMap<String, Any> = HashMap()

        //callerInfo
        callerInfo["callerId"] = myCallId
        callerInfo["token"] = fcmToken
        //CallUpdateBody
        callUpdateBody["callerInfo"] = callerInfo
        callUpdateBody["type"] = call_update

        val apiService = ApiClient.client!!.create(ApiService::class.java)
        val call : Call<String> = apiService.updateCall(callUpdateBody)
        call.enqueue(object :Callback<String>{
            override fun onFailure(call: Call<String>, t: Throwable) {
                Log.d("TAG", "onFailure: "+ t.message)
            }

            override fun onResponse(call: Call<String>, response: Response<String>) {
                Log.d("TAG", "Call updated successfully: " + response.body())
            }
        })
    }
}

When the caller's phone receives this notification, indicating either acceptance or rejection, the meeting is started, or a Toast message showing rejection is displayed, respectively.

class MyFirebaseMessagingService : FirebaseMessagingService() {

    @RequiresApi(Build.VERSION_CODES.O)
    override fun onMessageReceived(remoteMessage: RemoteMessage) {
        val data = remoteMessage.data

        if (data.isNotEmpty()) {
            try {
                val `object` = JSONObject(data["info"]!!)

                val callerInfo = `object`.getJSONObject("callerInfo")
                callerID = callerInfo.getString("callerId")
                FCMtoken = callerInfo.getString("token")

                if (`object`.has("videoSDKInfo")) {
                    val videoSdkInfo = `object`.getJSONObject("videoSDKInfo")
                    meetingId = videoSdkInfo.getString("meetingId")
                    token = videoSdkInfo.getString("token")
                    handleIncomingCall(callerID)
                }

                val type = `object`.getString("type")
                when (type) {
                    "ACCEPTED" -> startMeeting()
                    "REJECTED" -> {
                        showIncomingCallNotification(callerID)
                        Handler(Looper.getMainLooper()).post {
                            Toast.makeText(applicationContext, "CALL REJECTED FROM CALLER ID: $callerID", Toast.LENGTH_SHORT).show()
                        }
                    }
                }

            } catch (e: JSONException) {
                throw RuntimeException(e)
            }
        } else {
            Log.d(TAG, "onMessageReceived: No data found in the notification payload.")
        }
    }

    private fun startMeeting() {
        val intent = Intent(applicationContext, MeetingActivity::class.java).apply {
            addFlags(Intent.FLAG_ACTIVITY_NEW_TASK)
            putExtra("meetingId", MainApplication.meetingId)
            putExtra("token", MainApplication.token)
        }
        startActivity(intent)
    }
}

Here is how the video call will look with two participants:

Hurray!!! With these steps, our video calling feature is complete. Here’s a video demonstrating how it looks.

Conclusion

With this, we've successfully built the Android video calling app using the Telecom framework, VideoSDK, and Firebase. For additional features like chat messaging and screen sharing, feel free to refer to our documentation. If you encounter any issues with the implementation, don’t hesitate to reach out to us through our Discord community.

Here is the Github repo you can clone to access all the source code here

8 Projects to Master Frontend Development in 2024

Sagar Kava — Fri, 19 Jul 2024 10:15:06 +0000

Introduction

In the rapidly evolving field of frontend development, staying updated with the latest tools, frameworks, and best practices is essential. Whether you're new to programming or a seasoned developer, continuously learning and building projects is key to mastering frontend development.

The projects outlined below will help you gain practical experience with different technologies, enhancing your skills and boosting your portfolio. Each project focuses on a distinct topic and employs a different JavaScript framework or library. So, let's dive into these eight projects that will set you on the path to becoming a frontend master in 2024.

1. Personal Portfolio Website

Overview: Create a personal portfolio website to showcase your skills and projects.
Tech Stack: HTML, CSS, JavaScript
Learning Outcomes: You'll learn the basics of web development, including responsive design, CSS grid, and flexbox.
Resources:

Building a Personal Portfolio

2. Real-Time Live Streaming App

Overview: Develop a real-time chat with live streaming application.
Tech Stack: HTML, CSS, React, JavaScript, Socket.io,WebRTC, HLS
Learning Outcomes: Learn about WebSocket, WebRTC, server-client communication, and real-time data updates.
Resources:

Real-time WebRTC App

3. Task Manager Application

Overview: Develop a task manager with features like task prioritization and status updates.
Tech Stack: React
Learning Outcomes: Master state management, component-based architecture, and CRUD operations.
Resources:

Building a Task Manager with React

4. E-commerce Product Carousel

Overview: Design and implement a responsive product carousel for an e-commerce site.
Tech Stack: HTML, CSS, JavaScript
Learning Outcomes: Enhance your skills in responsive design, animations, and user interaction.
Resources:

Creating Responsive Carousels with CSS and JavaScript

5. Animated Landing Page

Overview: Create an animated landing page for a fictional product or service.
Tech Stack: HTML, CSS, JavaScript
Learning Outcomes: Learn CSS animations, transitions, and how to create visually engaging web pages.
Resources:

Creating Smooth Animations with CSS

6. Collaborative Whiteboard App

Overview: Build a collaborative whiteboard app with real-time communication.
Tech Stack: HTML, CSS, JavaScript, WebSocket
Learning Outcomes: Understand real-time data handling and collaborative functionalities.
Resources:

Real-time Collaborative with WebSocket

7. Interactive Quiz App

Overview: Develop an interactive quiz application.
Tech Stack: HTML, CSS, JavaScript
Learning Outcomes: Gain experience in DOM manipulation, event handling, and dynamic content generation.
Resources:

Creating Interactive Quizzes with JavaScript

8. Blog with Gatsby

Overview: Build a blog using Gatsby, React, and GraphQL.
Tech Stack: Gatsby, React, GraphQL
Learning Outcomes: Learn static site generation, GraphQL, and how to leverage modern JavaScript frameworks for fast, SEO-friendly websites.
Resources:

How to Build a Blog with Gatsby

Conclusion

Mastering frontend development in 2024 requires a mix of theoretical knowledge and hands-on experience. These projects offer a diverse range of challenges that will enhance your skills and prepare you for real-world development tasks. Customize and expand upon these projects to make them your own, and stay updated with the latest tools and technologies.

For more details on each project and additional resources, you can refer to articles on platforms like Dev.to and other tutorial sites. These projects will not only build your portfolio but also give you the confidence to tackle complex frontend development tasks.

Sources:

Build an Amazing Real-time Transcription App using React Hooks

Sagar Kava — Tue, 28 May 2024 16:58:12 +0000

TL;DR

I am going to show you how to create a step-by-step tutorial for building your real-time transcription app

In this tutorial, you'll learn how to harness the power of React Hooks and the VideoSDK to build an app that allows users to join or create meetings, record sessions, and transcribe them in real-time. By the end, you'll have a functional and efficient transcription app ready for use.

Real-time transcription services are crucial in today's digital landscape, helping to bridge communication gaps and enhance accessibility. By following this tutorial, you will gain practical experience with React's latest features, including Hooks for state management, and how to integrate third-party services like VideoSDK for real-time video handling.

👍 Like and save this post if you find it useful!
💬 Comment below with your thoughts and suggestions.

Prerequisites: Ensure you have Node.js and npm installed. Sign up at VideoSDK.live for an API key https://app.videosdk.live/api-keys to get started.
Steps: Setup project, create API functions, build components, run the app
Outcome: A fully functional real-time transcription app

Step 1: Setup the Project

1.Create a React App: If you don't already have a React app, create one using the following command:

npx create-react-app my-video-app
cd my-video-app

2.Install Dependencies: Install the necessary packages.

npm install @videosdk.live/react-sdk react-player

3.Configure ESLint and Prettier: Set up ESLint and Prettier for code quality and formatting.

npm install eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier

4.Project Structure: Organize your project with a logical structure.

my-video-app/
├── public/
├── src/
│   ├── components/
│   │   ├── JoinScreen.js
│   │   ├── ParticipantView.js
│   │   ├── Controls.js
│   │   └── MeetingView.js
│   ├── utils/
│   │   └── API.js
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   └── index.js
├── .eslintrc.json
├── .prettierrc
├── package.json
└── README.md

Step 2: Setup API Functions

Create an API.js file in the src directory to handle API interactions.

"YOUR_VIDEO_SDK_AUTH_TOKEN" >> https://app.videosdk.live/api-keys

// API.js
export const authToken = "YOUR_VIDEO_SDK_AUTH_TOKEN";

export const createMeeting = async ({ token }) => {
  const response = await fetch("https://api.videosdk.live/v1/meetings", {
    method: "POST",
    headers: {
      Authorization: token,
      "Content-Type": "application/json",
    },
  });
  const data = await response.json();
  return data.meetingId;
};

Step 3: Build the Components

In your App.js, import necessary modules and create components as described below.

JoinScreen Component

Allows users to enter a meeting ID or create a new meeting.

import React, { useState } from "react";

function JoinScreen({ getMeetingAndToken }) {
  const [meetingId, setMeetingId] = useState(null);
  const onClick = async () => {
    await getMeetingAndToken(meetingId);
  };
  return (
    <div>
      <input
        type="text"
        placeholder="Enter Meeting Id"
        onChange={(e) => {
          setMeetingId(e.target.value);
        }}
      />
      <button onClick={onClick}>Join</button>
      {" or "}
      <button onClick={onClick}>Create Meeting</button>
    </div>
  );
}

export default JoinScreen;

ParticipantView Component

Displays the video and audio of a participant.

import React, { useEffect, useMemo, useRef } from "react";
import { useParticipant } from "@videosdk.live/react-sdk";
import ReactPlayer from "react-player";

function ParticipantView(props) {
  const micRef = useRef(null);
  const { webcamStream, micStream, webcamOn, micOn, isLocal, displayName } =
    useParticipant(props.participantId);

  const videoStream = useMemo(() => {
    if (webcamOn && webcamStream) {
      const mediaStream = new MediaStream();
      mediaStream.addTrack(webcamStream.track);
      return mediaStream;
    }
  }, [webcamStream, webcamOn]);

  useEffect(() => {
    if (micRef.current) {
      if (micOn && micStream) {
        const mediaStream = new MediaStream();
        mediaStream.addTrack(micStream.track);

        micRef.current.srcObject = mediaStream;
        micRef.current
          .play()
          .catch((error) =>
            console.error("videoElem.current.play() failed", error)
          );
      } else {
        micRef.current.srcObject = null;
      }
    }
  }, [micStream, micOn]);

  return (
    <div>
      <p>
        Participant: {displayName} | Webcam: {webcamOn ? "ON" : "OFF"} | Mic:{" "}
        {micOn ? "ON" : "OFF"}
      </p>
      <audio ref={micRef} autoPlay playsInline muted={isLocal} />
      {webcamOn && (
        <ReactPlayer
          playsinline
          pip={false}
          light={false}
          controls={false}
          muted={true}
          playing={true}
          url={videoStream}
          height={"300px"}
          width={"300px"}
          onError={(err) => {
            console.log(err, "participant video error");
          }}
        />
      )}
    </div>
  );
}

export default ParticipantView;

Controls Component

Provides buttons to leave the meeting and toggle mic/webcam.

import React from "react";
import { useMeeting } from "@videosdk.live/react-sdk";

function Controls() {
  const { leave, toggleMic, toggleWebcam } = useMeeting();
  return (
    <div>
      <button onClick={() => leave()}>Leave</button>
      <button onClick={() => toggleMic()}>toggleMic</button>
      <button onClick={() => toggleWebcam()}>toggleWebcam</button>
    </div>
  );
}

export default Controls;

MeetingView Component

Main component to handle meeting functionalities like transcription, recording, and displaying participants.

import React, { useState } from "react";
import { useMeeting, useTranscription, Constants } from "@videosdk.live/react-sdk";
import ParticipantView from "./ParticipantView";
import Controls from "./Controls";

function MeetingView(props) {
  const [transcript, setTranscript] = useState("Transcription");
  const [transcriptState, setTranscriptState] = useState("Not Started");
  const tConfig = { webhookUrl: "https://www.example.com" };
  const { startTranscription, stopTranscription } = useTranscription({
    onTranscriptionStateChanged: (data) => {
      const { status } = data;
      if (status === Constants.transcriptionEvents.TRANSCRIPTION_STARTING) {
        setTranscriptState("Transcription Starting");
      } else if (status === Constants.transcriptionEvents.TRANSCRIPTION_STARTED) {
        setTranscriptState("Transcription Started");
      } else if (status === Constants.transcriptionEvents.TRANSCRIPTION_STOPPING) {
        setTranscriptState("Transcription Stopping");
      } else if (status === Constants.transcriptionEvents.TRANSCRIPTION_STOPPED) {
        setTranscriptState("Transcription Stopped");
      }
    },
    onTranscriptionText: (data) => {
      let { participantName, text, timestamp } = data;
      console.log(`${participantName}: ${text} ${timestamp}`);
      setTranscript(transcript + `${participantName}: ${text} ${timestamp}`);
    },
  });

  const { startRecording, stopRecording } = useMeeting();

  const handleStartRecording = () => {
    startRecording("YOUR_WEB_HOOK_URL", "AWS_Directory_Path", {
      layout: { type: "GRID", priority: "SPEAKER", gridSize: 4 },
      theme: "DARK",
      mode: "video-and-audio",
      quality: "high",
      orientation: "landscape",
    });
  };

  const handleStopRecording = () => stopRecording();
  const handleStartTranscription = () => startTranscription(tConfig);
  const handleStopTranscription = () => stopTranscription();

  const [joined, setJoined] = useState(null);
  const { join, participants } = useMeeting({
    onMeetingJoined: () => setJoined("JOINED"),
    onMeetingLeft: () => props.onMeetingLeave(),
  });

  const joinMeeting = () => {
    setJoined("JOINING");
    join();
  };

  return (
    <div className="container">
      <h3>Meeting Id: {props.meetingId}</h3>
      {joined && joined === "JOINED" ? (
        <div>
          <Controls />
          <button onClick={handleStartRecording}>Start Recording</button>
          <button onClick={handleStopRecording}>Stop Recording</button>
          <button onClick={handleStartTranscription}>Start Transcription</button>
          <button onClick={handleStopTranscription}>Stop Transcription</button>
          {[...participants.keys()].map((participantId) => (
            <ParticipantView participantId={participantId} key={participantId} />
          ))}
          <p>State: {transcriptState}</p>
          <p>{transcript}</p>
        </div>
      ) : joined && joined === "JOINING" ? (
        <p>Joining the meeting...</p>
      ) : (
        <button onClick={joinMeeting}>Join</button>
      )}
    </div>
  );
}

export default MeetingView;

App Component

Main component that manages the meeting state and provides the necessary context.

import React, { useState } from "react";
import { MeetingProvider } from "@videosdk.live/react-sdk";
import JoinScreen from "./JoinScreen";
import MeetingView from "./MeetingView";
import { authToken, createMeeting } from "./API";

function App() {
  const [meetingId, setMeetingId] = useState(null);

  const getMeetingAndToken = async (id) => {
    const meetingId =
      id == null ? await createMeeting({ token: authToken }) : id;
    setMeetingId(meetingId);
  };

  const onMeetingLeave = () => setMeetingId(null);

  return authToken && meetingId ? (
    <MeetingProvider
      config={{
        meetingId,
        micEnabled: true,
        webcamEnabled: true,
        name: "C.V. Raman",
      }}
      token={authToken}
    >
      <MeetingView meetingId={meetingId} onMeetingLeave={onMeetingLeave} />
    </MeetingProvider

>
  ) : (
    <JoinScreen getMeetingAndToken={getMeetingAndToken} />
  );
}

export default App;

Step 4: Run the Application

Start the React App:

   npm start

Navigate to Your Browser: Open http://localhost:3000 to view the app.

Optional Step: Add CSS for Styling

To enhance the visual appeal of your app, you can add the following CSS.

Create an App.css file in your src directory with the following content:

/* App.css */

body {
  background-color: #121212;
  color: #e0e0e0;
  font-family: 'Roboto', sans-serif;
  margin: 0;
  padding: 0;
}

input, button {
  background-color: #1e1e1e;
  border: 1px solid #333;
  color: #e0e0e0;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
}

button:hover {
  background-color: #333;
  cursor: pointer;
}

.container {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  text-align: center;
}

h3 {
  color: #f5f5f5;
}

p {
  margin: 10px 0;
}

audio, .react-player__preview {
  background-color: #333;
  border: 1px solid #555;
  border-radius: 5px;
  margin: 10px 0;
}

.react-player__preview img {
  border-radius: 5px;
}

.react-player__shadow {
  border-radius: 5px;
}

Conclusion

Congratulations! You have successfully built a functional and robust real-time transcription app using React Hooks and the VideoSDK.live SDK. This application empowers users to join or create meetings, manage participants effectively, and utilize advanced features such as real-time transcription and recording. By following the detailed steps and incorporating the optional CSS, you have ensured that the app not only performs seamlessly but also provides a visually appealing user interface.

Ultimate Guide to React Icons: Enhancing Your Web Projects with Scalable Graphics

Sagar Kava — Mon, 15 Apr 2024 04:42:27 +0000

Introduction to React Icons

React Icons is a powerful library that provides accessible SVG icons for React applications, integrating popular icon sets like Font Awesome, Material Design, UI design, and Ionicons into your projects seamlessly. This library is essential for developers looking to add visually appealing, scalable, and easy-to-manage icons into their web applications.

What are React Icons?

React Icons allows developers to include only the icons they need, rather than loading entire Icons libraries, which can enhance application performance significantly. By leveraging ES6 imports, the library ensures that you can pick and choose from over 45,000 icons spanning across multiple collections for web development.

Why Use React Icons?

The primary advantage of using React Icons lies in its efficiency and ease of use. The library supports tree-shaking, meaning it only bundles the icons used in your project, thus reducing the overall bundle size and improving load times. Furthermore, each icon is treated as a React component icons, allowing for easier integration and manipulation within a React environment.

Installation and Basic Setup

To get started with React Icons, you need to install the package via npm, which is straightforward:

npm install react-icons --save

Once installed, you can begin using the icons in your React project by importing them directly from the library. Here's a basic example of how to use an icon:

import { FaBeer } from 'react-icons/fa';

function App() {
  return <h3>Let's have a <FaBeer /> tonight!</h3>;
}

This code snippet demonstrates the simplicity of incorporating an icon directly into your React components. The { FaBeer } import represents a beer icon from the Font Awesome collection, which can be rendered as part of your JSX code.

React Icons provides a versatile and performance-efficient solution for using icons in React applications. By enabling developers to import only the icons they need, it ensures that the application remains lightweight and fast. As you proceed to integrate React Icons into your projects, you will appreciate the flexibility and aesthetic enhancement they bring to your user interfaces.

Exploring Icon Libraries and Usage with React Icons

React Icons amalgamates several popular icon libraries, offering a vast selection of icons suitable for various design needs. This section delves into these libraries, discusses advanced icon configuration, and explores dynamic icon usage, providing you with the tools to enhance your project's visual and interactive aspects.

Icon Libraries Overview

React Icons integrates icons from multiple libraries, including FontAwesome, MaterialIcons, and Bootstrap Icons, among others. This integration offers a unified way to access a wide range of icons, from social media symbols to business icons, all within your React applications.

FontAwesome: Known for its comprehensive collection of icons, FontAwesome is frequently used for its versatility and wide acceptance.

MaterialIcons: These are grounded in Material Design principles and offer clean, scalable graphics perfect for modern web interfaces.

Bootstrap Icons: Bootstrap Icons are specifically designed to work seamlessly with Bootstrap components but are versatile enough to be used in other contexts.

Using icons from these libraries is straightforward. For instance, to use a heart icon from FontAwesome, you would import it like so:

import { FaHeart } from 'react-icons/fa';

This single line of code allows you to render a heart icon anywhere within your React components.

Advanced Icon Configuration

To globally configure icons in your project, React Icons provides the IconContext.Provider. This component allows you to set default properties for all icons, such as size, color, and style, reducing the need to individually style each icon.

Here’s how you can set global properties for your icons:

import { IconContext } from 'react-icons';

function App() {
  return (
    <IconContext.Provider value={{ color: 'blue', size: '50px' }}>
      <div>
        <FaHeart />
        {/* other components */}
      </div>
    </IconContext.Provider>
  );
}

This configuration sets all icons within the Provider to be blue and 50 pixels in size, ensuring consistency across your app without repeated code.

Dynamic Icon Usage

React Icons can also dynamically change based on application state. This is particularly useful for interactive elements like buttons or toggles, where the icon might change in response to user actions.

For example, you can create a toggle button that switches between a "plus" and "minus" icon based on whether a section is expanded or collapsed:

import { useState } from 'react';
import { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai';

function ToggleButton() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <button onClick={() => setIsOpen(!isOpen)}>
      {isOpen ? <AiOutlineMinus /> : <AiOutlinePlus />}
    </button>
  );
}

This snippet demonstrates the use of React state to conditionally render different icons, providing an intuitive visual cue for the user.

The React Icons library not only simplifies the process of integrating icons but also enhances the flexibility and functionality of your UI components. By leveraging the extensive libraries available and utilizing advanced configuration options, you can create a more engaging and visually appealing user experience. In the following sections, we will explore practical applications and best practices to optimize the performance and accessibility of these icons within your projects.

Practical Applications and Best Practices for React Icons

In this section, we delve into the practical applications of React Icons within a project, discussing how to optimize their performance and ensure accessibility, alongside tips for effective styling and customization. By adhering to these best practices, developers can enhance both the user experience and the technical quality of their applications.

Performance Optimization

Optimizing the performance of React Icons is crucial for maintaining fast load times and efficient rendering in your application. Here are several strategies:

Selective Importing : Import only the icons you use within your components rather than entire libraries. This minimizes bundle size significantly.

import { FaBeer } from 'react-icons/fa';

This code demonstrates importing a single icon rather than all FontAwesome icons, which keeps your application lightweight.

Lazy Loading : For applications using a large number of icons or large sets, consider lazy loading icons that aren't immediately visible to the user. This can be achieved by dynamic imports in React.
Use SVGs Appropriately : Since React Icons are SVG elements, ensure that they are not re-rendered unless necessary. Utilizing React’s memoization or shouldComponentUpdate lifecycle method can prevent unnecessary re-renders.

Accessibility Considerations

Ensuring that icons are accessible is key to creating inclusive web applications. Here are some tips to enhance icon accessibility:

Aria Labels : Add appropriate aria-label attributes to icons that serve as interactive elements, providing a text description that screen readers can announce.
Keyboard Accessibility : Ensure that icons used as buttons or links are focusable and can be triggered using the keyboard. Wrapping them in <button> or <a> tags can achieve this.
Semantic HTML : Use appropriate HTML elements for icons depending on their function. Icons that trigger actions should be buttons, while icons for decoration should use a <span> with role="img" and an aria-label.

FAQs and Troubleshooting Common Issues with React Icons

In this final section of our comprehensive guide to React Icons, we address some frequently asked questions and provide troubleshooting tips for common issues that developers may encounter while using this library. This segment is designed to enhance your troubleshooting skills and help you resolve typical problems efficiently.

Frequently Asked Questions (FAQs)

How do I ensure React Icons are properly aligned with text?

Icons may not always align perfectly with adjacent text. To fix alignment issues, wrap your icon and text in a flex container and use CSS to align items to the center.

<div style={{ display: 'flex', alignItems: 'center' }}>
  <FaBeer /> <span>Enjoy responsibly!</span>
</div>

Can I use multiple icon libraries in one project?

Yes, you can import icons from different libraries within the same project. However, be mindful of the overall size of your bundle and the performance implications of importing many libraries.

What should I do if an icon does not appear as expected?

Ensure that the import statement is correct and points to the right library. It’s common to mistakenly import an icon from a different library or misspell the icon name.

How can I change the color and size of an icon dynamically?

You can dynamically style icons using inline styles or CSS classes based on state or props. Here’s a simple example with inline styling:

Are there any accessibility concerns I should be aware of when using icons as buttons?

When using icons as interactive elements like buttons, ensure they are wrapped in <button> tags, have accessible labels, and are focusable for keyboard-only users.

Troubleshooting Common Issues

Icon Import Errors:

Double-check your import statements for typos. Use the exact name as defined in the library, and ensure that your project's dependencies include the icon library.

Icons Not Rendering:

Verify that the icon components are correctly implemented in the JSX. Check if there are any console errors related to SVG or React component rendering.

Performance Issues with Large Number of Icons:

If performance is impacted by the use of many icons, consider implementing code splitting or dynamically importing icons only when they are needed.

Styling Issues:

For icons that don’t adopt the style properties, inspect the elements in a browser to see if styles are being overridden. Ensure that styles are not being applied to a parent container instead of directly to the icon.

Library Conflicts:

Sometimes, different icon libraries might conflict, especially if they use similar names for different icons. Use aliases in your import statements to resolve these conflicts.

import { FaBeer as BeerIcon } from 'react-icons/fa';

By addressing these FAQs and troubleshooting common issues, developers can reduce downtime and frustration, ensuring a smoother development process and a better user experience. As you integrate React Icons into your projects, keep this guide handy to overcome any hurdles with ease.

How to Migrate Twilio Video to VideoSDK 🛠 👨🏻‍💻

Sagar Kava — Tue, 12 Dec 2023 18:30:00 +0000

Integrating video calls into apps (using JavaScript, React, Android, iOS) is a common need, and developers often look for real-time voice and video features. Twilio Video and VideoSDK are popular platforms, but with Twilio discontinuing Programmable Video, it's crucial to find a reliable alternative. VideoSDK emerges as a top competitor of Twilio Video, providing a user-friendly API for the seamless integration of robust audio-video features into your apps with minimal code. Its quick integration allows you to focus on enhancing user experience effortlessly. 🚀

VideoSDK Key Features:

High Scalability: Reaching New Heights 🌐

Supports up to 300 attendees, and 50 presenters, with global reach and <99ms latency, ensuring uninterrupted large-scale collaborations.

Adaptive Bitrate : A Symphony of Quality 🎶

Offers adaptive bitrate technology for optimal audio-video experiences, auto-adjusting stream quality based on bandwidth and network conditions.

Customizable SDK : Tailored Perfection 🎨

Fully customize UI with end-to-end SDK, accelerate time-to-market with code samples, and build interactive features using PubSub for a tailored user experience.

Quality Recordings : Cinematic Memories 🎥

Supports 1080p video recording with programmable layouts and custom templates. Store recordings on Video SDK cloud or popular providers like AWS, GCP, or Azure.

Detailed Analytics : Peek Behind the Curtains 🔍

Access in-depth video call metrics for comprehensive session analysis, including participant interactions and duration.

Cross-Platform Streaming : Be Everywhere 🌐

Stream live events on platforms like YouTube, LinkedIn, Facebook, etc., with built-in RTMP support.

Seamless Scaling : Grow Without Limits 🚀

Effortlessly scale live audio/video from a few users to over 10,000 within your web app, reaching millions through RTMP output.

Platform Support : Across the Universe 🌍

Build live video apps for specific platforms and run seamlessly across browsers, devices, and operating systems with minimal development effort.

And here's the most exciting part – it's FREE for every developer to kickstart their journey! VideoSDK not only provides a cutting-edge solution but also boasts a pricing structure that effortlessly aligns with the growth of your business. Enjoy a guaranteed 10,000 FREE minutes every month, ensuring that you not only get top-notch quality but also incredible value for your investment.

We're here to assist you in transitioning from Twilio Video to VideoSDK, ensuring a smooth journey as you migrate for powerful voice, video, and streaming integrations. Let's simplify the process together.

Twilio Video to VideoSDK Migration Guide:

Javascript: Smooth Transition Code

This migration guide provides a step-by-step transition from using Twilio Video to VideoSDK on Javascript for your real-time communication needs. The process involves understanding key concepts, setup differences, installation procedures, and code adjustments.

Explore the seamless transition from Twilio to Video SDK for JavaScript with our comprehensive migration guide. Elevate your video communication with expert insights and step-by-step instructions.

React: Elevate Your React Experience

This migration guide provides a step-by-step transition from using Twilio Video to VideoSDK on React for your real-time communication needs. The process involves understanding key concepts, setup differences, installation procedures, and code adjustments.

Migration Guide From Twilio Video to Video SDK - React | Video SDK

Easily migrate from Twilio to VideoSDK on React. Our guide provides concise steps for seamless integration, enhancing your app’s video capabilities effortlessly.

Android: Androids, Assemble!

This migration guide provides a step-by-step transition from using Twilio Video to VideoSDK on Android for your real-time communication needs. The process involves understanding key concepts, setup differences, installation procedures, and code adjustments.

[Migration Guide From Twilio Video to Video SDK - Android | Video SDK

Explore the seamless transition from Twilio to Video SDK for Android with our comprehensive migration guide. Elevate your video communication with expert insights and step-by-step instructions.

Features Map: Choosing Excellence Over Good

Choose wisely! Delve into the feature map, comparing Twilio Video and VideoSDK. Understand the unique offerings and capabilities of each, aiding your decision-making process based on project requirements.

FAQs

Q1: Why should I migrate to VideoSDK?

VideoSDK not only matches Twilio Video but exceeds it with features like high scalability, adaptive bitrate, customizable SDK, and more. It's a strategic move for future-proofing your real-time communication apps.

Q2: Is the migration process complicated?

Not at all! We provide detailed migration guides for Javascript, React, and Android, ensuring a smooth transition without headaches. You'll be up and running in no time.

Q3: What makes VideoSDK stand out?

VideoSDK offers not just quality features but also a generous FREE tier, providing 10,000 minutes every month. It's a cost-effective solution without compromising on excellence.

Conclusion

In conclusion, migrating from Twilio Video to VideoSDK marks a strategic move in ensuring the continued success and advancement of your real-time communication applications. With Twilio discontinuing Programmable Video, the transition becomes imperative, and VideoSDK emerges as an exceptional alternative, offering a seamless integration experience across JavaScript, React, Android, and iOS platforms.

Do you have any questions about switching to VideoSDK? We’d love to help. Contact our support team or jump into our Discord community to get started.

🔥 Building a video chat app with screen-sharing and React hooks 🤯

Sagar Kava — Thu, 21 Sep 2023 11:07:00 +0000

What is this article about?

You wrote this article to delve into the intricacies of building a video conferencing app with screen-sharing using React. Your goal was to highlight the complexity and transformative potential of this technology.

Why did I create this article?

I wrote this article to discuss creating a complex video conferencing app with screen-sharing capabilities using React. I explored how technology, code, and user interfaces combine to go beyond regular communication. Additionally, I discussed how such apps transform human interaction in the modern tech era.

Video SDK - Live video infrastructure for every developer

Video SDK is a robust live video platform with features like real-time video conferencing, chat, screen sharing, and more. It offers SDKs for various platforms, empowering developers to create customizable video experiences, with support for popular programming languages like JavaScript, React, React Native, Flutter, Android Native, iOS Native, and more. Plus, it uses a pay-as-you-go pricing model and is suitable for businesses of all sizes. https://www.videosdk.live/

What do we offer for you?

The Video SDK RTC React JS SDK offers an array of impressive features, each designed to enhance your virtual communication and collaboration experience:

Free Usage: You get 10,000 minutes free each month.
Effortless Setup: It's low-code and serverless, making it easy to use.
Full Multimedia: Enjoy real-time audio, video, and data streams.
High-Quality Screen Sharing: Share your screen in HD and Full HD.
Customizable UI: Personalize the interface as needed.
Rich Chat: Communicate with rich media in the chat.
Social Media Integration: Connect with platforms like Facebook and Youtube (RTMP out support).
Intelligent Speaker Switch: Automatic speaker management.
Cloud Recording: Record meetings in the cloud.

If you get stuck at any point or need help in understanding a concept, you can put your query in our Discord Channel.

Building a video chat app with screen-sharing and React

Prerequisites

First up, you'll need a Video SDK Account Don't have one yet? No sweat! Just tag along with our Video SDK Dashboard guide.
Next, make sure you've got a grasp of React's fundamentals. We're talking React 101 here, folks!
The star of the show, of course, is our React Video SDK Package manager. You'll want that in your arsenal.
Don't forget to have Node and NPM cozying up on your device. They're your trusty sidekicks for this journey.
Now, let's talk hooks - get comfy with useState, useRef, and useEffect. They're your secret weapons.
If you're feeling ambitious, you can dive into the React Context API. It's optional, but it can add some extra oomph to your app.

Let's Get started

You can use react-scripts to generate project template or any other react boilerplate.

Create new project using create-react-app

Installing the dependencies

##npm

$ npm install "@videosdk.live/react-sdk"

//For the Participants Video
$ npm install "react-player"

or 

##yarn

$ yarn add "@videosdk.live/react-sdk"

//For the Participants Video
$ yarn add "react-player"

Structure of the project

.
├── node_modules
├── public
├── .env
├── src
│ └── api.js
│ └── App.js
│ └── index.css
│ └── index.jsx
├── package.json
...
.

Absolutely, we're going to harness the power of functional components to tap into React's fantastic reusable component setup. Here's what's on our menu:

User Components: These will handle user-related functionalities.
Video Components: These will take care of everything related to videos.
Control Components: These are the real MVPs, covering mic, camera, and the all-important exit function, ensuring smooth sailing during your video experience.

Let's get started and make some magic happen!

App Architecture:

Our app is going to be structured like this:

MeetingView Component: This is the main hub of our app. Inside it, you'll find the ParticipantView. This view is where we'll display essential participant information such as their name, video stream, audio status, and more.
Controls Component: Think of this as the command center. It's where users take control of the app. Here, they can perform actions like leaving the meeting and toggling their media settings.

We're breaking this down into two key files:

API.js: This file handles API tasks, like creating unique meeting IDs and tokens.

App.js: This is where the magic happens. It renders the MeetingView and gets you into the meeting. It's your video adventure's front door.

With these two files in play, we're all set to roll!

Let's Dive into API.js

Before we take the next leap, our first task is to craft an API request in API.js. This request is your golden ticket to generating a one-of-a-kind meeting ID. But hold on, there's a catch - you'll need an authentication token.

You can snag this token in two ways: either whip it up using the videosdk-rtc-api-server-examples or go directly to the "<Generated-from-dashbaord>" for developers.

src/API.js

//Auth token we will use to generate a meeting and connect to it
export const authToken = "<Generated-from-dashbaord>";
// API call to create meeting
export const createMeeting = async ({ token }) => {
  const res = await fetch(`https://api.videosdk.live/v2/rooms`, {
    method: "POST",
    headers: {
      authorization: `${authToken}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({}),
  });
  //Destructuring the roomId from the response
  const { roomId } = await res.json();
  return roomId;
};

Nots 📝
One should have a VideoSDK account to generate token. Visit VideoSDK dashboard to generate token.

Building App.js Wireframe

In the App.js wireframe, we'll harness Video SDK Hooks and Context Providers. Here's the quick breakdown:

MeetingProvider: A Context Provider that shares data with multiple components at various nesting levels.
MeetingConsumer: The Context Consumer that listens for changes in the Provider's data.
u*seMeeting*: A hook that handles all things related to the meeting, like joining, leaving, and adjusting mic and webcam settings.
useParticipant: This hook focuses on individual participants, managing their name, webcam stream, mic stream, and more. The Meeting Context keeps tabs on all the changes in the meeting. Let's dive in and tweak App.js to make it happen! 🚀

src/App.js


import "./App.css";
import React, { useEffect, useMemo, useRef, useState } from "react";
import {
  MeetingProvider,
  MeetingConsumer,
  useMeeting,
  useParticipant,
} from "@videosdk.live/react-sdk";
import { authToken, createMeeting } from "./API";
import ReactPlayer from "react-player";

function JoinScreen({ getMeetingAndToken }) {
  return null;
}

function ParticipantView(props) {
  return null;
}

function Controls(props) {
  return null;
}

function MeetingView(props) {
  return null;
}

function App() {
  const [meetingId, setMeetingId] = useState(null);

  const getMeetingAndToken = async (id) => {
    const meetingId =
      id == null ? await createMeeting({ token: authToken }) : id;
    setMeetingId(meetingId);
  };

  const onMeetingLeave = () => {
    setMeetingId(null);
  };

  return authToken && meetingId ? (
    <MeetingProvider
      config={{
        meetingId,
        micEnabled: true,
        webcamEnabled: true,
        name: "C.V. Raman",
      }}
      token={authToken}
    >
      <MeetingConsumer>
        {() => (
          <MeetingView meetingId={meetingId} onMeetingLeave={onMeetingLeave} />
        )}
      </MeetingConsumer>
    </MeetingProvider>
  ) : (
    <JoinScreen getMeetingAndToken={getMeetingAndToken} />
  );
}

export default App;

Let's get cracking on implementing the Join Screen!

In the Join Screen, we're keeping things straightforward with two essential features:

Create New Meeting: This option lets users kickstart a fresh meeting from scratch.

Join the Meeting: Here, users can hop into an existing meeting using a Meeting ID.

Our star of the show here is the JoinScreen Component. It's where the action happens. Time to bring this screen to life! 🚀

src/App.js

function JoinScreen({ getMeetingAndToken }) {
  const [meetingId, setMeetingId] = useState(null);
  const onClick = async () => {
    await getMeetingAndToken(meetingId);
  };
  return (
    <div>
      <input
        type="text"
        placeholder="Enter Meeting Id"
        onChange={(e) => {
          setMeetingId(e.target.value);
        }}
      />
      <button onClick={onClick}>Join</button>
      {" or "}
      <button onClick={onClick}>Create Meeting</button>
    </div>
  );
}

Implement Participant View and Controls

Let's roll up our sleeves and get to work on implementing the ParticipantView and Controls. These components are vital for managing participant interactions effectively.

ParticipantView: This component will display the view for individual participants, showing their video, audio, and other relevant information.

Controls: The control panel that allows you to perform actions like muting/unmuting the participant's microphone and toggling their camera.

With these components in place, you'll have full control over your participants' experience. Time to dive in! 🚀

Forwarding Ref for Mic and Camera: We'll use React's useRef to reference audio and video components for participant control.
useParticipant Hook: This hook manages properties and events for a specific participant using their ID.
MediaStream API: We use MediaStream to handle audio and video playback.

src/App.js

function ParticipantView(props) {
  const micRef = useRef(null);
  const { webcamStream, micStream, webcamOn, micOn, isLocal, displayName } =
    useParticipant(props.participantId);

  const videoStream = useMemo(() => {
    if (webcamOn && webcamStream) {
      const mediaStream = new MediaStream();
      mediaStream.addTrack(webcamStream.track);
      return mediaStream;
    }
  }, [webcamStream, webcamOn]);

  // webcamStream.pause()
  // micStream.pause()

  // webcamStream.resume()
  // micStream.resume()

  useEffect(() => {
    if (micRef.current) {
      if (micOn && micStream) {
        const mediaStream = new MediaStream();
        mediaStream.addTrack(micStream.track);

        micRef.current.srcObject = mediaStream;
        micRef.current
          .play()
          .catch((error) =>
            console.error("videoElem.current.play() failed", error)
          );
      } else {
        micRef.current.srcObject = null;
      }
    }
  }, [micStream, micOn]);

  return (
    <div key={props.participantId}>
      <p>
        Participant: {displayName} | Webcam: {webcamOn ? "ON" : "OFF"} | Mic:{" "}
        {micOn ? "ON" : "OFF"}
      </p>
      <audio ref={micRef} autoPlay muted={isLocal} />
      <button onClick={() => webcamStream.pause()}>Pause</button>
      <button onClick={() => webcamStream.resume()}>Resume</button>
      {webcamOn && (
        <ReactPlayer
          //
          playsinline // very very imp prop
          pip={false}
          light={false}
          controls={false}
          muted={true}
          playing={true}
          //
          url={videoStream}
          //
          height={"200px"}
          width={"300px"}
          onError={(err) => {
            console.log(err, "participant video error");
          }}
        />
      )}
    </div>
  );
}

Function Controls

src/App.js

function Controls() {
  const { leave, toggleMic, toggleWebcam, toggleScreenShare } = useMeeting();
  return (
    <div>
      <button onClick={() => leave()}>Leave</button>
      <button onClick={() => toggleMic()}>toggleMic</button>
      <button onClick={() => toggleWebcam()}>toggleWebcam</button>
      <button onClick={() => toggleScreenShare()}>screen share</button>

    </div>
  );
}

const PresenterView = ({ presenterId }) => {
  const { screenShareStream, screenShareOn } = useParticipant(presenterId);

  //Creating a media stream from the screen share stream
  const mediaStream = useMemo(() => {
    if (screenShareOn && screenShareStream) {
      const mediaStream = new MediaStream();
      mediaStream.addTrack(screenShareStream.track);
      return mediaStream;
    }
  }, [screenShareStream, screenShareOn]);

  return (
    <>
      <ReactPlayer
        //
        playsinline // very very imp prop
        playIcon={<></>}
        //
        pip={false}
        light={false}
        controls={false}
        muted={true}
        playing={true}
        //
        url={mediaStream} // passing mediastream here
        //
        height={"100%"}
        width={"100%"}
        onError={(err) => {
          console.log(err, "presenter video error");
        }}
      />
    </>
  );
};

Create a MeetingView

Let's focus on implementing the MeetingView component. This component is at the core of your application, responsible for displaying the meeting interface, including participant videos, audio, and other essential information.

With the MeetingView in place, you'll have a central hub for all your meeting-related activities. Let's get to work! 🚀

src/App.js

function MeetingView(props) {
  const [joined, setJoined] = useState(null);
  const { join, presenterId } = useMeeting();
  const { participants } = useMeeting({
    onMeetingJoined: () => {
      setJoined("JOINED");
    },
    onMeetingLeft: () => {
      props.onMeetingLeave();
    },
  });
  const joinMeeting = () => {
    setJoined("JOINING");
    join();
  };

  return (
    <div className="container">
      <h3>Meeting Id: {props.meetingId}</h3>
      {joined && joined == "JOINED" ? (
        <div>
          <Controls />
          {[...participants.keys()].map((participantId) => (
            <ParticipantView
              participantId={participantId}
              key={participantId}
            />
          ))}
          {presenterId && <PresenterView presenterId={presenterId} />}
        </div>
      ) : joined && joined == "JOINING" ? (
        <p>Joining the meeting...</p>
      ) : (
        <button onClick={joinMeeting}>Join</button>
      )}
    </div>
  );
}

function App() {
  const [meetingId, setMeetingId] = useState(null);

  const getMeetingAndToken = async (id) => {
    const meetingId =
      id == null ? await createMeeting({ token: authToken }) : id;
    setMeetingId(meetingId);
  };

  const onMeetingLeave = () => {
    setMeetingId(null);
  };

  return authToken && meetingId ? (
    <MeetingProvider
      config={{
        meetingId,
        micEnabled: true,
        webcamEnabled: true,
        name: "C.V. Raman",
      }}
      token={authToken}
    >
      <MeetingConsumer>
        {() => (
          <MeetingView meetingId={meetingId} onMeetingLeave={onMeetingLeave} />
        )}
      </MeetingConsumer>
    </MeetingProvider>
  ) : (
    <JoinScreen getMeetingAndToken={getMeetingAndToken} />
  );
}

Running the Application

Now that you've implemented all the components, you can run the application using the following command:

npm start

This will start the development server, and you can access your video conferencing app in a web browser.

Conclusion:

Congratulations! You've just wrapped up building your video calling app with screen sharing using React. If you're eager to expand your app's capabilities with features like chat messaging, screen sharing, polls, and more, our documentation is the place to explore.

Should you encounter any hiccups during implementation, don't fret. We've got you covered with examples on GitHub, or you can always reach out to us on our Discord community for assistance.

Well done on your app-building journey! 🎉

Sagar KavaFollow

Create a Virtual Event Platform With Voice & Video With Prebuilt SDK

Sagar Kava — Thu, 26 May 2022 13:45:11 +0000

Build your virtual event platform with Video SDK using PreBuild APIs within minutes.

Building a virtual event platform is an excellent idea since the virtual event industry is growing rapidly with an estimated valuation to reach $774 billion by 2030. The only problem is finding the best video SDK to integrate into your app. And no doubt the are many Video SDKs out in the market but many are overpriced or lacking in features & customization or simply lack quality customer support. But with Video SDK we try to solve all the current industry dilemmas and provide you the experience possible!

Why choose Video SDK to build your Virtual event platform?

Video SDK is a video & audio conferencing service you can integrate into your app within a few minutes. It helps you build the best virtual event platform with 10k free monthly minutes. 100+ startups are using Video SDK to build powerful platforms in the Virtual event space. We provide PreBuild as well as advanced virtual event platform features to integrate into your app.

If you are building a virtual events platform using Low-Code or No-Code apps then check out our below tutorials.

How to embed “Video Calling API” on any low-code web builder?
How to build a video calling app with Bubble.io?
How to build a video calling app on WordPress?

The steps to build a virtual event platform using Prebuilt SDK

Following the below steps will guide you to quickly build the best virtual event platform. Make sure to follow them accordingly and if you face any issues go ahead then go ahead and join our discord community and we will solve your issues the right way!

1: Create a Video SDK account and generate API Key

Sign Up on Video SDK to create your free account. Once you set up the account go to settings>api-keys and generate a new API key for integration. (For more info, you can follow How to generate API Key?)

2: Setup a meeting in your virtual event platform

Create a index.html file and add the following <script> tag at the end of your code's <body> tag. Initialize VideoSDKMeeting after the script gets loaded. Replace the apiKey with the one generated in Step 1.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Videosdk.live RTC</title>
  </head>
  <body>
<script>
  var script = document.createElement("script");
  script.type = "text/javascript";

  script.addEventListener("load", function (event) {
    const meeting = new VideoSDKMeeting();

    const config = {
      name: "John Doe",
      apiKey: "<API KEY>", // generated in step 1
      meetingId: "milkyway", // enter your meeting id

      containerId: null,
      redirectOnLeave: "https://www.videosdk.live/",

      micEnabled: true,
      webcamEnabled: true,
      participantCanToggleSelfWebcam: true,
      participantCanToggleSelfMic: true,

      chatEnabled: true,
      screenShareEnabled: true,
      pollEnabled: true,
      whiteboardEnabled: true,
      raiseHandEnabled: true,

      recordingEnabled: true,
      recordingWebhookUrl: "https://www.videosdk.live/callback",
      recordingAWSDirPath: `/meeting-recordings/${meetingId}/`, // automatically save recording in this s3 path
      autoStartRecording: true, // auto start recording on participant joined

      brandingEnabled: true,
      brandLogoURL: "https://picsum.photos/200",
      brandName: "Awesome startup",
      poweredBy: true,

      participantCanLeave: true, // if false, leave button won't be visible

      // Live stream meeting to youtube
      livestream: {
        autoStart: true,
        outputs: [
          // {
          // url: "rtmp://x.rtmp.youtube.com/live2",
          // streamKey: "<STREAM KEY FROM YOUTUBE>",
          // },
        ],
      },

      permissions: {
        askToJoin: false, // Ask joined participants for entry in meeting
        toggleParticipantMic: true, // Can toggle other participant's mic
        toggleParticipantWebcam: true, // Can toggle other participant's webcam
        drawOnWhiteboard: true, // Can draw on whiteboard
        toggleWhiteboard: true, // Can toggle whiteboard
        toggleRecording: true, // Can toggle meeting recording
        removeParticipant: true, // Can remove participant
        endMeeting: true, // Can end meeting
      },

      joinScreen: {
        visible: true, // Show the join screen ?
        title: "Daily scrum", // Meeting title
        meetingUrl: window.location.href, // Meeting joining url
      },

      pin: {
        allowed: true, // participant can pin any participant in meeting
        layout: "SPOTLIGHT", // meeting layout - GRID | SPOTLIGHT | SIDEBAR
      },

      leftScreen: {
        // visible when redirect on leave not provieded
        actionButton: {
          // optional action button
          label: "Video SDK Live", // action button label
          href: "https://videosdk.live/", // action button href
        },
      },

      notificationSoundEnabled: true,

      maxResolution: "sd", // "hd" or "sd"
    };

    meeting.init(config);
  });

  script.src =
    "https://sdk.videosdk.live/rtc-js-prebuilt/0.3.1/rtc-js-prebuilt.js";
  document.getElementsByTagName("head")[0].appendChild(script);
</script>
  </body>
</html>

3: Generate your unique meeting link

Create createMeeting.htm and add createMeeting() function

Add a <script> which will contain createMeeting() which will create and redirect to a new meeting. And add this method to onClick of <button>

Your <body> should look something like this.

<body>
  <script>
    // Function to create meeting ID
    function createMeeting() {
          let meetingId = 'xxxxyxxx'.replace(/[xy]/g, function(c) {
              var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
              return v.toString(16);
          });
          console.log("http://"+ window.location.host + "?meetingId="+ meetingId)
          document.getElementById("copyInput").value = "https://"+ window.location.host + "/meeting.html?meetingId="+ meetingId;
    }

    // Function to copy the link
    function copyFunction() {
      /* Get the text field */
      var copyText = document.getElementById("copyInput");

      /* Select the text field */
      copyText.select();
      copyText.setSelectionRange(0, 99999); /* For mobile devices */

      /* Copy the text inside the text field */
      navigator.clipboard.writeText(copyText.value);
    }
  </script>
  <div>
    <button onclick="createMeeting()">Create Meeting</button>
    <br/>
    <input type="text" id="copyInput">
    <button onclick="myFunction()">Copy Link</button>
  </div>
</body>

4: Update to take the meetingId from the URL.

In this way, you will be able to access meetingId from the URL and each unique URL will work as a different room

//...
<script>

   script.addEventListener("load", function (event) {
      //Get URL query parameters
      const url = new URLSearchParams(window.location.search);

      //...

      const config = {
        // ...
        meetingId: url.get("meetingId"), // Get meeting id from params.
        // ...
      };

      const meeting = new VideoSDKMeeting();
      meeting.init(config);
    });

</script>

//...

5: Run and test

Install an HTTP server if you don't already have one and run the server to join the meeting from the browser.

Node.js

$ npm install -g live-server
$ live-server --port=8000

Find the NPM run start for Python, PHP, WAMP, and XAMPP here.

PreBuild SDK features list

Below are the features of the virtual event platform. They can be easily implemented into your virtual event app. Simply input the 'true' or 'false' value in the <permission object > to your features for referring see the below video.

Build a custom virtual event platform

With Video SDK you can create a huge number of custom features. They are very helpful because the custom features are specific to your industry niche. We have kept the implementation of these features as simple as possible for our developers as well as no code developers.

Interactive live streaming - Host up to 50,000 participants on your virtual event platform in a single meeting.

Break out room - Utilize the break out rooms to flexibly merge meetings or transfer host to participants & vice versa & more.

Custom video track - Integrate Banuba a Face Filter SDK that provides awesome Filters and detailed analytics such as face tracking, background subtraction, & more.

Open source projects

Prebuilt React SDK UI Kit available on GitHub for free

You can go to GitHub & and use our PreBuild SDK UI kit as it is open source. This means you can use our PreBuild video SDK for free as well as customize it as per your needs for your virtual event platform.

Conclusion

Congrats on integrating Video SDK in your virtual event app! If you wish to add functionalities like chat messaging, and screen sharing, you can always check out our documentation. If you face any difficulty with the implementation you can check out the example on GitHub or connect with us on our discord community.

Add Video Calls in WordPress in Just 3 Steps

Sagar Kava — Sat, 07 May 2022 12:22:06 +0000

This tutorial will provide a step-by-step guide that can help you create a video calling app in WordPress with the Prebuilt Video SDK in Just 5 minutes. I've been creating various guides, such as this one, on different subjects. My personal goal is to make it easier for new developers to start building Web and Mobile applications without all the unnecessary hurdles.

Prebuilt SDK is the easiest way to add a video calling feature to your website. It works on any device, with no installation needed. Create meetings, join meetings and let people talk face to face over webcam in real-time.

HD,Full HD Video Calls
Add your logo
Video calls Real-time messaging
Cloud recording
Whiteboard and More

Add Video Calls on WordPress in 3 Steps

Step 1: Create an account and generate API Key

First, you will need to Sign Up to create a Video SDK account, which is absolutely free. Once you set up the account go to settings>api-keys and generate a new API key for integration. (For more info, you can follow How to generate API Key?)

Step 2: Add a Custom HTML block to your page

Once you've logged in to your WordPress dashboard., you'll want to add a Custom HTML block to the page of your site where you wish to create a video call embed. (For more info, you can follow this support article on Wordpress.org)

Step 3: Add Prebuilt Code in HTML block on WordPress

Simply copy and paste the following code into your Custom HTML block

<script>
  var script = document.createElement("script");
  script.type = "text/javascript";

  script.addEventListener("load", function (event) {
    const config = {
      name: "Video SDK Live",
      meetingId: "prebuilt",
      apiKey: "<YOUR API KEY>",

      containerId: null,

      micEnabled: true,
      webcamEnabled: true,
      participantCanToggleSelfWebcam: true,
      participantCanToggleSelfMic: true,

      chatEnabled: true,
      screenShareEnabled: true,
    };

    const meeting = new VideoSDKMeeting();
    meeting.init(config);
  });

  script.src =
    "https://sdk.videosdk.live/rtc-js-prebuilt/0.3.1/rtc-js-prebuilt.js";
  document.getElementsByTagName("head")[0].appendChild(script);
</script>

Now, Add the apiKey:"<YOUR API KEY>" (in the code above) in apiKey the property you need to provide your API KEY which we have generated in Step 1.

Preview your site and Go live 🎉

You can also see step-by-step see video tutorial
Create different roles (host, guest, etc.)
Create unique meeting links each time

Advanced

Developers, see our Prebuilt SDK for more information on creating and configuring rooms.

Basic features: Join Screen, Camera Control, Mic Controls, Redirect on Leave, Share Your Screen, Send Messages, Pin Participants.

Advanced features : Cloud Recording, Go Live On Social Media, Change Layout, Customize Branding, Customize Permissions, Whitelist Domain For Better Securit,

If you have questions while using the Video SDK Prebuilt SDK, I invite you to join the Discord Community. You can ask your questions in the #no-code channel.Or you can reach out to me on Twitter.

original post: https://www.videosdk.live/blog/video-calling-wordpress

// Detect dark theme var iframe = document.getElementById('tweet-1522216787978309633-735'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1522216787978309633&theme=dark" }

DEV Community: Sagar Kava

Namo-Turn-Detection-v1: Semantic Turn Detection for AI Voice Agents

1. Why Existing Approaches Break Down

2. NAMO’s Semantic Advantage

Key Features

3. Performance Benchmarks

Latency & Throughput

Accuracy Impact

Language Coverage

5. Impact on Real-Time Voice AI

6. Impact on Real-Time Voice AI

Multilingual Model (Recommended):

Performance Benchmarks for Multilingual Model

Specialized Single-Language Models

Try It Yourself!

Integration with VideoSDK Agents

7. Training & Testing

Looking Ahead: Future Directions

Conclusion

Citation

How to Build an AI Telephony Agent for Inbound and Outbound Calls with Open-source framework

videosdk-live / agents

Open-source framework for developing real-time multimodal conversational AI agents.

VideoSDK AI Agents

Overview

Why AI Telephony And Why Now?

Architecture Overview: Modular, Extensible, Real-Time

Project Structure

Dependencies

Configuration

The Voice Agent: AI-Powered Call Automation

The Server: Handling Calls, Routing, and Agent Sessions

Modular Providers, Services, and Models

Extending with MCP & Agent2Agent Protocol

Running and Testing

Key Takeaways

Resources & Next Steps

💎 Top 12+ Open-Source Gems to Become the Ultimate Developer

1. VideoSDK Agents

2. Build Your Own X

3. System Design Primer

4. FreeCodeCamp

5. Lobe Chat

6. Generative AI for Beginners

7. Project-Based Learning

8. Public APIs

9. Hello Algo

10. Developer Roadmap

11. Dify

12. Free Programming Books

13. Coding Interview University

Final Thoughts

Build a AI Voice Agent with Gemini API

Prerequisites

How to Get Your VideoSDK Auth Token

How to Get Your Google Gemini API Key

Project Structure

Backend Setup

1. Create virtual environment & install dependencies

2. Create .env file in the project root

3. Create server.py

Breaking Down the Backend

Frontend Setup

1. Create a new React + TypeScript project

2. Install dependencies

3. Configure Tailwind CSS

4. Create a frontend .env file

5. Build the React User Interface

Breaking Down the Frontend

🚀 Run the App

1. Start the Backend Server

2. Start the Frontend App

Conclusion

Build a Video Calling App with Call Trigger in Android (Kotlin) using Firebase and VideoSDK

Understanding the Telecom Framework

App Functionality Overview

Steps in the Process:

Core Functionality of the App

Prerequisites

Android App Setup

2. Create `.env` file in the project root

3. Create `server.py`

4. Create a frontend `.env` file

Set Permissions in `AndroidManifest.xml`