Web

// npm
npm install twilio-video --save

// npm
npm install trtc-sdk-v5 --save

// yarn
yarn add trtc-sdk-v5

import * as TwilioVideo from 'twilio-video';

import TRTC from 'trtc-sdk-v5'

// Twilio Video does not require explicit SDK instance creation
// Connect to the room directly via the connect() static method
// Optional: Set log level
TwilioVideo.Logger.setLevel('debug');

const trtc = TRTC.create();

// When a remote user joins the room...
twilioRoom.on('participantConnected', participant => {
    console.log(`Remote participant ${participant.identity} has connected.`);
});

// When a remote user leaves the room...
twilioRoom.on('participantDisconnected', participant => {
    console.log(`Remote participant ${participant.identity} has disconnected.`);
});

// When a remote user joins the room...
trtc.on(TRTC.EVENT.REMOTE_USER_ENTER, event => {
    console.log(`Remote user ${event.userId} has joined the room.`);
});

// When a remote user leaves the room...
trtc.on(TRTC.EVENT.REMOTE_USER_EXIT, event => {
    console.log(`Remote user ${event.userId} has left the room.`);
});

// Your Twilio access token
const accessToken = 'your_twilio_access_token';

// Options for joining the room
const connectOptions = {
    name: 'my_twilio_room'
};

const twilioRoom = await TwilioVideo.connect(accessToken, connectOptions);

// Create and publish local video track
const localVideoTrack = await twilioVideo.createLocalVideoTrack();
twilioRoom.localParticipant.publishTrack(localVideoTrack);

// Render video preview in the browser
const localVideoContainer = document.getElementById('local-video-container');
const localVideoElement = localVideoTrack.attach();
localMediaContainer!.appendChild(localVideoElement);

// Create and publish local audio track
const localAudioTrack = await twilioVideo.createLocalAudioTrack();
twilioRoom.localParticipant.publishTrack(localAudioTrack);

// Add audio track to the web page
const localAudioElement = localAudioTrack.attach();
document.body.appendChild(localAudioElement);

// Local video stream
// Get available camera devices
const cameraList = await TRTC.getCameraList();

// Publish video from the first available camera
if (cameraList[0]) {
    await trtc.startLocalVideo({
        view: document.getElementById('local-video-container'),
        options: { cameraId: cameraList[0].deviceId }
    });
}

// Stop publishing local video stream
await trtc.stopLocalVideo();

// Local audio stream
// Get available microphone devices
const microphoneList = await TRTC.getMicrophoneList();

// Publish audio from the first available microphone
if (microphoneList[0]) {
    await trtc.startLocalAudio({
        options: { microphoneId: microphoneList[0].deviceId }
    });
}

// Stop publishing local audio stream
await trtc.stopLocalAudio();

// When a remote user joins the room...
twilioRoom.on('participantConnected', participant => {
    console.log(`Participant ${participant.sid} has joined the room.`);
    
    const remoteContainer = document.createElement('div');
    remoteContainer.id = `remote-container-${participant.sid}`;
    
    // When remote user starts publishing streams, add tracks
    participant.on('trackSubscribed', track => {
      remoteContainer.appendChild(track.attach());
    });
    
    participant.tracks.forEach(publication => {
      if (publication.isSubscribed) {
        remoteContainer.appendChild(publication.track.attach());
      }
    });
    
    // When remote user stops publishing streams, remove tracks
    participant.on('trackUnsubscribed', track => {
      track.detach().forEach(element => element.remove());
    });
    
    document.body.appendChild(remoteContainer);
});

twilioRoom.on('participantDisconnected', participant => {
    console.log(`Participant ${participant.sid} has left the room.`);
    document.getElementById(`remote-container-${participant.sid}`).remove();
});

// Set up event listeners before calling trtc.enterRoom():

// When a remote user publishes video...
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
    const remoteContainerId = `${userId}_${streamType}`;
    const remoteContainer = document.createElement('div');
    remoteContainer.id = remoteContainerId;
    document.body.appendChild(remoteContainer);

    // Play the remote video stream
    trtc.startRemoteVideo({ userId, streamType, view: remoteContainerId });
});

