### Install Project Dependencies

Source: https://github.com/twilio/twilio-video.js/blob/master/test/framework/twilio-video-angular/README.md

Run this command to install the necessary packages for the project.

```bash
npm install
```

--------------------------------

### Start Application Server

Source: https://github.com/twilio/twilio-video.js/blob/master/test/framework/twilio-video-angular/README.md

Execute this command to launch the application server. The application requires an Access Token provided via a `token` query parameter.

```bash
npm start
```

--------------------------------

### Install twilio-video.js via NPM

Source: https://github.com/twilio/twilio-video.js/blob/master/README.md

Use this command to install the twilio-video.js library using NPM. This is the recommended method for integrating the SDK into your project.

```bash
npm install twilio-video --save
```

--------------------------------

### Setup Pre-commit Hook

Source: https://github.com/twilio/twilio-video.js/blob/master/README.md

Link the provided pre-commit script to enable pre-commit hooks for identifying common mistakes before committing.

```bash
ln -s ../../pre-commit.sh .git/hooks/pre-commit
```

--------------------------------

### Connect to a Twilio Video Room

Source: https://github.com/twilio/twilio-video.js/blob/master/README.md

Example of connecting to a Twilio Video room using a token and handling participant events. Requires the 'twilio-video' module.

```javascript
const Video = require('twilio-video');

Video.connect('$TOKEN', { name: 'room-name' }).then(room => {
  console.log('Connected to Room "%s"', room.name);

  room.participants.forEach(participantConnected);
  room.on('participantConnected', participantConnected);

  room.on('participantDisconnected', participantDisconnected);
  room.once('disconnected', error => room.participants.forEach(participantDisconnected));
});

function participantConnected(participant) {
  console.log('Participant "%s" connected', participant.identity);

  const div = document.createElement('div');
  div.id = participant.sid;
  div.innerText = participant.identity;

  participant.on('trackSubscribed', track => trackSubscribed(div, track));
  participant.on('trackUnsubscribed', trackUnsubscribed);

  participant.tracks.forEach(publication => {
    if (publication.isSubscribed) {
      trackSubscribed(div, publication.track);
    }
  });

  document.body.appendChild(div);
}

function participantDisconnected(participant) {
  console.log('Participant "%s" disconnected', participant.identity);
  document.getElementById(participant.sid).remove();
}

function trackSubscribed(div, track) {
  div.appendChild(track.attach());
}

function trackUnsubscribed(track) {
  track.detach().forEach(element => element.remove());
}
```

--------------------------------

### Create and Use Local Data Track

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Creates a LocalDataTrack for sending arbitrary data. Supports configurable reliability and ordering. Includes an example of sending mouse position updates and receiving data on the remote side.

```javascript
const Video = require('twilio-video');

// Reliable, ordered data track (default)
const mouseTrack = new Video.LocalDataTrack({ name: 'mouse-position' });

// Unreliable, unordered for low-latency gaming-style updates
const gameStateTrack = new Video.LocalDataTrack({
  maxRetransmits: 0,
  ordered: false
});

console.log('Reliable:', mouseTrack.reliable);      // true
console.log('Ordered:', gameStateTrack.ordered);    // false

// Connect with the data track
Video.connect('YOUR_ACCESS_TOKEN', {
  name: 'my-room',
  tracks: [mouseTrack]
}).then(room => {
  // Send mouse position updates to all remote participants
  window.addEventListener('mousemove', event => {
    mouseTrack.send(JSON.stringify({ x: event.clientX, y: event.clientY }));
  });

  // Send binary data
  mouseTrack.send(new Uint8Array([1, 2, 3, 4]).buffer);

  // Remote side: receive the data
  room.on('trackSubscribed', track => {
    if (track.kind === 'data') {
      track.on('message', data => {
        const position = JSON.parse(data);
        console.log('Remote cursor:', position.x, position.y);
      });
    }
  });
});
```

--------------------------------

### Video.runPreflight(token, options)

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Initiates a network preflight test to assess network connectivity, measure RTT, jitter, packet loss, and MOS score, and verify TURN server reachability. It returns a PreflightTest instance with events for progress, completion, and failure.

```APIDOC
## `Video.runPreflight(token, options)` — Run a Network Preflight Test

Runs a pre-call diagnostic test that checks network connectivity, measures RTT, jitter, packet loss, and MOS score, and verifies TURN server reachability. Returns a `PreflightTest` instance that emits `progress`, `completed`, and `failed` events.

```js
const { runPreflight } = require('twilio-video');

const preflightTest = runPreflight('YOUR_ACCESS_TOKEN', {
  duration: 15000, // run for 15 seconds (default: 10000)
  region: 'us1'   // target specific signaling region
});

preflightTest.on('progress', progressName => {
  // Possible values: mediaAcquired, connected, mediaSubscribed,
  //                  mediaStarted, dtlsConnected, peerConnectionConnected, iceConnected
  console.log('Preflight progress:', progressName);
});

