// tsconfig.json
{
  "compilerOptions": {
    "types": ["agora-rtc-sdk-ng"]
  }
}

Public API

The samples expose patterns around the following real SDK symbols (visible in excerpts):

AgoraRTC.createClient

AgoraRTC.createClient(config: { mode: "rtc" | "live", codec: "vp8" | "vp9" | "h264" | "av1" }): IAgoraRTCClient

Creates the central RTC client. Use "rtc" mode for one-to-one or group calls; use "live" mode for broadcast scenarios. The codec must be chosen before joining and cannot change mid-session.

AgoraRTC.createMicrophoneAudioTrack

AgoraRTC.createMicrophoneAudioTrack(config?: { encoderConfig?: string }): Promise<IMicrophoneAudioTrack>

Creates a local audio track from the default microphone. Pass encoderConfig: "music_standard" for higher-quality audio as shown in displayCallStats/index.js. Publish the returned track via client.publish([audioTrack]).

AgoraRTC.enableLogUpload

AgoraRTC.enableLogUpload(): void

Enables automatic upload of SDK logs to Agora's servers for remote debugging. Called unconditionally in displayCallStats/index.js, geoFencing/index.js, and customVideoSource/index.js. Call this once before client.join().

client.startProxyServer

client.startProxyServer(mode: number): void

Enables Agora's cloud proxy. The numeric mode maps to proxy types (e.g. 3 = TCP/TLS). Visible in displayCallStats/index.js. Call before client.join() when users are behind firewalls that block UDP.

Working examples

Scenario - Basic video call join/leave

Adapt basic/basicVideoCall/index.js into a standalone TypeScript module. Creates a client, joins a channel, publishes local tracks, and handles remote users.

import AgoraRTC, { IAgoraRTCClient, ILocalTrack } from "agora-rtc-sdk-ng";

const client: IAgoraRTCClient = AgoraRTC.createClient({
  mode: "rtc",
  codec: "vp8",
});
AgoraRTC.enableLogUpload();

const localTracks: { videoTrack: ILocalTrack | null; audioTrack: ILocalTrack | null } = {
  videoTrack: null,
  audioTrack: null,
};

async function join(appId: string, channel: string, token: string | null, uid: number | null) {
  client.on("user-published", async (user, mediaType) => {
    await client.subscribe(user, mediaType);
    if (mediaType === "video") {
      user.videoTrack?.play(`remote-player-${user.uid}`);
    }
    if (mediaType === "audio") {
      user.audioTrack?.play();
    }
  });

  await client.join(appId, channel, token, uid);

  localTracks.audioTrack = await AgoraRTC.createMicrophoneAudioTrack({
    encoderConfig: "music_standard",
  });
  localTracks.videoTrack = await AgoraRTC.createCameraVideoTrack();

  localTracks.videoTrack.play("local-player");
  await client.publish([localTracks.audioTrack, localTracks.videoTrack]);
}

async function leave() {
  for (const track of Object.values(localTracks)) {
    track?.stop();
    track?.close();
  }
  await client.leave();
}

Scenario - Adjust video profile (codec + resolution)

Mirrors advanced/adjustVideoProfile/index.js. Switch codec before joining and set video encoder config after creating the track.

import AgoraRTC from "agora-rtc-sdk-ng";

type Codec = "vp8" | "vp9" | "h264" | "av1";
type VideoProfile = "360p_7" | "480p_1" | "720p_1" | "720p_2";

async function joinWithProfile(
  appId: string, channel: string,
  codec: Codec, profile: VideoProfile
) {
  const client = AgoraRTC.createClient({ mode: "rtc", codec });

  await client.join(appId, channel, null, null);

  const videoTrack = await AgoraRTC.createCameraVideoTrack({
    encoderConfig: profile,
  });
  const audioTrack = await AgoraRTC.createMicrophoneAudioTrack();

  videoTrack.play("local-player");
  await client.publish([audioTrack, videoTrack]);

  // Change profile mid-session:
  await videoTrack.setEncoderConfiguration(profile);
}

Scenario - Geo-fencing (restrict server regions)

Mirrors advanced/geoFencing/index.js. Set AgoraRTC.setArea before creating the client to restrict which Agora servers are used.

import AgoraRTC from "agora-rtc-sdk-ng";

type AreaCode = "GLOBAL" | "ASIA" | "CHINA" | "EUROPE" | "INDIA" | "JAPAN" | "NORTH_AMERICA";

function applyGeoFencing(area: AreaCode) {
  AgoraRTC.setArea({ areaCode: area });
}

async function joinWithGeoFencing(appId: string, channel: string, area: AreaCode) {
  applyGeoFencing(area);

  const client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });
  AgoraRTC.enableLogUpload();

  await client.join(appId, channel, null, null);

  const audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
  await client.publish([audioTrack]);

  return client;
}

