tencent cloud

// Replace Twilio Video import
import * as TwilioVideo from 'twilio-video'

var twilioVideo = TwilioVideo
var twilioRoom

twilioRoom = await twilioVideo.connect(TOKEN, { name: 'yourName', audio: false, video: false, dominantSpeaker: true

const trtc = TRTC.create();

try {
  await trtc.enterRoom({ roomId: 8888, scene:'rtc', sdkAppId, userId, userSig });
  console.log('Entered the room successfully');
} catch (error) {
  console.error('Failed to enter the room ' + error);
}

// video
let localVideoTrack = await twilioVideo.createLocalVideoTrack({
   height: { ideal: 720, min: 480, max: 1080 },
   width:  { ideal: 1280, min: 640, max: 1920 },
   aspectRatio: 16/9,
})

twilioRoom.localParticipant.publishTrack(localVideoTrack)
const localMediaContainer = document.getElementById('video-container-div')
localMediaContainer!.appendChild(localVideoTrack.attach())

// audio
let localAudioTrack = await twilioVideo.createLocalAudioTrack()

twilioRoom.localParticipant.publishTrack(localAudioTrack);
const audioElement = localAudioTrack.attach();
document.body.appendChild(audioElement);

const view = document.getElementById('localVideo');
const cameraList = await TRTC.getCameraList();
if (cameraList[0]) {
  await trtc.startLocalVideo({
    view,
    option: {
      cameraId: cameraList[0].deviceId,
    }
  });
}

// To preview the camera image, you need to place an HTMLElement in the DOM, which can be a div tag, assuming its id is local-video.
const view = 'local-video';
await trtc.startLocalVideo({ view });

await trtc.startLocalAudio();

twilioRoom.on('participantConnected', (participant) => {
   participant.on('trackSubscribed', (track) => {
       // a user turned on their video, render it
       document.getElementById('remote-video-container-div').appendChild(track.attach());
   });

   participant.on('trackUnsubscribed', (track) => {
       // a user turned off their video, stop rendering it
       var selfTwilioVideo = document.getElementById('remote-video-container-div')
       selfTwilioVideo.querySelector('video').remove()
   })
})

// Listen for the TRTC.EVENT.REMOTE_VIDEO_AVAILABLE event before entering the room to receive all remote user video publishing events. 
trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
  // To play the video image, you need to place an HTMLElement in the DOM, which can be a div tag, assuming its id is `${userId}_${streamType}`
  const view = `${userId}_${streamType}`;
  trtc.startRemoteVideo({ userId, streamType, view });
});

twilioVideo.disconnect()

await trtc.exitRoom(); 
// After the exit is successful, if you do not need to use the trtc instance later, you can call the trtc.destroy method to destroy the instance and release related resources in a timely manner. The destroyed trtc instance cannot be used again and a new instance needs to be created.
trtc.destroy();