preflightTest.on('completed', report => {
  console.log('Test duration (ms):', report.testTiming.duration);
  console.log('ICE connect time (ms):', report.networkTiming.ice?.duration);
  console.log('DTLS connect time (ms):', report.networkTiming.dtls?.duration);
  console.log('Media start time (ms):', report.networkTiming.media?.duration);

  const { jitter, rtt, packetLoss } = report.stats;
  console.log(`RTT avg/min/max: ${rtt.average}/${rtt.min}/${rtt.max} ms`);
  console.log(`Jitter avg: ${jitter.average} s`);
  console.log(`Packet loss avg: ${packetLoss.average}%`);

  const { localCandidate, remoteCandidate } = report.selectedIceCandidatePairStats ?? {};
  console.log('ICE type:', localCandidate?.candidateType, '->', remoteCandidate?.candidateType);

  // Show result to user
  if (packetLoss.average < 1 && rtt.average < 150) {
    showUI('Network looks great!');
  } else {
    showUI('Network may cause quality issues');
  }
});

preflightTest.on('failed', (error, partialReport) => {
  console.error('Preflight failed:', error.message);
  console.log('Progress reached:', partialReport?.progressEvents?.map(e => e.name));
});

// Optionally stop early
// preflightTest.stop();
```
```

--------------------------------

### Build Twilio Video.js

Source: https://github.com/twilio/twilio-video.js/blob/master/README.md

Run the build script to compile the project. Builds will be placed in the dist/ directory.

```bash
npm run build
```

--------------------------------

### Run Network Preflight Test with Video.runPreflight()

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Execute Video.runPreflight(token, options) to perform a network diagnostic test, checking connectivity, RTT, jitter, packet loss, and TURN server reachability. The function returns a PreflightTest instance that emits 'progress', 'completed', and 'failed' events.

```javascript
const { runPreflight } = require('twilio-video');

const preflightTest = runPreflight('YOUR_ACCESS_TOKEN', {
  duration: 15000, // run for 15 seconds (default: 10000)
  region: 'us1'   // target specific signaling region
});

preflightTest.on('progress', progressName => {
  // Possible values: mediaAcquired, connected, mediaSubscribed,
  //                  mediaStarted, dtlsConnected, peerConnectionConnected, iceConnected
  console.log('Preflight progress:', progressName);
});

preflightTest.on('completed', report => {
  console.log('Test duration (ms):', report.testTiming.duration);
  console.log('ICE connect time (ms):', report.networkTiming.ice?.duration);
  console.log('DTLS connect time (ms):', report.networkTiming.dtls?.duration);
  console.log('Media start time (ms):', report.networkTiming.media?.duration);

  const { jitter, rtt, packetLoss } = report.stats;
  console.log(`RTT avg/min/max: ${rtt.average}/${rtt.min}/${rtt.max} ms`);
  console.log(`Jitter avg: ${jitter.average} s`);
  console.log(`Packet loss avg: ${packetLoss.average}%`);

  const { localCandidate, remoteCandidate } = report.selectedIceCandidatePairStats ?? {};
  console.log('ICE type:', localCandidate?.candidateType, '->', remoteCandidate?.candidateType);

  // Show result to user
  if (packetLoss.average < 1 && rtt.average < 150) {
    showUI('Network looks great!');
  } else {
    showUI('Network may cause quality issues');
  }
});

preflightTest.on('failed', (error, partialReport) => {
  console.error('Preflight failed:', error.message);
  console.log('Progress reached:', partialReport?.progressEvents?.map(e => e.name));
});

// Optionally stop early
// preflightTest.stop();
```

--------------------------------

### Get WebRTC Media Statistics

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Retrieve detailed per-track WebRTC statistics for the current Room session, including bitrate, packet loss, and jitter. This method returns a Promise that resolves with an array of `StatsReport` objects. Note: Not supported on Safari 12.0 and below.

```javascript
Video.connect('YOUR_ACCESS_TOKEN', { name: 'my-room' }).then(room => {
  // Poll stats every 5 seconds
  const statsInterval = setInterval(async () => {
    try {
      const statsReports = await room.getStats();
      statsReports.forEach(report => {
        report.localAudioTrackStats.forEach(stat => {
          console.log(`Local audio bitrate: ${stat.bytesSent * 8 / 1000} kbps`);
          console.log(`Packets lost: ${stat.packetsLost}`);
        });
        report.localVideoTrackStats.forEach(stat => {
          console.log(`Local video bitrate: ${stat.bytesSent * 8 / 1000} kbps`);
          console.log(`Frame rate: ${stat.frameRate}`);
          console.log(`Dimensions: ${stat.dimensions?.width}x${stat.dimensions?.height}`);
        });
        report.remoteAudioTrackStats.forEach(stat => {
          console.log(`Remote audio jitter: ${stat.jitter} s`);
        });
      });
    } catch (err) {
      console.error('Stats error:', err);
    }
  }, 5000);

  room.once('disconnected', () => clearInterval(statsInterval));
});
```

--------------------------------

### Run Unit Tests

Source: https://github.com/twilio/twilio-video.js/blob/master/README.md

Execute the unit tests for the Twilio Video.js project.

```bash
npm run test:unit
```

--------------------------------

### Video.createLocalAudioTrack(options)

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Acquires a single LocalAudioTrack from the microphone. Supports optional Krisp noise cancellation and automatic default device tracking.

```APIDOC
## `Video.createLocalAudioTrack(options)` — Acquire a Single Audio Track

Acquires a single `LocalAudioTrack` from the microphone. Supports optional Krisp noise cancellation integration and automatic default device tracking (restarts the track when the system default audio input changes).

### Parameters

*   **options** (object) - Optional configuration for the audio track.
    *   **name** (string) - The name of the audio track.
    *   **noiseCancellationOptions** (object) - Options for Krisp noise cancellation.
        *   **vendor** (string) - The vendor for noise cancellation (e.g., 'krisp').
        *   **sdkAssetsPath** (string) - The path to the Krisp SDK assets.
    *   **defaultDeviceCaptureMode** (string) - Specifies how to handle changes in the default audio input device ('auto' to restart the track).

### Returns

A `Promise` that resolves with a `LocalAudioTrack` object.

### Example

```javascript
const Video = require('twilio-video');

