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.

Hướng dẫn cài đặt đầy đủ và prompt tích hợp sẽ mở khóa sau khi mua.

Automation, Utilities & Developer Tools

Miễn phí