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 不需要显式创建SDK实例
// 直接通过 connect() 静态方法连接房间
// 可选：设置日志级别
TwilioVideo.Logger.setLevel('debug');

const trtc = TRTC.create();

// 当远端用户进入房间...
twilioRoom.on('participantConnected', participant => {
    console.log(`Remote participant ${participant.identity} has connected.`);
});

// 当远端用户离开房间...
twilioRoom.on('participantDisconnected', participant => {
    console.log(`Remote participant ${participant.identity} has disconnected.`);
});

// 当远端用户进入房间...
trtc.on(TRTC.EVENT.REMOTE_USER_ENTER, event => {
    console.log(`Remote user ${event.userId} has joined the room.`);
});

// 当远端用户离开房间...
trtc.on(TRTC.EVENT.REMOTE_USER_EXIT, event => {
    console.log(`Remote user ${event.userId} has left the room.`);
});

// 您的Twilio鉴权凭证
const accessToken = 'your_twilio_access_token';

// 进入房间时设置的参数
const connectOptions = {
    name: 'my_twilio_room'
};

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

// 创建并发布本地视频轨道
const localVideoTrack = await twilioVideo.createLocalVideoTrack();
twilioRoom.localParticipant.publishTrack(localVideoTrack);

// 在网页上渲染视频预览
const localVideoContainer = document.getElementById('local-video-container');
const localVideoElement = localVideoTrack.attach();
localMediaContainer!.appendChild(localVideoElement);

// 创建并发布本地音频轨道
const localAudioTrack = await twilioVideo.createLocalAudioTrack();
twilioRoom.localParticipant.publishTrack(localAudioTrack);

// 在网页上添加音频轨道
const localAudioElement = localAudioTrack.attach();
document.body.appendChild(localAudioElement);

// 本地视频流
// 获取可用摄像头设备列表
const cameraList = await TRTC.getCameraList();

// 将第一个可用摄像头的视频流发布到当前房间
if(cameraList[0]) {
	await trtc.startLocalVideo({
		view: document.getElementById('local-video-container'),
		options: { cameraId: cameraList[0].deviceId }
	});
}

// 取消发布本地视频流
await trtc.stopLocalVideo();


// 本地音频流
// 获取可用麦克风设备列表
const microphoneList = await TRTC.getMicrophoneList();

 // 将第一个可用麦克风的音频流发布到当前房间
if(microphoneList[0]) {
	await trtc.startLocalAudio({
		options: { microphoneId: microphoneList[0].deviceId }
	});
}

// 取消发布本地音频流
await trtc.stopLocalAudio();

// 当远端用户进入房间...
twilioRoom.on('participantConnected', participant => {
    console.log(`Participant ${participant.sid} has joined the room.`);
    
    const remoteContainer = document.createElement('div');
    remoteContainer.id = `remote-container-${participant.sid}`;
    
    // ...并且该远端用户开始推送音视频流时，添加对应的轨道
    participant.on('trackSubscribed', track => {
      remoteContainer.appendChild(track.attach());
    });
    
    participant.tracks.forEach(publication => {
      if (publication.isSubscribed) {
        remoteContainer.appendChild(publication.track.attach());
      }
    });
    
    // 该远端用户停止推送音视频流时，移除对应的轨道
    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();
});

// 在调用trtc.enterRoom()进房前设置监听以下事件：

// 当远端用户发布视频... (需要监听TRTC.EVENT.REMOTE_VIDEO_AVAILABLE)
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);

	// 在收到该事件时, 调用startRemoteVideo()播放远端视频流
	trtc.startRemoteVideo({ userId, streamType, view: remoteContainerId });
});

// 当远端用户停止发布视频时... (需要监听TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE)
trtc.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, event => {
  // 此时 SDK 会自动停止播放，无需手动调用 stopRemoteVideo。
});

// 手动停止远端用户视频流播放
trtc.stopRemoteVideo({ userId: 'some_remote_user' });

// 默认情况下，SDK会在远端用户发布音频流时自动播放，因此您无需调用任何API来手动播放。
// 如果您需要在远端用户进房时不发布音频，请参考步骤10调用muteRemoteAudio(userId, true)。

localVideoTrack.disable();    // 暂停发布本地视频流
localVideoTrack.enable();     // 恢复发布本地视频流, 也可以通过enable(true)或enable(false)进行控制

localAudioTrack.disable();    // 暂停发布本地音频流
localAudioTrack.enable();     // 恢复发布本地音频流, 也可以通过enable(true)或enable(false)进行控制

await trtc.updateLocalVideo({ mute: true });    // 暂停发布本地视频流
await trtc.updateLocalVideo({ mute: false });   // 恢复发布本地视频流

await trtc.updateLocalAudio({ mute: true });    // 暂停发布本地音频流
await trtc.updateLocalAudio({ mute: false });   // 恢复发布本地视频流

// Twilio Video SDK没有提供直接静音RemoteAudioTrack或RemoteVideoTrack的API
// 您可以通过在HTML层面移除对应的渲染节点来实现手动取消订阅的效果

// 通过detach()实现
const audioElement = remoteAudioTrack.attach();
remoteAudioTrack.detach(audioElement);

await trtc.muteRemoteAudio('some_user_id', true);          // 静音远端音频流
await trtc.muteRemoteAudio('some_user_id', false);         // 恢复远端音频流

await trtc.callExperimentalAPI('pauseRemotePlayer', { userId: 'some_user_id' });    // 暂停远端视频流
await trtc.callExperimentalAPI('resumeRemotePlayer', { userId: 'some_user_id' });   // 恢复远端视频流