Video.createLocalAudioTrack({
  name: 'microphone',
  noiseCancellationOptions: {
    vendor: 'krisp',
    sdkAssetsPath: '/assets/twilio-krisp-audio-plugin/1.0.0/dist'
  },
  defaultDeviceCaptureMode: 'auto'
}).then(localAudioTrack => {
  console.log('Audio track name:', localAudioTrack.name);
  // Publish into an already-connected room
  // return room.localParticipant.publishTrack(localAudioTrack);
}).catch(err => console.error('Audio track error:', err));
```
```

--------------------------------

### Create SDKDriver Instance

Source: https://github.com/twilio/twilio-video.js/blob/master/test/lib/sdkdriver/README.md

Instantiate an SDKDriver by providing a transport and a test driver implementation.

```javascript
const driver = await SDKDriver.create(transport, testDriver);
```

--------------------------------

### Video.createLocalTracks(options)

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Acquires LocalAudioTrack and LocalVideoTrack instances from the device's camera and microphone before connecting to a Room. This is useful for showing a camera preview or reusing tracks across multiple connections.

```APIDOC
## Video.createLocalTracks(options) — Acquire Local Audio and Video

Acquires `LocalAudioTrack` and `LocalVideoTrack` instances from the device's camera and microphone before connecting to a Room. Useful for showing a camera preview to the user prior to joining, or for reusing the same tracks across multiple Room connections.

### Method
POST

### Endpoint
/createLocalTracks

### Parameters
#### Path Parameters
None

#### Query Parameters
- **options** (object) - Optional - Configuration options for acquiring tracks.
  - **audio** (boolean | object) - Whether to acquire an audio track. If an object, specifies track options.
    - **name** (string) - The name of the audio track.
    - **echoCancellation** (boolean) - Enables echo cancellation.
    - **noiseSuppression** (boolean) - Enables noise suppression.
  - **video** (boolean | object) - Whether to acquire a video track. If an object, specifies track options.
    - **name** (string) - The name of the video track.
    - **width** (number) - The desired width of the video track.
    - **height** (number) - The desired height of the video track.
    - **frameRate** (number) - The desired frame rate of the video track.

### Request Example
```javascript
const Video = require('twilio-video');

Video.createLocalTracks({
  audio: { name: 'microphone', echoCancellation: true, noiseSuppression: true },
  video: { name: 'camera', width: 1280, height: 720, frameRate: 30 }
}).then(localTracks => {
  const videoTrack = localTracks.find(t => t.kind === 'video');
  const audioTrack = localTracks.find(t => t.kind === 'audio');

  // Show local preview
  document.getElementById('local-preview').appendChild(videoTrack.attach());

  // Mute/unmute microphone
  audioTrack.disable(); // mute
  audioTrack.enable();  // unmute

  // Later, join the Room with pre-acquired tracks
  return Video.connect('YOUR_ACCESS_TOKEN', { tracks: localTracks });
}).then(room => {
  console.log('Joined room with pre-acquired tracks');
}).catch(error => {
  if (error.name === 'NotAllowedError') {
    console.error('Camera/microphone permission denied');
  } else {
    console.error('Failed to get tracks:', error);
  }
});
```

### Response
#### Success Response (200)
- **localTracks** (array) - An array of acquired local tracks (`LocalAudioTrack` and `LocalVideoTrack`).

#### Response Example
```json
[
  {
    "kind": "audio",
    "name": "microphone",
    "enabled": true
  },
  {
    "kind": "video",
    "name": "camera",
    "enabled": true
  }
]
```
```

--------------------------------

### Acquire Local Audio and Video Tracks

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Acquires local audio and video tracks before connecting to a Room. Useful for camera previews or reusing tracks across multiple connections. Handles permissions and provides options for track configuration.

```javascript
const Video = require('twilio-video');

// Pre-acquire tracks for a camera preview
Video.createLocalTracks({
  audio: { name: 'microphone', echoCancellation: true, noiseSuppression: true },
  video: { name: 'camera', width: 1280, height: 720, frameRate: 30 }
}).then(localTracks => {
  const videoTrack = localTracks.find(t => t.kind === 'video');
  const audioTrack = localTracks.find(t => t.kind === 'audio');

  // Show local preview
  const previewContainer = document.getElementById('local-preview');
  previewContainer.appendChild(videoTrack.attach());

  // Mute/unmute microphone
  audioTrack.disable(); // mute
  audioTrack.enable();  // unmute

  // Later, join the Room with pre-acquired tracks (avoids double getUserMedia call)
  return Video.connect('YOUR_ACCESS_TOKEN', {
    name: 'my-room',
    tracks: localTracks
  });
}).then(room => {
  console.log('Joined room with pre-acquired tracks');
}).catch(error => {
  if (error.name === 'NotAllowedError') {
    console.error('Camera/microphone permission denied');
  } else {
    console.error('Failed to get tracks:', error);
  }
});
```

--------------------------------

### new Video.LocalDataTrack(options)

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Creates a LocalDataTrack for sending arbitrary data to subscribed remote participants over WebRTC data channels.

