
UserSig, which ensures the secure access of Tencent RTC services. For more information about this credential and UserSig calculation, see UserSig.
npm:npm install trtc-sdk-v5 --save
import TRTC from 'trtc-sdk-v5'
<script>:<script src="/your_path/trtc.js"></script>
flutter pub add tencent_rtc_sdk
npm install trtc-react-native --save# oryarn add trtc-react-native
import TRTCCloud, { TRTCParams, TRTCCloudDef } from 'trtc-react-native'
Tencent RTC Engine Term | Agora Term | Explanation |
Room | Channel | The group that connects the RTC participants together. |
Anchor | Host | A room user type that has the streaming permission and is able to publish audio and video streams to the server. The anchor/host is also able to subscribe and play back the audio and video streams of other anchors/hosts. |
Audience | Audience | A room user type that can only subscribe to other anchors/hosts. |
// Create an Agora Web clientconst agoraWebClient = AgoraRTC.createClient({mode: "rtc",codec: "vp8"});
// Create a TRTC Web clientconst trtcWebClient = TRTC.create();
RtcEngine agoraFlutterEngine = createAgoraRtcEngine();await agoraFlutterEngine.initialize(const RtcEngineContext(appId: "<app id>"));
// Create a TRTC instanceTRTCCloud trtcFlutterEngine = await TRTCCloud.sharedInstance();
const agoraRNEngine = createAgoraRtcEngine();await agoraRNEngine.initialize({ appId: "<app id>" });
// Create a TRTC instanceconst trtcRNEngine = TRTCCloud.sharedInstance();
await agoraWebClient.join(appId, channelName, token, userId);
try {await trtcWebClient.enterRoom({// Your application's SDKAppIDsdkAppId: 12345678,userId: "<custom user id>",// User signature, generated from your appliction's SDKSecretKeyuserSig: "<user signature>",roomId: 1234});console.log('Entered the room successfully');} catch (error) {console.error('Failed to enter the room ' + error);}
await agoraFlutterEngine.joinChannel(token: "<your token>",channelId: "<channel id>",// user iduid: 0options: const ChannelMediaOptions(autoSubscribeVideo: true,autoSubscribeAudio: true,publishCameraTrack: true,publishMicrophoneTrack: true));
trtcFlutterEngine.enterRoom(TRTCParams(// Your application's SDKAppIDsdkAppId: 12345678,userId: "<custom user id>",// User signature, generated from your appliction's SDKSecretKeyuserSig: "<user signature>",roomId: 1234,// Enter the room as Anchorrole: TRTCRoleType.anchor,),TRTCAppScene.live);print("Enter the room successfully");
const token = "<your token>";const channelName = "<your channel id>";const localUserId = 0;agoraRNEngine.joinChannel(token,channelName,localUserId,{autoSubscribeVideo: true,autoSubscribeAudio: true,publishCameraTrack: true,publishMicrophoneTrack: true});
trtcRNEngine.enterRoom(new TRTCParams({// Your application's SDKAppIDsdkAppId: 12345678,userId: "<custom user id>",// User signature, generated from your appliction's SDKSecretKeyuserSig: "<user signature>",roomId: 1234}),// Enter the room in audio and video call scenariosTRTCCloudDef.TRTC_APP_SCENE_VIDEOCALL);
agoraWebClient.on("user-joined", async (user, mediaType) => {console.log("User joins the channel");});
trtcWebClient.on(TRTC.EVENT.REMOTE_USER_ENTER, event => {const userId = event.userId;console.log(User ${userId}enters the room);});
agoraFlutterEngine.registerEventHandler(RTCEngineEventHandler(onUserJoined: (RtcConnection connection, int remoteUid, int elapsed) {print("Remote user $remoteUid joined");},));
// Define a TRTCCloudListener with relative eventsTRTCCloudListener listener = TRTCCloudListener(onEnterRoom: (result) {if(result > 0) {print("Enter room success.");}},onRemoteUserEnterRoom: (userId) {print("Remote user $userId enters the room.")},onError: (errCode, errMsg) {print("Error $errCode: $errMsg");});// Register the event listener with TRTC enginetrtcFlutterEngine.registerListener(listener);
agoraRNEngine.registerEventHandler({onUserJoined: (connection, uid) {console.log(`Remote user ${uid} joins the room`);}});
const onRtcListener = useCallback((type:TRTCCloudListener, params:any) => {if (type === TRTCCloudListener.onEnterRoom) {if (params.result > 0) {console.log("Enter room success.");}} else if (type === TRTCCloudListener.onRemoteUserEnterRoom) {console.log(`Remote user ${params.userId} enters the room.`);} else if (type === TRTCCloudListener.onError) {console.error(`Error ${params.errCode}: ${params.errMsg}.`);}});trtcRNEngine.registerListener(onRtcListener);
<div class="local-video-container" width="1920" height="1080"></div>
// Capture both microphone and camera tracksconst [microphoneTrack, cameraTrack] = await agoraWebClient.createMicrophoneAndCameraTracks();// Renderconst localMediaContainer = document.getElementById('local-video-container');cameraTrack.play(localMediaContainer);// Publish microphone and camera tracksawait agoraWebClient.publish([microphoneTrack, cameraTrack]);// Unpublish tracksawait agoraWebClient.unpublish();
const view = document.getElementById('local-video-container');// Local video stream// Get the list of available camerasconst cameraList = await TRTC.getCameraList();if(cameraList[0]) {// Start collecting video// Publish the first (available) camera's video stream to the current roomawait trtcWebClient.startLocalVideo({view,options: { cameraId: cameraList[0].deviceId }});}// Unpublish and stop collecting videoawait trtcWebClient.stopLocalVideo();// Local audio stream// Get the list of available microphones.const microphoneList = await TRTC.getMicrophoneList();if(microphoneList[0]) {// Start collecting audio// Publish the first (available) microphone's audio stream to the current roomawait trtcWebClient.startLocalAudio({options: { microphoneId: microphoneList[0].deviceId }});}// Unpublish and stop collecting audioawait trtc.stopLocalAudio();
// Local video track// Display the local video by enabling the video module and starting local video previewawait agoraFlutterEngine.enableVideo();await agoraFlutterEngine.startPreview();// Render the local video via AgoraVideoView widgetWidget _localVideo() {return AgoraVideoView(controller: VideoViewController(rtcEngine: agoraFlutterEngine,canvas: const VideoCanvas(// Specify the local user iduid: 0,// Set the video rendering moderenderMode: RenderModeType.renderModeHidden)));}// Disable the video module and stop local video previewagoraFlutterEngine.disableVideo();agoraFlutterEngine.stopPreview();// Local audio track is enabled by default in Agora
// Local video streamimport 'package:tencent_rtc_sdk/trtc_cloud_video_view.dart';// Before enabling the camera preview, you can set the local video rendering parameterstrtcFlutterEngine.setLocalRenderParams(TRTCRenderParams(fillMode: TRTCVideoFillMode.fill,mirrorType: TRTCVideoMirrorType.auto,rotation: TRTCVideoRotation.rotation0));// Render the local video via TRTCCloudVideoView widgetWidget _localVideo() {return TRTCCloudVideoView(key: ValueKey(0),onViewCreated: (viewId) {// Set to 'false' if using rear camerabool useFrontCamera = true;// Start local video preview using front cameratrtcFlutterEngine.startLocalPreview(useFrontCamera, viewId);// Stop local video previewtrtcFlutterEngine.stopLocalPreview();})}// Local audio stream// Enable the audio module and start publishing local audiotrtcFlutterEngine.startLocalAudio(TRTCAudioQuality.speech);// Disable the audio module and stop publishing local audiotrtcFlutterEngine.stopLocalAudio();
<RtcSurfaceViewcanvas={{ uid: 0 }}style={ width: '90%', height: 200 }/><!-- Local audio track is enabled by default in Agora -->
import { TXVideoView } from 'trtc-react-native';
<TXVideoView.LocalViewstyle={{ width: 1080, height: 1080 }}/>
// Enable the audio module and start publishing local audiotrtcRNEngine.startLocalAudio();// Disable the audio module and stop publishing local audiotrtcRNEngine.stopLocalAudio();
<div class="remote-video-container" width="1920" height="1080"></div>
agoraWebClient.on("user-published", async (user, mediaType) => {// Initiate a subscriptionawait client.subscribe(user, mediaType);// Subscribe to an audio trackif (mediaType === "audio") {const audioTrack = user.audioTrack;// Automatically play audioaudioTrack.play();} else {const videoTrack = user.videoTrack;// Automatic video playbackvideoTrack.play('remote-video-container');}});
// Video (listen for TRTC.EVENT.REMOTE_VIDEO_AVAILABLE)trtcWebClient.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {// To play the video image, you need to place an HTMLElement in the DOM// Assume this is a <div> element and has the id of `${userId}_${streamType}`const view = `${userId}_${streamType}`;// Start rendering remote videotrtcWebClient.startRemoteVideo({ userId, streamType, view });});// Audio (listen for TRTC.EVENT.REMOTE_AUDIO_AVAILABLE)trtcWebClient.on(TRTC.EVENT.REMOTE_AUDIO_AVAILABLE, event => {// Start playing remote audiotrtcWebClient.muteRemoteAudio(event.userId, false);});
// Remote video track// Render the remote video of a joined user, also via AgoraVideoView widgetWidget _remoteVideo(remoteuid, channelid) {return AgoraVideoView(controller: VideoViewController.remote(rtcEngine: agoraFlutterEngine,canvas: const VideoCanvas(uid: remoteuid),connection: const RtcConnection(channelId: channelid)));}// Local audio track is enabled by default in Agora
// Remote video streamimport 'package:tencent_rtc_sdk/trtc_cloud_video_view.dart';// You can also set the remote video rendering parameters before renderingtrtcFlutterEngine.setRemoteRenderParams(TRTCRenderParams(fillMode: TRTCVideoFillMode.fill,mirrorType: TRTCVideoMirrorType.auto,rotation: TRTCVideoRotation.rotation0));// Render the remote video, also via TRTCCloudVideoView widgetWidget _remoteVideo(remoteuid) {return TRTCCloudVideoView(key: ValueKey(0),onViewCreated: (viewId) {// Start remote video viewtrtcFlutterEngine.startRemoteView(remoteuid,TRTCVideoStreamType.big,viewId);// Stop remote video viewtrtcFlutterEngine.stopLocalPreview(remoteuid,TRTCVideoStreamType.big,);})}// Remote audio stream// Mute/unmute a remote user's audio streambool isMuted = true;trtcFlutterEngine.muteRemoteAudio(remoteuid, isMuted);
<React.Fragment key={remoteUid}><RtcSurfaceViewcanvas={{ uid: remoteUid }}style={ width: '90%', height: 200 }/></React.Fragment>
// Mute/unmute a remote user's audio streamlet isMuted = true;trtcRNEngine.muteRemoteAudioStream(remoteuid, isMuted);
import { TXVideoView } from 'trtc-react-native';// Stop remote video playbacktrtcRNEngine.stopRemoteView(remoteuid, TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG);// Mute/unmute remote audio playbacklet isMuted = true;trtcRNEngine.muteRemoteAudio(remoteuid, isMuted);
<TXVideoView.RemoteViewuserId={remoteUserId}streamType={TRTCCloudDef.TRTC_VIDEO_STREAM_TYPE_BIG}style={{ width: 1080, height: 1080 }}/>
await agoraWebClient.leave();
await trtcWebClient.exitRoom();// Destroy the client instance and release releated resource if neededtrtcWebClient.destroy();
await agoraFlutterEngine.leaveChannel();
await trtcFlutterEngine.exitRoom();// Destroy the client instance and release releated resource if neededtrtcFlutterEngine.destroySharedInstance();
agoraRNEngine.leaveChannel();
trtcRNEngine.exitRoom();// Destroy the client instance and release releated resource if neededtrtcRNEngine.destroySharedInstance();
Feedback