File walkthrough

• basic/basicVideoCall/ - Minimal two-party video call; the canonical starting point for new integrations.
• basic/basicVoiceCall/ - Audio-only call, no video track published.
• basic/basicLive/ - Interactive live streaming with host/audience role switching.
• advanced/adjustVideoProfile/ - Demonstrates switching codecs (vp8/vp9/h264/av1) and video encoder profiles at runtime.
• advanced/audioEffects/ - Shows audio mixing (BGM) and audio effect tracks layered on a microphone track.
• advanced/customVideoSource/ - Publishes a <video> element or canvas as a custom video track instead of a camera.
• advanced/displayCallStats/ - Polls client.getRTCStats() and displays bitrate, packet loss, and RTT.
• advanced/geoFencing/ - Restricts Agora server regions via AgoraRTC.setArea().
• advanced/joinMultipleChannel/ - Uses AgoraRTC.createClient() multiple times to join separate channels simultaneously.
• advanced/screenshot/ - Captures a still image from the local video track.
• advanced/selfCapturing/ - Uses AgoraRTC.createScreenVideoTrack() for display capture.
• advanced/selfRendering/ - Demonstrates custom rendering by pulling raw video frames.
• advanced/shareTheScreen/ - Screen sharing alongside a camera track using dual-stream publishing.
• advanced/testMediaDevices/ - Enumerates and tests microphones, cameras, and speakers.
• advanced/vadExtention/ - Voice Activity Detection via the bundled agora-extension-vad plugin.
• extension/aiDenoiser/ - AI-powered noise suppression extension integration.
• extension/beauty/ - Real-time face beautification extension.
• extension/spatialAudio/ - 3D spatial audio positioning extension.
• extension/superClarity/ - Video super-resolution extension.
• extension/vad/ - Alternative VAD integration at the extension layer.
• extension/videoCompositor/ - Multi-stream video compositing extension.
• extension/virtualBackground/ - Background blur/replacement extension.
• framework/ - Vue and React wrappers showing SDK lifecycle inside component frameworks.
• others/ - Edge-case and miscellaneous demos not fitting other categories.
• quickStart/ - Minimal single-file quickstart for the fastest possible first call.

Common pitfalls and fixes

• App ID used in production without tokens: Always generate tokens server-side for production; App ID-only mode is insecure. Set options.token from your token server, never hardcode it.
• getOptionsFromLocal() returns undefined on first load: The samples rely on localStorage; run the settings page first or seed localStorage manually in tests.
• Codec mismatch between peers: All clients in a channel must use a compatible codec. av1 is marked beta and may not be supported by all browsers; default to vp8 for broadest compatibility.
• AgoraRTC.setArea() must be called before createClient(): Calling it after client creation has no effect; restructure initialization order if using geo-fencing.
• Extension .esm.js files not resolved by bundler: Add explicit aliases in Vite/Webpack for paths like agora-extension-ai-denoiser pointing to the bundled files inside source/extension/aiDenoiser/agora-extension-ai-denoiser/.
• client.startProxyServer() must precede client.join(): Calling it after joining silently fails; always call proxy setup in the initialization block before joining.

Vibe-coding prompt template

I have dropped the Agora RTC Web SDK 4.x sample projects into `src/agora-samples/`
and the integration guide is in `USAGE.md`. The upstream SDK package is `agora-rtc-sdk-ng`.

Please help me integrate real-time video calling into my existing project step-by-step:

1. Read `USAGE.md` fully before writing any code.
2. Reference the real exports visible in `src/agora-samples/advanced/` and `src/agora-samples/basic/`
   - do not invent any API symbols not present there.
3. Create a `VideoCallService.ts` module that:
   - Creates an AgoraRTC client with `mode: "rtc"` and `codec: "vp8"`
   - Exposes `join(appId, channel, token, uid)` and `leave()` async methods
   - Handles `user-published` and `user-unpublished` events
   - Publishes microphone audio and camera video tracks
4. Create a React/Vue component (match my existing framework) that uses `VideoCallService`.
5. Wire up env vars `VITE_AGORA_APP_ID` (or `REACT_APP_AGORA_APP_ID`) from `.env`.
6. Show me only the files that need to change, with full file contents.
7. After each step, confirm which `src/agora-samples/` sample you based it on.

License and credit

The sample projects are released under the MIT License. See source/LICENSE if present, or refer to the upstream repository on GitHub. Built on top of agora-rtc-sdk-ng by Agora.io.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

전체 설치 가이드와 연동 프롬프트는 구매 후 열람할 수 있습니다.

Automation, Utilities & Developer Tools

무료