// When a remote user stops publishing video...
trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, event => {
  // The SDK automatically stops playback; no manual action required.
});

// Manually stop playback of a remote user's video stream
trtc.stopRemoteVideo({ userId: 'some_remote_user' });

// By default, remote audio streams are automatically played. To block playback, see Step 10 and call muteRemoteAudio(userId, true).

localVideoTrack.disable();    // Pause publishing local video stream
localVideoTrack.enable();     // Resume publishing local video stream

localAudioTrack.disable();    // Pause publishing local audio stream
localAudioTrack.enable();     // Resume publishing local audio stream

await trtc.updateLocalVideo({ mute: true });    // Pause publishing local video stream
await trtc.updateLocalVideo({ mute: false });   // Resume publishing local video stream

await trtc.updateLocalAudio({ mute: true });    // Pause publishing local audio stream
await trtc.updateLocalAudio({ mute: false });   // Resume publishing local audio stream

// Twilio Video SDK does not provide a direct API to mute RemoteAudioTrack or RemoteVideoTrack
// You can manually remove the corresponding render node at the HTML level to achieve the same effect

// Using detach()
const audioElement = remoteAudioTrack.attach();
remoteAudioTrack.detach(audioElement);

await trtc.muteRemoteAudio('some_user_id', true);          // Mute remote audio stream
await trtc.muteRemoteAudio('some_user_id', false);         // Resume remote audio stream

await trtc.callExperimentalAPI('pauseRemotePlayer', { userId: 'some_user_id' });    // Pause remote video stream
await trtc.callExperimentalAPI('resumeRemotePlayer', { userId: 'some_user_id' });   // Resume remote video stream

twilioRoom.disconnect()

// Leave the room only
await trtc.exitRoom();

// End all RTC operations, destroy the TRTC instance, and release resources
await trtc.destroy();

// Twilio Video SDK does not directly provide an API for screen sharing
// Use navigator.mediaDevices.getDisplayMedia() and convert the stream to LocalVideoTrack

navigator.mediaDevices.getDisplayMedia().then(stream => {
    return new TwilioVideo.LocalVideoTrack(stream.getVideoTracks()[0]);
});

// For more implementations, see:
// https://github.com/twilio/video-quickstart-js/blob/master/examples/screenshare/src/helpers.js
// https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getDisplayMedia

// Local: After calling trtc.enterRoom()

// Enable local screen sharing
await trtc.startScreenShare();

// Disable local screen sharing
await trtc.stopScreenShare();

// Remote: Register event before calling trtc.enterRoom()

// Pull remote screen sharing stream
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
  if (streamType === TRTC.TYPE.STREAM_TYPE_MAIN) {
    // Main stream: user's camera video
    trtc.startRemoteVideo({ userId, streamType,  view: `${userId}_main` });
  } else {
    // Sub stream: user's screen sharing
    trtc.startRemoteVideo({ userId, streamType, view: `${userId}_screen` });
  }
})

trtc.enterRoom(roomConfig);

// Twilio Video SDK does not provide direct APIs for encoding configuration
// Use browser MediaTrackConstraints when calling connect()

const videoEncodingProfile = {
    width: 1280,
    height: 720,
    frameRate: 24
};

const audioEncodingProfile = {
    sampleRate: 16000
};

await TwilioVideo.connect(token, {
    video: videoEncodingProfile,
    audio: audioEncodingProfile
});

// For more implementations, see:
// https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints

// Local: After calling trtc.enterRoom()

// Predefined video encoding profile
const videoEncodingProfile1 = {
    option: {
      profile: '1080p'  // 1920x1080, 15fps, 2000kbps
    }
}

// Custom configuration
const videoEncodingProfile2 = {
    option: {
      profile: {
        width: 1920, 
        height: 1080, 
        frameRate: 15,
        bitrate: 2200 
      }
    }
}

await trtc.startLocalVideo(videoEncodingProfile1);

// Dynamically adjust with updateLocalVideo
await trtc.updateLocalVideo(videoEncodingProfile2);

