Required dependencies

npm install events tslib util ws
npm install user@example.com   # for TypeScript definitions in tsdef/

No native build steps are required for browser targets. If running in Node.js for testing purposes, ensure a WebRTC-capable environment (e.g., wrtc) is available, as the SDK targets browser globals (RTCPeerConnection, getUserMedia).

Project setup

1. Copy the source/ directory into your project, e.g. at src/vendor/twilio-video/.

2. Install dependencies (see above).

3. In tsconfig.json, ensure lib includes DOM APIs and paths resolve correctly:

{
  "compilerOptions": {
    "lib": ["ES2019", "DOM"],
    "moduleResolution": "node",
    "esModuleInterop": true,
    "paths": {
      "twilio-video-src/*": ["src/vendor/twilio-video/*"]
    }
  }
}

4. If you use Babel, add @babel/plugin-transform-typescript and ensure @babel/preset-env targets modern browsers so ES2019 class fields are handled.

5. Set the following environment variables for your backend token server (the SDK itself does not sign tokens; you must obtain an Access Token from your server):

TWILIO_ACCOUNT_SID=ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
TWILIO_API_KEY=SKxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
TWILIO_API_SECRET=<your_api_secret>

6. Import from the source entry point:

import { connect, createLocalAudioTrack, createLocalVideoTrack } from './src/vendor/twilio-video/index';

Public API

connect

function connect(token: string, options?: ConnectOptions): Promise<Room>

Connects to a named Twilio Video Room using a pre-signed Access Token. Use this as the primary entry point for establishing a session. Returns a cancellable Promise<Room>. Pass { name: 'my-room' } in options to target a specific room; omit name to enter an ad-hoc room.

createLocalAudioTrack

function createLocalAudioTrack(
  options?: CreateLocalTrackOptions | CreateLocalAudioTrackOptions
): Promise<LocalAudioTrack>

Captures the user's microphone and returns a LocalAudioTrack. Use before calling connect when you need to preview or process audio before joining a room, or call it post-connect and publish the result via room.localParticipant.publishTrack(track).

createLocalVideoTrack

function createLocalVideoTrack(options?: CreateLocalTrackOptions): Promise<LocalVideoTrack>

Captures the user's camera and returns a LocalVideoTrack. Use to render a local preview (track.attach(videoElement)) or to publish to a Room. Accepts constraints such as { width: 1280, height: 720, frameRate: 30 }.

createLocalTracks

function createLocalTracks(options?: CreateLocalTracksOptions): Promise<Array<LocalTrack>>

Acquires audio and/or video tracks in a single getUserMedia call, reducing permission prompts. Returns an array containing LocalAudioTrack and/or LocalVideoTrack instances depending on options passed.

Working examples

Scenario - Connect to a room and display remote video

Connect with a pre-obtained Access Token, attach remote participant video to the DOM, and clean up on disconnect.

import { connect } from './src/vendor/twilio-video/index';

async function joinRoom(token: string): Promise<void> {
  const room = await connect(token, {
    name: 'my-room',
    audio: true,
    video: { width: 640 }
  });

  console.log(`Connected to Room: ${room.name}`);

  room.participants.forEach(participant => {
    participant.tracks.forEach(publication => {
      if (publication.isSubscribed && publication.track) {
        document.body.appendChild((publication.track as any).attach());
      }
    });
    participant.on('trackSubscribed', track => {
      document.body.appendChild((track as any).attach());
    });
  });

  room.on('participantConnected', participant => {
    participant.on('trackSubscribed', track => {
      document.body.appendChild((track as any).attach());
    });
  });

  window.addEventListener('beforeunload', () => room.disconnect());
}

Scenario - Local camera preview before joining

Capture video locally, render it in a preview element, then publish it after connecting.

import { createLocalVideoTrack, connect } from './src/vendor/twilio-video/index';

async function previewAndJoin(token: string): Promise<void> {
  const videoTrack = await createLocalVideoTrack({ width: 1280, height: 720 });

  const previewEl = document.getElementById('preview') as HTMLVideoElement;
  (videoTrack as any).attach(previewEl);

  const room = await connect(token, {
    name: 'preview-room',
    tracks: []   // don't publish anything yet
  });

  // Publish once ready
  await room.localParticipant.publishTrack(videoTrack as any);
  console.log('Track published');
}

Scenario - Acquire audio and video together, handle errors

Use createLocalTracks for a single permissions prompt, with fallback on failure.

import { createLocalTracks } from './src/vendor/twilio-video/createlocaltracks';
import { connect } from './src/vendor/twilio-video/index';

async function connectWithTracks(token: string): Promise<void> {
  let tracks: any[] = [];

  try {
    tracks = await createLocalTracks({ audio: true, video: true });
  } catch (err) {
    console.warn('Could not acquire media, joining audio-only:', err);
    tracks = await createLocalTracks({ audio: true, video: false });
  }

  const room = await connect(token, {
    name: 'multi-track-room',
    tracks
  });

  console.log(`Joined room "${room.name}" with ${tracks.length} track(s)`);

  room.once('disconnected', (r, error) => {
    tracks.forEach((t: any) => t.stop());
    if (error) console.error('Disconnected with error:', error);
  });
}

File walkthrough