```APIDOC
## `new Video.LocalDataTrack(options)` — Create a Data Channel Track

Creates a `LocalDataTrack` for sending arbitrary data (strings, Blobs, ArrayBuffers) to all subscribed remote participants over WebRTC data channels. Configurable reliability (ordered delivery, retransmit limits, packet lifetime).

### Parameters

*   **options** (object) - Optional configuration for the data track.
    *   **name** (string) - The name of the data track.
    *   **maxRetransmits** (number) - The maximum number of retransmissions for unreliable data.
    *   **ordered** (boolean) - Whether the data channel should deliver messages in order.

### Returns

A `LocalDataTrack` object.

### Example

```javascript
const Video = require('twilio-video');

// Reliable, ordered data track (default)
const mouseTrack = new Video.LocalDataTrack({ name: 'mouse-position' });

// Unreliable, unordered for low-latency gaming-style updates
const gameStateTrack = new Video.LocalDataTrack({
  maxRetransmits: 0,
  ordered: false
});

// Connect with the data track
Video.connect('YOUR_ACCESS_TOKEN', {
  name: 'my-room',
  tracks: [mouseTrack]
}).then(room => {
  // Send mouse position updates to all remote participants
  window.addEventListener('mousemove', event => {
    mouseTrack.send(JSON.stringify({ x: event.clientX, y: event.clientY }));
  });

  // Send binary data
  mouseTrack.send(new Uint8Array([1, 2, 3, 4]).buffer);

  // Remote side: receive the data
  room.on('trackSubscribed', track => {
    if (track.kind === 'data') {
      track.on('message', data => {
        const position = JSON.parse(data);
        console.log('Remote cursor:', position.x, position.y);
      });
    }
  });
});
```
```

--------------------------------

### SDKDriver Messaging Protocol Usage

Source: https://github.com/twilio/twilio-video.js/blob/master/test/lib/sdkdriver/README.md

Demonstrates how to use the SDKDriver to send requests to the test process and handle events. It shows how to register an event listener and send a request, then log the response.

```javascript
const driver = await SDKDriver.create(transport, testDriver);

driver.on('event', data => {
  console.log('New event from the test process:', data);
});

const response = await driver.sendRequest({ call: 'some-api' });
console.log('Response from the test process:', response);
```

--------------------------------

### Create Local Audio Track with Krisp

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Acquires a local audio track from the microphone, enabling Krisp noise cancellation and automatic default device tracking. Listen for mute events and publish the track to a room.

```javascript
const Video = require('twilio-video');

// Create an audio track with Krisp noise cancellation
Video.createLocalAudioTrack({
  name: 'microphone',
  noiseCancellationOptions: {
    vendor: 'krisp',
    sdkAssetsPath: '/assets/twilio-krisp-audio-plugin/1.0.0/dist'
  },
  defaultDeviceCaptureMode: 'auto' // auto-restart on default device change
}).then(localAudioTrack => {
  console.log('Audio track name:', localAudioTrack.name);
  console.log('Is muted:', localAudioTrack.isMuted);

  // Toggle noise cancellation at runtime
  if (localAudioTrack.noiseCancellation) {
    localAudioTrack.noiseCancellation.enable();
    localAudioTrack.noiseCancellation.disable();
  }

  // Listen for mute events (e.g., phone call interruption on mobile)
  localAudioTrack.on('muted', () => console.warn('Microphone was muted by OS'));
  localAudioTrack.on('unmuted', () => console.log('Microphone restored'));

  // Publish into an already-connected room
  return room.localParticipant.publishTrack(localAudioTrack);
}).catch(err => console.error('Audio track error:', err));
```

--------------------------------

### Set Dynamic Bitrate Limits for Local Participant

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Adjust outgoing audio and video bitrate limits for the LocalParticipant at runtime without needing to reconnect. Pass `null` to remove all limits, or an object with specific limits to set them.

```javascript
Video.connect('YOUR_ACCESS_TOKEN', { name: 'my-room' }).then(room => {
  const { localParticipant } = room;

  // Set aggressive bitrate limits (e.g., user reports poor network)
  localParticipant.setParameters({
    maxAudioBitrate: 16000,   // 16 kbps
    maxVideoBitrate: 800000   // 800 kbps
  });

  // Remove bitrate limits
  localParticipant.setParameters(null);

  // Restore only video limit
  localParticipant.setParameters({ maxVideoBitrate: 2400000 });
});
```

--------------------------------

### Video.createLocalVideoTrack(options)

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Acquires a single LocalVideoTrack from the camera, with full support for MediaTrackConstraints.

```APIDOC
## `Video.createLocalVideoTrack(options)` — Acquire a Single Video Track

Acquires a single `LocalVideoTrack` from the camera, with full support for `MediaTrackConstraints` (resolution, frame rate, facing mode, device ID). On mobile browsers, only one `LocalVideoTrack` can hold the camera at a time.

### Parameters

*   **options** (object) - Optional configuration for the video track.
    *   **name** (string) - The name of the video track.
    *   **facingMode** (string) - Specifies which camera to use ('user' for front, 'environment' for back).
    *   **width** (object) - Constraints for the video width.
        *   **ideal** (number) - The ideal width.
        *   **max** (number) - The maximum allowed width.
    *   **height** (object) - Constraints for the video height.
        *   **ideal** (number) - The ideal height.
        *   **max** (number) - The maximum allowed height.
    *   **frameRate** (object) - Constraints for the video frame rate.
        *   **ideal** (number) - The ideal frame rate.
        *   **max** (number) - The maximum allowed frame rate.

### Returns

A `Promise` that resolves with a `LocalVideoTrack` object.

### Example

```javascript
const Video = require('twilio-video');