twilioRoom.disconnect()

// 仅退出房间
await trtc.exitRoom();

// 结束全部业务RTC逻辑，销毁TRTC实例，释放相关资源
await trtc.destroy();

// Twilio Video SDK没有直接调整提供屏幕分享的API
// 需要通过浏览器的navigator.mediaDevices.getDisplayMedia()
// 将屏幕分享流转化为LocalVideoTrack再进行播放

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

// 更多实现请参考
// 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

// 本地: 在调用过trtc.enterRoom()后

// 本地开启屏幕分享
await trtc.startScreenShare();

// 本地停止屏幕分享
await trtc.stopScreenShare();

// 远端: 在调用trtc.enterRoom()前注册事件

// 远端拉取屏幕分享流
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
  if (streamType === TRTC.TYPE.STREAM_TYPE_MAIN) {
    // 主流，即该用户的摄像头视频流
    trtc.startRemoteVideo({ userId, streamType,  view: `${userId}_main` });
  } else {
    // 辅流 (TRTC.TYPE.STREAM_TYPE_SUB)，即该用户的屏幕分享流
    trtc.startRemoteVideo({ userId, streamType, view: `${userId}_screen` });
  }
})

trtc.enterRoom(roomConfig);

// Twilio Video SDK没有直接提供调整音视频编码配置的API
// 需要通过浏览器自带的MediaTrackConstraints, 在进房调用connect()时配置视频分辨率与码率, 以及音频采样率等

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

const audioEncodingProfile = {
    sampleRate: 16000
};

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

// 更多实现请参考
// https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints

// 本地: 在调用过trtc.enterRoom()后

// 本地视频上行编码配置
// TRTC预定义了一套配置，每个配置对应一组推荐分辨率+帧率+码率的组合
const videoEncodingProfile1 = {
    option: {
      profile: '1080p'  // 分辨率1920*1080, 帧率15fps, 码率2000kbps    
    }
}

// TRTC同时也支持自定义配置组合
const videoEncodingProfile2 = {
    option: {
      profile: {
        width: 1920, 
        height: 1080, 
        frameRate: 15,
        bitrate: 2200 
      }
    }
}

await trtc.startLocalVideo(videoEncodingProfile1);

// 支持使用updateLocalVideo进行动态调整
await trtc.updateLocalVideo(videoEncodingProfile2);

// 本地音频上行配置
await trtc.startLocalAudio({ option: { profile: TRTC.TYPE.AUDIO_PROFILE_STANDARD }});

// Twilio Video SDK通过connect()时的可选参数networkQuality设置网络质量报告的精细度
await TwilioVideo.connect(token, {
    networkQuality: {
      local: 1  // Minimal, reporting this participant's network quality
      remote: 1 // Minimal, reporting remote paricipants' network quality
    }
});

// 本地: 在调用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的LocalTrack支持直接传入已有的MediaStreamTrack实现自定义采集

const customStream = await someCustomCapture(); // e.g. canvas.captureStream(), WebCodecs …
const customMSTrack = customStream.getVideoTracks()[0]; // 或 getAudioTracks()[0], 代表自定义采集的MediaStreamTrack
const customTwilioTrack = new TwilioVideo.LocalVideoTrack(customMSTrack, { name: 'my_custom_track' });

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

// 更多实现请参考
// https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack

// 本地: 在调用过trtc.enterRoom()后

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

// 自定义采集视频
await trtc.startLocalVideo({ option: { videoTrack: customVideoMSTrack }});

// 自定义采集音频
await trtc.startLocalAudio({ option: { audioTrack: customAudioMSTrack }});

// Twilio Video通过LocalDataTrack对象实现数据通道与自定义消息的收发

const dataTrack = new TwilioVideo.LocalDataTrack();

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

// 本地通过dataTrack发送消息
dataTrack.send('Hello!');

// 远端通过track.kind判断track类型, 并通过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);
    });
  }
});

// 更多实现请参考
// https://www.twilio.com/docs/video/using-datatrack-api

// 本地: 在调用过trtc.enterRoom()后

// 本地发送自定义消息
trtc.sendCustomMessage({
  cmdId: 1,
  data: new TextEncoder().encode('Hello!').buffer  // 一次最大发送1KB数据
});

// 远端通过CUSTOM_MESSAGE事件接收自定义消息
trtc.on(TRTC.EVENT.CUSTOM_MESSAGE, event => {
   // event.userId: 远端发消息的 userId
   // event.cmdId: 您自定义的消息 Id
   // event.seq: 消息的序号
   // event.data: 消息内容，ArrayBuffer 类型
   console.log(`
     received custom msg from ${event.userId},
     message: ${new TextDecoder().decode(event.data)}
   `);
});

// 发送SEI消息
// 实例化时需要手动开启SEI收发功能
const trtc = TRTC.create({ enableSEI: true });

// 本地: 在调用过enterRoom()与startLocalVideo()后, 发送SEI消息
try {
    const unit8Array = new Uint8Array([1, 2, 3]);
    trtc.sendSEIMessage(unit8Array.buffer);
    // 消息已通过限制，等待后续视频帧发送。
} catch(error) {
    console.error(error);
}

// 远端通过SEI_MESSAGE事件接收SEI消息
trtc.on(TRTC.EVENT.SEI_MESSAGE, event => 
    console.log(`
      received SEI message from ${event.userId},
      message: ${event.data}
    `);
})