• index.ts - Aggregates and re-exports all public API symbols; the single import target for consumers.
• connect.js - Orchestrates signaling, PeerConnection setup, and Room construction.
• createlocaltrack.js - Thin wrappers around getUserMedia for individual audio or video track acquisition.
• createlocaltracks.ts - Batch media acquisition with constraint normalization.
• room.js - Room event emitter: participantConnected, participantDisconnected, trackPublished, disconnected.
• localparticipant.js - Manages publishTrack, unpublishTrack, encoding parameters for the local user.
• participant.js - Base identity/SID/state model shared by local and remote participants.
• remoteparticipant.js - Handles incoming track subscription events from the server.
• statemachine.js - Drives state transitions (closed → opening → open → closing) throughout signaling.
• eventemitter.js - Extended Node.js EventEmitter with listener-count guards.
• cancelableroompromise.js - Allows room.disconnect() to abort a pending connection attempt.
• encodingparameters.js - Stores and validates maxAudioBitrate / maxVideoBitrate parameters.
• twilioconnection.js - Manages the WebSocket lifecycle to Twilio's signaling endpoint.
• transceiver.js - RTCRtpTransceiver utility abstraction.
• networkqualityconfiguration.js - Configuration model for NQ level reporting (local/remote granularity).
• noisecancellationadapter.ts - Interface for third-party noise cancellation plugin integration.
• media/track/index.js - Base Track class with kind, name, logging infrastructure.
• media/track/es5/index.js - Exports ES5-transpiled LocalAudioTrack, LocalVideoTrack, LocalDataTrack.
• media/track/localaudiotrack.js - LocalAudioTrack with enable/disable and noise cancellation support.
• media/track/localvideotrack.js - LocalVideoTrack with processor pipeline support.
• media/track/localdatatrack.js - LocalDataTrack for sending arbitrary data over RTCDataChannel.
• media/track/remoteaudiotrack.js - Handles incoming remote audio, playback controls.
• media/track/remotevideotrack.js - Handles incoming remote video, attach/detach.
• media/track/remotedatatrack.js - Fires message events on incoming data channel payloads.
• signaling/index.js - Abstract Signaling state machine base (closed/opening/open/closing).
• signaling/v2/index.js - SignalingV2 implements the Twilio V2 WebSocket signaling protocol.
• data/ - Sender, receiver, and transport for LocalDataTrack / RemoteDataTrack.
• insights/ - Application monitoring, telemetry event builders, stats monitors.
• stats/ - WebRTC getStats() parsing and normalization.
• util/ - Constants, logging factory, browser support detection, codec utilities.
• webrtc/ - Cross-browser RTCPeerConnection and getUserMedia abstraction.
• webaudio/ - Web Audio graph utilities (e.g., for noise cancellation routing).
• preflight/ - runPreflight() test: validates connectivity before a real call.

Common pitfalls and fixes

• RTCPeerConnection is not defined in Node.js: The SDK targets browser globals; for server-side testing inject a WebRTC shim via global.RTCPeerConnection = require('wrtc').RTCPeerConnection.
• TypeScript types not found: The tsdef/ type definitions live in the upstream package root, not in lib/; install user@example.com alongside and set "types": ["twilio-video"] or reference tsdef/ directly.
• ES module / CJS interop errors with require(): The source uses mixed require/import; set "esModuleInterop": true and "allowSyntheticDefaultImports": true in tsconfig.json.
• events module missing in browser bundles: Add events to your bundler's Node polyfill list (Webpack: resolve.fallback: { events: require.resolve('events') }).
• Access Token expiry causes silent failure: Tokens are short-lived (default 1 hour); implement token refresh and call room.disconnect() + connect() before expiry.
• Track not visible after publishTrack: Confirm the track is not stopped (track.isStopped === false) and that the subscriber has isSubscribed === true before calling .attach().

Vibe-coding prompt template

I have the twilio-video.js SDK source (package: user@example.com) copied
into my project at `src/vendor/twilio-video/` (the `lib/` folder contents).
I also have a USAGE.md integration guide at `src/vendor/twilio-video/USAGE.md`.

Please integrate this SDK into my existing project step-by-step:

1. Read `src/vendor/twilio-video/USAGE.md` fully before writing any code.
2. Install the required dependencies listed in the "Required dependencies" section.
3. Update tsconfig.json / babel config as described in "Project setup".
4. Create a `src/video/client.ts` module that:
   - Exports a `joinRoom(token: string, roomName: string)` function using
     `connect` from `src/vendor/twilio-video/index`.
   - Exports a `getLocalTracks()` function using `createLocalTracks` from
     `src/vendor/twilio-video/createlocaltracks`.
   - Attaches remote participant video to a `<div id="remote-media">` element.
   - Handles the `disconnected` event and cleans up tracks.
5. Create a minimal UI component (React or plain HTML, matching my project style)
   that calls `joinRoom` on button click and shows a local video preview using
   `createLocalVideoTrack` from `src/vendor/twilio-video/index`.
6. Show me only real imports from the files in `src/vendor/twilio-video/` -
   do not invent any API that is not in USAGE.md or the source files.
7. Point out any bundler polyfills needed for the `events` and `util` packages.

License and credit

twilio-video.js is released under the BSD 3-Clause License (see the upstream repository for the full license text). Source: twilio-video on npm / GitHub: twilio/twilio-video.js. This block vendors lib/ from user@example.com without modification; all copyright notices in source/ apply.

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

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

Automation, Utilities & Developer Tools

무료