Video.createLocalVideoTrack({
  name: 'camera',
  facingMode: 'environment', // 'user' for front camera
  width: { ideal: 1280, max: 1920 },
  height: { ideal: 720, max: 1080 },
  frameRate: { ideal: 30, max: 60 }
}).then(localVideoTrack => {
  console.log('Video track name:', localVideoTrack.name);
  // Attach to a <video> element for local preview
  // const videoEl = localVideoTrack.attach();
  // document.getElementById('preview').appendChild(videoEl);
}).catch(err => {
  if (err.name === 'NotFoundError') {
    console.error('No camera found');
  } else {
    console.error('Video track error:', err);
  }
});
```
```

--------------------------------

### Publish Local Video Track Mid-Call

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Connect to a room with audio only, then publish a video track later. This is useful for scenarios where the user decides to enable their camera after joining a call. Ensure the video track is created before publishing.

```javascript
// Connect with audio only, then add video mid-call
Video.connect('YOUR_ACCESS_TOKEN', {
  name: 'my-room',
  audio: true,
  video: false
}).then(room => {
  const localParticipant = room.localParticipant;

  // Add video track later (e.g., user clicks "Turn on Camera")
  document.getElementById('enable-camera').addEventListener('click', () => {
    Video.createLocalVideoTrack({ name: 'camera', width: 1280 }).then(videoTrack => {
      return localParticipant.publishTrack(videoTrack, { priority: 'high' });
    }).then(publication => {
      console.log(`Published "${publication.trackName}" with priority "${publication.priority}"`);
      // publication.trackSid is now set by the server
    }).catch(err => console.error('Failed to publish video:', err));
  });

  // Unpublish a track without stopping it
  document.getElementById('hide-camera').addEventListener('click', () => {
    localParticipant.videoTracks.forEach(publication => {
      localParticipant.unpublishTrack(publication.track);
    });
  });

  // Publish multiple tracks at once
  Video.createLocalTracks({ audio: true, video: true }).then(tracks => {
    return localParticipant.publishTracks(tracks);
  }).then(publications => {
    publications.forEach(pub => console.log('Published:', pub.trackName));
  });
});
```

--------------------------------

### Create Local Video Track with Constraints

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Acquires a local video track from the camera, supporting MediaTrackConstraints for resolution and facing mode. Attaches the track to a video element for local preview and handles dimension changes.

```javascript
const Video = require('twilio-video');

// Request back camera on mobile at HD resolution
Video.createLocalVideoTrack({
  name: 'camera',
  facingMode: 'environment', // 'user' for front camera
  width: { ideal: 1280, max: 1920 },
  height: { ideal: 720, max: 1080 },
  frameRate: { ideal: 30, max: 60 }
}).then(localVideoTrack => {
  console.log('Video track name:', localVideoTrack.name);
  console.log('Dimensions:', localVideoTrack.dimensions); // { width, height }

  // Attach to a <video> element for local preview
  const videoEl = localVideoTrack.attach();
  videoEl.muted = true; // prevent echo
  document.getElementById('preview').appendChild(videoEl);

  // Listen for dimension changes (e.g., orientation change)
  localVideoTrack.on('dimensionsChanged', track => {
    console.log('New dimensions:', track.dimensions);
  });

  // Stop when done (releases camera)
  // localVideoTrack.stop();

  // Detach from DOM
  localVideoTrack.detach().forEach(el => el.remove());
}).catch(err => {
  if (err.name === 'NotFoundError') {
    console.error('No camera found');
  } else {
    console.error('Video track error:', err);
  }
});
```

--------------------------------

### Run Integration Tests

Source: https://github.com/twilio/twilio-video.js/blob/master/README.md

Execute integration tests. Requires TWILIO_ACCOUNT_SID, TWILIO_API_KEY_SID, and TWILIO_API_KEY_SECRET environment variables.

```bash
ACCOUNT_SID=<Your account sid> \
API_KEY_SID=<Your api key sid> \
API_KEY_SECRET=<Your api key secret> \
BROWSER=<Browser you'd like to use> \
npm run test:integration
```

--------------------------------

### room.localParticipant.publishTrack(track, options)

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Publishes a LocalTrack or raw MediaStreamTrack to the Room after already being connected. Supports setting publish priority.

```APIDOC
## `room.localParticipant.publishTrack(track, options)` — Publish a Track Mid-Call

Publishes a `LocalTrack` or raw `MediaStreamTrack` to the Room after already being connected. Returns a `Promise<LocalTrackPublication>`. Supports setting publish priority (`low`, `standard`, `high`).

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **track** (`LocalTrack` or `MediaStreamTrack`) - Required - The track to publish.
- **options** (`Object`) - Optional - Configuration options for publishing.
  - **priority** (`String`) - Optional - The publish priority ('low', 'standard', 'high'). Defaults to 'standard'.

### Request Example
```javascript
// Connect with audio only, then add video mid-call
Video.connect('YOUR_ACCESS_TOKEN', {
  name: 'my-room',
  audio: true,
  video: false
}).then(room => {
  const localParticipant = room.localParticipant;

  // Add video track later (e.g., user clicks "Turn on Camera")
  document.getElementById('enable-camera').addEventListener('click', () => {
    Video.createLocalVideoTrack({ name: 'camera', width: 1280 }).then(videoTrack => {
      return localParticipant.publishTrack(videoTrack, { priority: 'high' });
    }).then(publication => {
      console.log(`Published "${publication.trackName}" with priority "${publication.priority}"`);
      // publication.trackSid is now set by the server
    }).catch(err => console.error('Failed to publish video:', err));
  });
});
```

### Response
#### Success Response
- **Promise<LocalTrackPublication>** - A Promise that resolves with the `LocalTrackPublication` object.
```

