npm install trtc-sdk-v5 --save
import TRTC from 'trtc-sdk-v5';
<script src="trtc.js"></script>
// 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();
本页内容是否解决了您的问题?