// Local audio uplink configuration
await trtc.startLocalAudio({ option: { profile: TRTC.TYPE.AUDIO_PROFILE_STANDARD }});

// Twilio Video SDK uses the networkQuality parameter in connect() to set report granularity
await TwilioVideo.connect(token, {
    networkQuality: {
      local: 1,  // Minimal, only reports local participant's quality
      remote: 1  // Minimal, reports remote participants' quality
    }
});

// Local: Register event before calling trtc.enterRoom()

trtc.on(TRTC.EVENT.NETWORK_QUALITY, event => {
   console.log(`network-quality, uplinkNetworkQuality:${event.uplinkNetworkQuality}, downlinkNetworkQuality:${event.downlinkNetworkQuality}`)
   console.log(`uplink RTT:${event.uplinkRTT} loss:${event.uplinkLoss}`)
   console.log(`downlink RTT:${event.downlinkRTT} loss:${event.downlinkLoss}`)
})

// Twilio Video's LocalTrack supports passing an existing MediaStreamTrack for custom capture

const customStream = await someCustomCapture(); // e.g. canvas.captureStream(), WebCodecs …
const customMSTrack = customStream.getVideoTracks()[0]; // or getAudioTracks()[0]
const customTwilioTrack = new TwilioVideo.LocalVideoTrack(customMSTrack, { name: 'my_custom_track' });

const room = await TwilioVideo.connect(token, {
  tracks: [ customTwilioTrack /* or customMsTrack */ ],
});

// For more implementations, see:
// https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack

// Local: After calling trtc.enterRoom()

const customStream = await someCustomCapture(); // e.g. canvas.captureStream(), WebCodecs …
const customVideoMSTrack = customStream.getVideoTracks()[0];
const customAudioMSTrack = customStream.getAudioTracks()[0];


// Custom video capture
await trtc.startLocalVideo({ option: { videoTrack: customVideoMSTrack }});

// Custom audio capture
await trtc.startLocalAudio({ option: { audioTrack: customAudioMSTrack }});

// Twilio Video uses LocalDataTrack objects for data channels and custom message transmission

const dataTrack = new TwilioVideo.LocalDataTrack();

const room = await TwilioVideo.connect(token, {
  name: 'my_room',
  tracks: [dataTrack /* and other tracks */ ]
});

// Send message locally
dataTrack.send('Hello!');

// Remote participants detect track type via track.kind, receive messages via track.on('message')
participant.on('trackSubscribed', track => {
  console.log(`Participant "${participant.identity}" added ${track.kind} Track ${track.sid}`);
  
  if (track.kind === 'data') {
    track.on('message', data => {
      console.log(data);
    });
  }
});

// For more implementations, see:
// https://www.twilio.com/docs/video/using-datatrack-api

// Local: After calling trtc.enterRoom()

// Send custom message
trtc.sendCustomMessage({
  cmdId: 1,
  data: new TextEncoder().encode('Hello!').buffer  // Max 1KB per message
});

// Receive custom message via CUSTOM_MESSAGE event
trtc.on(TRTC.EVENT.CUSTOM_MESSAGE, event => {
   // event.userId: sender's userId
   // event.cmdId: custom message Id
   // event.seq: message sequence number
   // event.data: message content (ArrayBuffer)
   console.log(`
     received custom msg from ${event.userId},
     message: ${new TextDecoder().decode(event.data)}
   `);
});

// Send SEI message
// Enable SEI functionality when creating the instance
const trtc = TRTC.create({ enableSEI: true });

// Local: After enterRoom() and startLocalVideo(), send SEI message
try {
    const unit8Array = new Uint8Array([1, 2, 3]);
    trtc.sendSEIMessage(unit8Array.buffer);
    // Message queued, waiting for next video frame.
} catch(error) {
    console.error(error);
}

// Receive SEI message via SEI_MESSAGE event
trtc.on(TRTC.EVENT.SEI_MESSAGE, event => 
    console.log(`
      received SEI message from ${event.userId},
      message: ${event.data}
    `);
)