--------------------------------

### Import twilio-video.js with TypeScript Definitions

Source: https://github.com/twilio/twilio-video.js/blob/master/README.md

Import the entire twilio-video.js library along with its TypeScript definitions. This allows for type checking and autocompletion.

```typescript
import * as Video from 'twilio-video';

function participantDisconnected(participant: Video.RemoteParticipant) {
  console.log('Participant "%s" disconnected', participant.identity);
  document.getElementById(participant.sid).remove();
}
```

--------------------------------

### Load and Verify Twilio Video.js with RequireJS

Source: https://github.com/twilio/twilio-video.js/blob/master/test/umd/require-browser/min.html

This snippet loads the minified Twilio Video.js library using RequireJS and checks if all expected public variables are present. It's useful for verifying the library's integrity after loading in a browser.

```javascript
var publicVars = [
  'connect',
  'createLocalAudioTrack',
  'createLocalTracks',
  'createLocalVideoTrack',
  'isSupported',
  'LocalAudioTrack',
  'LocalDataTrack',
  'LocalVideoTrack',
  'Logger'
];
require(['../../../../dist/twilio-video.min'], function(video) {
  try {
    if (typeof video !== 'undefined' && publicVars.every(function(publicVar) { return publicVar in video; })) {
      console.log({ status: 'success', version: video.version });
    } else {
      console.log({ status: 'failure', reason: 'Video undefined' });
    }
  } catch(e) {
    console.log({ status: 'failure', reason: e.message || e });
  }
});
```

--------------------------------

### Video.connect(token, options)

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Connects to a Twilio Video Room using a Twilio Access Token. It automatically acquires local audio and video tracks by default and returns a promise that resolves with the Room object upon successful connection.

```APIDOC
## Video.connect(token, options) — Connect to a Room

Connects to a Twilio Video Room using a Twilio Access Token. By default, it automatically acquires a `LocalAudioTrack` and `LocalVideoTrack` using `getUserMedia`. Returns a `CancelablePromise<Room>` that resolves when the connection is established.

### Method
POST

### Endpoint
/connect

### Parameters
#### Path Parameters
- **token** (string) - Required - The Twilio Access Token for authentication.

#### Query Parameters
- **options** (object) - Optional - Configuration options for the connection.
  - **name** (string) - The name of the room.
  - **audio** (boolean | object) - Whether to acquire an audio track. If an object, specifies track options.
  - **video** (boolean | object) - Whether to acquire a video track. If an object, specifies track options.
  - **dominantSpeaker** (boolean) - Enables dominant speaker detection.
  - **networkQuality** (object) - Configuration for network quality monitoring.
    - **local** (number) - Local network quality level.
    - **remote** (number) - Remote network quality level.
  - **preferredVideoCodecs** (array) - An array of preferred video codecs.
    - **codec** (string) - The video codec (e.g., 'VP8').
    - **simulcast** (boolean) - Whether to enable simulcast.
  - **maxVideoBitrate** (number) - The maximum video bitrate in bits per second.
  - **bandwidthProfile** (object) - Configuration for bandwidth management.
    - **video** (object) - Video bandwidth settings.
      - **mode** (string) - The bandwidth mode ('collaboration' or 'presentation').
      - **clientTrackSwitchOffControl** (string) - Control for client-side track switching.
      - **contentPreferencesMode** (string) - Mode for content preferences.
  - **tracks** (array) - An array of pre-acquired local tracks.

### Request Example
```javascript
const Video = require('twilio-video');

Video.connect('YOUR_ACCESS_TOKEN', {
  name: 'my-room',
  audio: true,
  video: { width: 720 },
  dominantSpeaker: true,
  networkQuality: { local: 1, remote: 2 },
  preferredVideoCodecs: [{ codec: 'VP8', simulcast: true }],
  maxVideoBitrate: 2400000,
  bandwidthProfile: {
    video: {
      mode: 'collaboration',
      clientTrackSwitchOffControl: 'auto',
      contentPreferencesMode: 'auto'
    }
  }
}).then(room => {
  console.log(`Connected to Room "${room.name}" (SID: ${room.sid})
`);
  // ... handle room events and participants
}).catch(error => {
  console.error('Could not connect:', error.message, error.code);
});
```

### Response
#### Success Response (200)
- **Room** (object) - An object representing the connected room.
  - **sid** (string) - The unique identifier for the room.
  - **name** (string) - The name of the room.
  - **participants** (array) - An array of connected participants.

#### Response Example
```json
{
  "sid": "RMxxx",
  "name": "my-room",
  "participants": []
}
```
```

--------------------------------

### room.localParticipant.setParameters(encodingParameters)

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Dynamically adjusts outgoing audio and video bitrate limits for the LocalParticipant without reconnecting to the Room.

