# Web Group Video Chat

> Build a browser-based group video chat with Agora RTC.

A vanilla JavaScript group video chat that joins an Agora RTC channel, publishes local media, and renders remote participants.

- Author: Agora
- Updated: 2026-09-01
- Difficulty: Beginner
- Categories: rtc
- Platforms: JavaScript, Web
- Use cases: Video Calling, Quickstart
- Capabilities: Agora RTC, Group Video, Web SDK, Vite
- [Recipe page](https://recipes.agora.io/recipes/group-video-chat)
- [Implementation repository](https://github.com/AgoraIO-Community/group-video-chat)
- [Source recipe](https://github.com/AgoraIO-Community/group-video-chat/blob/master/docs/ai/RECIPE.md)
- [Raw source Markdown](https://raw.githubusercontent.com/AgoraIO-Community/group-video-chat/master/docs/ai/RECIPE.md)
- [All recipes](https://recipes.agora.io/llms.txt)

## Implementation guide

# Web group video chat

## Overview

Run a browser-based group video chat using Agora RTC Web SDK with local preview and remote participant rendering.

Use this recipe when you want a working reference for Web app, Agora RTC, multi-user video, Vite.

Repository: [AgoraIO-Community/group-video-chat](https://github.com/AgoraIO-Community/group-video-chat)

## Prerequisites

- An Agora account and project App ID.
- The platform toolchain required by this repository.
- A test device, simulator, browser, or runtime that supports the sample's audio/video path.
- A second RTC client or sample instance for validating remote publish and subscribe behavior.

## Configure

Create or update the project configuration with:

- `AGORA_APP_ID`

For local testing, some Agora projects allow tokenless joins when App Certificate is disabled. For production, generate RTC tokens on a trusted server and renew them before expiration.

For browser builds, keep the RTC join flow behind a user gesture and serve production deployments over HTTPS.

## Run The Sample

Install the JavaScript dependencies, add your Agora App ID to the project environment, then start the local development server. Open the page in a browser over `localhost` or HTTPS, join a channel, and verify local preview plus remote participant playback.

## What To Check

- The app registers Agora RTC event handlers before joining a channel.
- Local media preview or local audio state appears after permissions are granted.
- Remote users are rendered or heard when they publish audio/video.
- `user-published` or native user-joined callbacks are handled for each media type the sample supports.
- Leaving the channel stops local capture and releases RTC resources.

## Production Notes

- Never ship an App Certificate or privileged token generator in a client app.
- Renew tokens from the SDK expiration callback before the current token expires.
- Use subscriber/audience roles for users who should not publish media.
- Keep UID types consistent across clients in the same channel.
- For browser-based samples, deploy over HTTPS except when testing on `localhost`; for native samples, validate camera, microphone, and audio routing permissions on target devices.

## Implementation Prompt

```text
You are working in `AgoraIO-Community/group-video-chat`. Add or adapt this sample so a developer can run the web group video chat end to end with Agora RTC.

Goals:
- Preserve the existing sample architecture and README commands.
- Configure Agora credentials through environment variables or the platform-native configuration already used by the repo.
- Register RTC event handlers before joining the channel.
- Join a test channel, publish local media when the sample role allows it, and subscribe to remote users.
- Clean up RTC resources when leaving the channel or closing the app.
- Add production notes for token generation, renewal, and audience-only subscriber roles where applicable.

Validate by running the project-specific build or launch command from the README and testing with a second client in the same channel.
```


## Recipe prompt

You are implementing the "Web Group Video Chat" recipe in this project.

Read the recipe markdown first:
https://raw.githubusercontent.com/AgoraIO-Community/group-video-chat/master/docs/ai/RECIPE.md

Use the source repository for cross-reference:
https://github.com/AgoraIO-Community/group-video-chat

Build this recipe into the user's app using the markdown as the implementation guide. Inspect related source files through the repository links when the recipe points to them. Ask before installing new dependencies.