```APIDOC
## `room.localParticipant.setParameters(encodingParameters)` — Set Bitrate Limits

Dynamically adjusts outgoing audio and video bitrate limits for the `LocalParticipant` without reconnecting to the Room.

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- **encodingParameters** (`Object` or `null`) - Optional - An object containing bitrate limits, or `null` to remove all limits.
  - **maxAudioBitrate** (`Number`) - Optional - The maximum audio bitrate in bits per second.
  - **maxVideoBitrate** (`Number`) - Optional - The maximum video bitrate in bits per second.

### Request Example
```javascript
Video.connect('YOUR_ACCESS_TOKEN', { name: 'my-room' }).then(room => {
  const { localParticipant } = room;

  // Set aggressive bitrate limits (e.g., user reports poor network)
  localParticipant.setParameters({
    maxAudioBitrate: 16000,   // 16 kbps
    maxVideoBitrate: 800000   // 800 kbps
  });

  // Remove bitrate limits
  localParticipant.setParameters(null);

  // Restore only video limit
  localParticipant.setParameters({ maxVideoBitrate: 2400000 });
});
```

### Response
#### Success Response
- None (This method does not return a value upon success.)
```

--------------------------------

### Video.Logger

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Access and configure the internal SDK logger. This allows for custom log handlers, log forwarding, and dynamic verbosity changes without needing to reconnect.

```APIDOC
## `Video.Logger` — Access and Configure the Internal SDK Logger

Provides access to the SDK's internal `loglevel` logger instance, allowing custom log handlers, log forwarding, and dynamic verbosity changes without reconnecting.

```js
const { Logger, connect } = require('twilio-video');

const logger = Logger.getLogger('twilio-video');

// Intercept all SDK logs and forward to a monitoring service
const originalFactory = logger.methodFactory;
logger.methodFactory = function(methodName, logLevel, loggerName) {
  const original = originalFactory(methodName, logLevel, loggerName);
  return function(datetime, level, component, message, data) {
    original(datetime, level, component, message, data);
    // Forward errors to your backend
    if (methodName === 'error' || methodName === 'warn') {
      sendToMonitoring({ datetime, level, component, message, data });
    }
  };
};
logger.setLevel('debug'); // 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent'

// Check SDK version and browser support
const { isSupported, version } = require('twilio-video');
console.log(`twilio-video v${version}, supported: ${isSupported}`);

connect('YOUR_ACCESS_TOKEN', { name: 'my-room' }).then(room => {
  console.log('Connected, check console for debug logs');
});
```
```

--------------------------------

### Manual Bandwidth Control for Remote Video Tracks

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Manually control which remote video tracks are rendered and at what resolution when `contentPreferencesMode` or `clientTrackSwitchOffControl` is set to 'manual'. This allows applications to override SDK logic for bandwidth optimization. Use `switchOff()` to stop rendering and `switchOn()` to resume, optionally specifying desired `renderDimensions`.

```javascript
Video.connect('YOUR_ACCESS_TOKEN', {
  name: 'my-room',
  bandwidthProfile: {
    video: {
      mode: 'presentation',
      clientTrackSwitchOffControl: 'manual',
      contentPreferencesMode: 'manual',
      maxSubscriptionBitrate: 4000000
    }
  }
}).then(room => {
  room.on('trackSubscribed', (track, publication, participant) => {
    if (track.kind !== 'video') return;

    // Manually turn off a track that is off-screen
    track.switchOff();

    // Turn it on when it becomes visible in the UI
    document.getElementById(`show-${participant.sid}`).addEventListener('click', () => {
      track.switchOn();
      // Tell the SDK what resolution you need (affects bandwidth allocation)
      track.setContentPreferences({ renderDimensions: { width: 1280, height: 720 } });
    });

    document.getElementById(`hide-${participant.sid}`).addEventListener('click', () => {
      track.switchOff();
    });
  });

  // Listen for server-side switch-off events (bandwidth pressure)
  room.on('trackSwitchedOff', (track, publication, participant) => {
    console.log(`Track ${publication.trackName} from ${participant.identity} was switched off`);
    document.getElementById(`video-${participant.sid}`).classList.add('paused');
  });

  room.on('trackSwitchedOn', (track, publication, participant) => {
    document.getElementById(`video-${participant.sid}`).classList.remove('paused');
  });
});
```

--------------------------------

### Include Twilio Video.js via CDN

Source: https://github.com/twilio/twilio-video.js/blob/master/README.md

Include this script tag in your HTML to load the Twilio Video.js SDK directly from a CDN.

```html
<script src="//sdk.twilio.com/js/video/releases/2.35.0/twilio-video.min.js"></script>
```

--------------------------------

### Load Twilio Video.js with UMD and Require

Source: https://github.com/twilio/twilio-video.js/blob/master/test/umd/require-browser/index.html

Use this snippet to load the Twilio Video.js library in a browser using UMD and require.js. It checks for the existence of the library and its public variables.

```javascript
var publicVars = [
  'connect',
  'createLocalAudioTrack',
  'createLocalTracks',
  'createLocalVideoTrack',
  'isSupported',
  'LocalAudioTrack',
  'LocalDataTrack',
  'LocalVideoTrack',
  'Logger'
];
require(['../../../../dist/twilio-video'], function(video) {
  try {
    if (typeof video !== 'undefined' && publicVars.every(function(publicVar) {
        return publicVar in video;
      })) {
      console.log({ status: 'success', version: video.version });
    } else {
      console.log({ status: 'failure', reason: 'Video undefined' });
    }
  } catch(e) {
    console.log({ status: 'failure', reason: e.message || e });
  }
});
```

--------------------------------

### RemoteVideoTrack setContentPreferences() / switchOff() / switchOn()

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Manual Bandwidth Control. When bandwidth settings are configured for manual control, the application can directly manage which remote video tracks are rendered and at what resolution, overriding the SDK's automatic logic.

```APIDOC
## `RemoteVideoTrack.setContentPreferences(hints)` / `switchOff()` / `switchOn()` — Manual Bandwidth Control

When `bandwidthProfile.video.contentPreferencesMode` is `"manual"` or `clientTrackSwitchOffControl` is `"manual"`, the application can directly control which remote video tracks are rendered and at what resolution, overriding the SDK's automatic visibility-based logic.

```js
Video.connect('YOUR_ACCESS_TOKEN', {
  name: 'my-room',
  bandwidthProfile: {
    video: {
      mode: 'presentation',
      clientTrackSwitchOffControl: 'manual',
      contentPreferencesMode: 'manual',
      maxSubscriptionBitrate: 4000000
    }
  }
}).then(room => {
  room.on('trackSubscribed', (track, publication, participant) => {
    if (track.kind !== 'video') return;

    // Manually turn off a track that is off-screen
    track.switchOff();

    // Turn it on when it becomes visible in the UI
    document.getElementById(`show-${participant.sid}`).addEventListener('click', () => {
      track.switchOn();
      // Tell the SDK what resolution you need (affects bandwidth allocation)
      track.setContentPreferences({ renderDimensions: { width: 1280, height: 720 } });
    });

    document.getElementById(`hide-${participant.sid}`).addEventListener('click', () => {
      track.switchOff();
    });
  });

  // Listen for server-side switch-off events (bandwidth pressure)
  room.on('trackSwitchedOff', (track, publication, participant) => {
    console.log(`Track ${publication.trackName} from ${participant.identity} was switched off`);
    document.getElementById(`video-${participant.sid}`).classList.add('paused');
  });

  room.on('trackSwitchedOn', (track, publication, participant) => {
    document.getElementById(`video-${participant.sid}`).classList.remove('paused');
  });
});
```
```

--------------------------------

### Use 2D Transform to Mirror Video Track

Source: https://github.com/twilio/twilio-video.js/blob/master/COMMON_ISSUES.md

To mirror a local video track, use a 2D transform like 'transform: scaleX(-1)' instead of a 3D transform to avoid visibility issues.

```css
transform: scaleX(-1)
```

--------------------------------

### Configure Integration Test Execution

Source: https://github.com/twilio/twilio-video.js/blob/master/README.md

Optional environment variables to control integration test execution, such as topology, debugging, and test file selection.

```bash
TOPOLOGY=<peer-to-peer|group>
DEBUG=1
TEST_FILES=<path_ to_the_file>
```

--------------------------------

### Attach and Detach Media Tracks to DOM Elements

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Render audio and video tracks to the DOM using `attach()` and `detach()`. `attach()` can create a new element or append to an existing one, while `detach()` removes tracks from all attached elements. This is useful for dynamically managing media streams in the UI.

```javascript
// Render a remote track into a specific container element
room.on('trackSubscribed', (track, publication, participant) => {
  if (track.kind === 'audio' || track.kind === 'video') {
    // Attach to an existing element
    const container = document.getElementById(`participant-${participant.sid}`);
    if (track.kind === 'video') {
      const videoEl = document.createElement('video');
      videoEl.style.width = '100%';
      track.attach(videoEl);
      container.appendChild(videoEl);
    } else {
      // Attach audio (creates a hidden <audio> element)
      container.appendChild(track.attach());
    }
  }
});

room.on('trackUnsubscribed', track => {
  // Remove all DOM elements this track was attached to
  track.detach().forEach(el => el.remove());
});

// Disable/enable a local track without unpublishing
room.on('participantConnected', () => {
  const videoPublication = room.localParticipant.videoTracks.values().next().value;
  if (videoPublication) {
    videoPublication.track.disable(); // sends black frames
    videoPublication.track.enable();  // resumes camera
  }
});
```

--------------------------------

### Configure twilio-video.js Logger

Source: https://context7.com/twilio/twilio-video.js/llms.txt

Access and configure the SDK's internal logger to customize log handlers, forward logs, or change verbosity dynamically. Ensure the 'twilio-video' logger is retrieved before setting its level or modifying its factory.

```javascript
const { Logger, connect } = require('twilio-video');

const logger = Logger.getLogger('twilio-video');

// Intercept all SDK logs and forward to a monitoring service
const originalFactory = logger.methodFactory;
logger.methodFactory = function(methodName, logLevel, loggerName) {
  const original = originalFactory(methodName, logLevel, loggerName);
  return function(datetime, level, component, message, data) {
    original(datetime, level, component, message, data);
    // Forward errors to your backend
    if (methodName === 'error' || methodName === 'warn') {
      sendToMonitoring({ datetime, level, component, message, data });
    }
  };
};
logger.setLevel('debug'); // 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'silent'

// Check SDK version and browser support
const { isSupported, version } = require('twilio-video');
console.log(`twilio-video v${version}, supported: ${isSupported}`);

connect('YOUR_ACCESS_TOKEN', { name: 'my-room' }).then(room => {
  console.log('Connected, check console for debug logs');
});
```