trtc-cloud-js-sdk 1.0.13 → 2.0.0

package/examples/apiExample/src/page/basic/video-call-init/index.js

@@ -0,0 +1,382 @@
+/* eslint-disable no-unused-vars */
+import React, { useState, useEffect } from 'react';
+import { Button } from '@material-ui/core';
+import './index.scss';
+import BasicInfoComponent from '../../../components/BasicInfoComponent';
+import TRTC_Cloud from 'trtc-cloud-js-sdk';
+// import TRTC_Cloud, { TRTCAppScene, TRTCParams, TRTCVideoStreamType } from 'trtc-cloud';
+import genTestUserSig from '../../../config/gen-test-user-sig';
+import { validParams, getUrlParam } from '../../../utils/utils';
+const trtcCloud = TRTC_Cloud.getTRTCShareInstance();
+let preRemoteUserIdList = [];
+
+export default function VideoCall() {
+  const [userId, setUserId] = useState(getUrlParam('userId') ? getUrlParam('userId') : 'TRTCCloud_' + parseInt(Math.random() * 100000));
+  const [roomId, setRoomId] = useState(getUrlParam('roomId') ? getUrlParam('roomId') : parseInt(Math.random() * 100000) + '');
+  const [remoteUserIdList, setRemoteUserIdList] = useState([]);
+  const [isMuteAllRemoteAudio, setIsMuteAllRemoteAudio] = useState(false);
+  const [isStopRemote, setIsStopRemote] = useState(false);
+  const [cameraList, setCameraList] = useState([]);
+  const [micList, setMicList] = useState([]);
+  const [speakerList, setSpeakerList] = useState([]);
+  let info = {};
+  let sdkAppId = 0 || info.sdkAppId;
+  let userSignature = '';
+  let shareUserId = 'share_' + userId;
+  let shareUserSig = '';
+  const LOG_PREFIX = '[Video Call]';
+
+  useEffect(() => {
+    console.warn(`${LOG_PREFIX} TRTC version:`, trtcCloud.getSDKVersion());
+    subscribeEvents();
+
+    async function getDeviceList() {
+      const tempCameraList = await trtcCloud.getCameraDevicesList();
+      const tempMicList = await trtcCloud.getMicDevicesList();
+      const tempSpeakerList = await trtcCloud.getSpeakerDevicesList();
+      console.warn('==== camera list = ', tempCameraList);
+      console.warn('==== mic list = ', tempMicList);
+      console.warn('==== speaker list = ', tempSpeakerList);
+
+      setCameraList(tempCameraList);
+      setMicList(tempMicList);
+      setSpeakerList(tempSpeakerList);
+    }
+    getDeviceList();
+  }, []);
+
+  useEffect(() => {
+    try {
+      remoteUserIdList.forEach(async (userId) => {
+        const domElement = document.getElementById(userId);
+        await trtcCloud.startRemoteView(userId, domElement, TRTCVideoStreamType.TRTCVideoStreamTypeBig);
+      });
+    } catch (error) {
+      console.error(`${LOG_PREFIX} remoteUserIdList useEffect error: ${JSON.stringify(error)}`);
+    }
+  }, [remoteUserIdList]);
+
+  // 进房
+  const enterRoom = async () => {
+    const trtcParams = new TRTCParams();
+    trtcParams.userId = userId;
+    trtcParams.sdkAppId = sdkAppId;
+    trtcParams.userSig = userSignature;
+    trtcParams.roomId = +roomId;
+    await trtcCloud.enterRoom(trtcParams, TRTCAppScene.TRTCAppSceneVideoCall);
+  };
+  // 退房
+  const exitRoom = async () => {
+    setRemoteUserIdList([]);
+    preRemoteUserIdList = [];
+    await stopLocalPreview();
+    await stopLocalAudio();
+    await trtcCloud.exitRoom();
+    unsubscribeEvents();
+  };
+  // input 输入框内容改变处理
+  const handleInputChange = (event, type) => {
+    if (type === 'USERID') {
+      setUserId(event.target.value);
+    }
+    if (type === 'ROOMID') {
+      setRoomId(event.target.value);
+    }
+  };
+  const handleStart = () => {
+    info = genTestUserSig(userId);
+    sdkAppId = info.sdkAppId;
+    userSignature = info.userSig;
+    shareUserSig = genTestUserSig(shareUserId).userSig;
+    if (!validParams(userId, +roomId, sdkAppId, userSignature)) {
+      return;
+    }
+    enterRoom();
+  };
+  const handleStop = () => exitRoom();
+  // 打开本地视频
+  const startLocalPreview = async () => {
+    try {
+      const localVideoWrapper = document.getElementById('localVideoWrapper');
+      await trtcCloud.startLocalPreview('localVideoWrapper');
+      console.warn('startLocalPreview 预览 ---> ');
+    } catch (error) {
+      console.warn('startLocalPreview error ---> ', error);
+    }
+  };
+  // 关闭本地视频
+  const stopLocalPreview = () => trtcCloud.stopLocalPreview();
+  // mute/unmute video 操作
+  const muteVideo = (mute) => {
+    console.warn(`${LOG_PREFIX} local video mute state = ${mute}`);
+    trtcCloud.muteLocalVideo(mute);
+  };
+  // 开启本地音频
+  const startLocalAudio = async () => await trtcCloud.startLocalAudio();
+  // 关闭本地音频
+  const stopLocalAudio = async () => await trtcCloud.stopLocalAudio();
+  // 静音掉远端所有用户 audio
+  const muteAllRemoteAudio = async () => {
+    trtcCloud.muteAllRemoteAudio();
+    setIsMuteAllRemoteAudio(!isMuteAllRemoteAudio);
+  };
+  // 打开音量回调，这用可从 onUserVoiceVolume 事件中获取相应用户的音量
+  const handleEnableAudioVolumeEvaluation = async () => {
+    await trtcCloud.enableAudioVolumeEvaluation(500);
+  };
+  // 关闭音量回调
+  const handleDisableAudioVolumeEvaluation = async () => {
+    await trtcCloud.enableAudioVolumeEvaluation(-1);
+  };
+  // 切换设备
+  const handleChangeDevice = async (e, type) => {
+    const deviceId = e.target.value;
+    console.warn(' select device id: ', deviceId);
+    if (type === 'CAMERA') {
+      await trtcCloud.setCurrentCameraDevice(deviceId);
+    } else if (type === 'MIC') {
+      let currentMicDevice = trtcCloud.getCurrentMicDevice();
+      console.warn(`${LOG_PREFIX} current Mic deviceId before :`, currentMicDevice);
+
+      await trtcCloud.setCurrentMicDevice(deviceId);
+
+      currentMicDevice = trtcCloud.getCurrentMicDevice();
+      console.warn(`${LOG_PREFIX} current Mic deviceId after :`, currentMicDevice);
+    } else if (type === 'SPEAKER') {
+      await trtcCloud.setCurrentSpeakerDevice(deviceId);
+      console.warn('---- 切换 speaker ');
+    }
+  };
+  // 开始屏幕分享
+  const handleStartScreenShare = async () => {
+    const options = { shareUserId, shareUserSig };
+    console.warn(' 屏幕分享 = ', options);
+    await trtcCloud.startScreenShare(options);
+  };
+  // 停止屏幕分享
+  const handleStopScreenShare = async () => {
+    await trtcCloud.stopScreenShare();
+  };
+
+  // 操作第一个远端用户
+  const operateFirstRemote = async () => {
+    if (isStopRemote) {
+      const userId = remoteUserIdList[0];
+      const domElement = document.getElementById(userId);
+      await trtcCloud.startRemoteView(userId, domElement, TRTCVideoStreamType.TRTCVideoStreamTypeBig);
+    } else {
+      trtcCloud.stopRemoteView(remoteUserIdList[0], TRTCVideoStreamType.TRTCVideoStreamTypeBig);
+    }
+    setIsStopRemote(!isStopRemote);
+  };
+
+  // ============================【所有需要监听事件的回调】============================
+  // 错误回调
+  const onError = (errCode, errMsg) => {
+    console.warn(`${LOG_PREFIX} onError: errCode: ${errCode}, errMsg: ${errMsg}`);
+  };
+  // 进房回调
+  const onEnterRoom = (elapsed) => {
+    if (elapsed > 0) {
+      console.warn(`${LOG_PREFIX} onEnterRoom: elapsed: ${elapsed}`);
+    } else {
+      console.warn(`${LOG_PREFIX} onEnterRoom failed: elapsed: ${elapsed}`);
+    }
+  };
+  // 退房回调
+  const onExitRoom = (reason) => {
+    console.warn(`${LOG_PREFIX} onExitRoom: reason: ${reason}`);
+  };
+  // 远端用户进房事件
+  const onRemoteUserEnterRoom = (userId) => {
+    console.warn(`${LOG_PREFIX} onRemoteUserEnterRoom: userId: ${userId}`);
+  };
+  // 远端用户退房事件
+  const onRemoteUserLeaveRoom = (userId, reason) => {
+    console.warn(`${LOG_PREFIX} onRemoteUserLeaveRoom: userId: ${userId}, ${reason}`);
+  };
+  // 远端用户 video 可用事件
+  const onUserVideoAvailable = (userId, available) => {
+    console.warn(`${LOG_PREFIX} onUserVideoAvailable: userId: ${userId}, available: ${available}`);
+    if (available) {
+      if (preRemoteUserIdList.indexOf(userId) === -1) {
+        preRemoteUserIdList = [...preRemoteUserIdList, userId];
+      }
+    } else {
+      preRemoteUserIdList = preRemoteUserIdList.filter((str) => str !== userId);
+    }
+    setRemoteUserIdList(preRemoteUserIdList);
+  };
+  // 开启音量大小回调
+  const handleUserVoiceVolume = (userVolumes, userVolumesCount) => {
+    console.warn(`${LOG_PREFIX} onUserVoiceVolume result = `, userVolumes, userVolumesCount);
+  };
+  // audio available
+  const handleUserAudioAvailable = (userId, available) => {
+    console.warn(`${LOG_PREFIX} onUserAudioAvailable: userId: ${userId}, available: ${available}`);
+  };
+  // 远端屏幕分享流 onUserSubStreamAvailable 事件
+  const handleUserSubStreamAvailable = (userId, available) => {
+    console.warn('【1】onUserSubStreamAvailable ', userId, available);
+    if (available) {
+      trtcCloud.startRemoteView(userId, document.getElementById('remote-screen-share-container'), TRTCVideoStreamType.TRTCVideoStreamTypeSub);
+    }
+  };
+  // 网络质量统计数据事件
+  const handleOnNetworkQuality = (localQuality) => {
+    // console.warn(`${LOG_PREFIX} onNetworkQuality: `, localQuality);
+  };
+  // 设备变化：设备切换、设备插拔 事件
+  const handleOnDeviceChange = (deviceId, type, state) => {
+    console.warn(`${LOG_PREFIX} onDeviceChange: `, deviceId, type, state);
+  };
+  // 注册所有的事件监听
+  const subscribeEvents = () => {
+    trtcCloud.on('onError', onError);
+    trtcCloud.on('onEnterRoom', onEnterRoom);
+    trtcCloud.on('onExitRoom', onExitRoom);
+    trtcCloud.on('onRemoteUserEnterRoom', onRemoteUserEnterRoom);
+    trtcCloud.on('onRemoteUserLeaveRoom', onRemoteUserLeaveRoom);
+    trtcCloud.on('onUserVideoAvailable', onUserVideoAvailable);
+    trtcCloud.on('onUserAudioAvailable', handleUserAudioAvailable);
+    trtcCloud.on('onUserVoiceVolume', handleUserVoiceVolume);
+    trtcCloud.on('onUserSubStreamAvailable', handleUserSubStreamAvailable);
+    trtcCloud.on('onNetworkQuality', handleOnNetworkQuality);
+    trtcCloud.on('onDeviceChange', handleOnDeviceChange);
+  };
+  // 注销所有的事件监听
+  const unsubscribeEvents = () => {
+    // trtcCloud.off('*');
+    trtcCloud.off('onError', onError);
+    trtcCloud.off('onEnterRoom', onEnterRoom);
+    trtcCloud.off('onExitRoom', onExitRoom);
+    trtcCloud.off('onRemoteUserEnterRoom', onRemoteUserEnterRoom);
+    trtcCloud.off('onRemoteUserLeaveRoom', onRemoteUserLeaveRoom);
+    trtcCloud.off('onUserVideoAvailable', onUserVideoAvailable);
+    trtcCloud.off('onUserAudioAvailable', handleUserAudioAvailable);
+    trtcCloud.off('onUserVoiceVolume', handleUserVoiceVolume);
+    trtcCloud.off('onUserSubStreamAvailable', handleUserSubStreamAvailable);
+    trtcCloud.off('onNetworkQuality', handleOnNetworkQuality);
+    trtcCloud.off('onDeviceChange', handleOnDeviceChange);
+  };
+
+  return (
+    <div className="content-container">
+      <div className="operate-container">
+        <BasicInfoComponent userId={userId} roomId={roomId} handleInputChange={handleInputChange} handleStart={handleStart} handleStop={handleStop}></BasicInfoComponent>
+        {/* 摄像头选择 */}
+        <div className="select-container">
+          <label htmlFor="camera-select" className="select-item-label">
+            摄像头：
+          </label>
+          <select id="camera-select" className="select-item" onChange={(e) => handleChangeDevice(e, 'CAMERA')}>
+            {cameraList.map((obj, idx) => (
+              <option key={obj.deviceId} value={obj.deviceId}>
+                {obj.deviceName}
+              </option>
+            ))}
+          </select>
+        </div>
+        {/* 麦克风选择 */}
+        <div className="select-container">
+          <label htmlFor="mic-select" className="select-item-label">
+            麦克风：
+          </label>
+          <select id="mic-select" className="select-item" onChange={(e) => handleChangeDevice(e, 'MIC')}>
+            {micList.map((obj, idx) => (
+              <option key={obj.deviceId} value={obj.deviceId}>
+                {obj.deviceName}
+              </option>
+            ))}
+          </select>
+        </div>
+        {/* Speaker */}
+        <div className="select-container">
+          <label htmlFor="speaker-select" className="select-item-label">
+            外放：
+          </label>
+          <select id="speaker-select" className="select-item" onChange={(e) => handleChangeDevice(e, 'SPEAKER')}>
+            {speakerList.map((obj, idx) => (
+              <option key={obj.deviceId} value={obj.deviceId}>
+                {obj.deviceName}
+              </option>
+            ))}
+          </select>
+        </div>
+        {/* 额外操作 */}
+        <div className="external-operate-container">
+          <div className="btn-operate-group">
+            <Button variant="contained" color="primary" onClick={() => startLocalPreview()}>
+              打开视频
+            </Button>
+            <Button variant="contained" color="primary" onClick={() => stopLocalPreview()}>
+              关闭视频
+            </Button>
+          </div>
+          <div className="btn-operate-group">
+            <Button variant="contained" color="primary" onClick={() => muteVideo(true)}>
+              Mute 视频
+            </Button>
+            <Button variant="contained" color="primary" onClick={() => muteVideo(false)}>
+              UnMute 视频
+            </Button>
+          </div>
+          <div className="btn-operate-group">
+            <Button variant="contained" color="primary" onClick={() => startLocalAudio()}>
+              打开音频
+            </Button>
+            <Button variant="contained" color="primary" onClick={() => stopLocalAudio()}>
+              关闭音频
+            </Button>
+          </div>
+          <div className="btn-operate-group">
+            <Button variant="contained" color="primary" onClick={() => handleEnableAudioVolumeEvaluation()}>
+              开启音量回调
+            </Button>
+            <Button variant="contained" color="primary" onClick={() => handleDisableAudioVolumeEvaluation()}>
+              关闭音量回调
+            </Button>
+          </div>
+          <div className="btn-operate-group">
+            <Button variant="contained" color="primary" onClick={() => handleStartScreenShare()}>
+              开启屏幕分享
+            </Button>
+            <Button variant="contained" color="primary" onClick={() => handleStopScreenShare()}>
+              关闭屏幕分享
+            </Button>
+          </div>
+          {/* <Button variant="contained" color="primary" onClick={() => operateFirstRemote()} style={{ marginTop: '8px' }}>
+            {isStopRemote ? 'start' : 'stop'}第一个远端用户
+          </Button> */}
+          {/*
+            <Button variant="contained" color="primary" onClick={() => disableAudioVolumeEvaluation()} style={{ marginTop: '8px' }}>关闭音量采集</Button>
+            <Button variant="contained" color="primary" onClick={() => muteAllRemoteAudio()} style={{ marginTop: '8px' }}>{isMuteAllRemoteAudio ? '开启' : '关闭'}远端所有音频</Button> */}
+        </div>
+      </div>
+
+      <div className="video-view-preview">
+        <div className="video-wrapper local-user">
+          <div className="user-desc">
+            <span className="user-type">本地用户</span>
+            <span className="user-role" id="localUserRole"></span>
+          </div>
+          <div id="localVideoWrapper"></div>
+        </div>
+        <div className="video-wrapper remote-user">
+          <div className="user-desc">
+            <span className="user-type">远程用户</span>
+            <span className="user-role" id="remoteUserRole"></span>
+          </div>
+          <div className="video-wrapper-container">
+            <div className="remoteVideoWrapper" id="remote-screen-share-container">
+              <div className="remote-share-text">远端屏幕分享</div>
+            </div>
+            {remoteUserIdList.map((userId, index) => (
+              <div id={userId} key={userId + '_' + index} className="remoteVideoWrapper"></div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/examples/apiExample/src/page/basic/video-call-init/index.scss

@@ -0,0 +1,93 @@
+.content-container {
+  display: flex;
+  .operate-container {
+    display: flex;
+    flex-direction: column;
+    width: 330px;
+    .external-operate-container {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      .btn-operate-group {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 6px;
+      }
+    }
+    .select-container {
+      display: flex;
+      margin-top: 8px;
+      .select-item-label {
+        flex: 1;
+      }
+      .select-item {
+        height: 28px;
+        width: 200px;
+      }
+    }
+  }
+  .video-view-preview {
+    margin-left: 12px;
+  }
+}
+.video-view-preview {
+  /* padding: 1rem 2rem; */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.video-wrapper {
+  flex: 0 0 auto;
+  padding: 0 0.5rem;
+}
+
+.user-desc {
+  margin: 0.5rem 0rem;
+}
+.user-type {
+font-weight: bold;
+}
+.video-wrapper-container {
+  display: flex;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+#localVideoWrapper,
+.remoteVideoWrapper {
+  position: relative;
+  width: 320px;
+  height: 184px;
+  box-shadow: 2px 2px 18px 4px #c0c0c0;
+  background-color: lightblue;
+  margin-right: 20px;
+  border-radius: 8px;
+}
+.remote-share-text {
+  position: absolute;
+  background-color: white;
+  color: black;
+  opacity: 0.7;
+  border-radius: 6px;
+  bottom: 0rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0rem 0.5rem;
+  z-index: 100;
+}
+
+.local-statistic,
+.remote-statistic {
+  margin-top: 1rem;
+}
+
+.config-form {
+  margin: 1rem 0;
+}
+
+.form-line {
+  padding: 0.5rem 0.25rem;
+}
+
+

package/examples/apiExample/src/page/basic/video-live/index.css

@@ -0,0 +1,37 @@
+.video-view-preview {
+    /* padding: 1rem 2rem; */
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+}
+
+.video-wrapper {
+    flex: 0 0 auto;
+    padding: 0 0.5rem;
+}
+
+.user-desc {
+    margin-bottom: 1rem;
+}
+
+#localVideoWrapper,
+#remoteVideoWrapper {
+    width: 320px;
+    height: 184px;
+    box-shadow: 2px 2px 18px 4px #c0c0c0;
+    background-color: lightblue;
+}
+
+.local-statistic,
+.remote-statistic {
+    margin-top: 1rem;
+}
+
+.config-form {
+    margin: 1rem 0;
+}
+
+.form-line {
+    padding: 0.5rem 0.25rem;
+}
+

package/examples/apiExample/src/page/basic/video-live/index.js

@@ -0,0 +1,188 @@
+/* eslint-disable no-unused-vars */
+import a18n from 'a18n';
+import React, { useState } from 'react';
+import './index.css';
+import TRTC_Cloud, {
+  TRTCAppScene,
+  TRTCParams,
+  TRTCVideoStreamType,
+  TRTCRoleType,
+} from 'trtc-cloud-js-sdk';
+import genTestUserSig from '../../../config/gen-test-user-sig';
+import { validParams } from '../../../utils/utils';
+import BasicInfoComponent from '../../../components/BasicInfoComponent';
+
+function VideoCall(props) {
+  const [userId, setUserId] = useState('test');
+  const [roomId, setRoomId] = useState(14432);
+  let info = {};
+  let sdkAppId = 0 || info.sdkAppId;
+  let userSignature = '';
+  const LOG_PREFIX = '[Video Live]';
+  const trtc = new TRTC_Cloud();
+  console.log(`${LOG_PREFIX} TRTC version:`, trtc.getSDKVersion());
+
+  function onEnterRoom(elapsed) {
+    console.info(`${LOG_PREFIX} onEnterRoom: elapsed: ${elapsed}`);
+  }
+
+  function onExitRoom(reason) {
+    console.info(`${LOG_PREFIX} onExitRoom: reason: ${reason}`);
+  }
+
+  function onError(errCode, errMsg) {
+    console.info(`${LOG_PREFIX} onError: errCode: ${errCode}, errMsg: ${errMsg}`);
+  }
+
+  const anchorSet = new Set();
+  function onRemoteUserEnterRoom(userId) {
+    console.info(`${LOG_PREFIX} onRemoteUserEnterRoom: userId: ${userId}`);
+    anchorSet.add(userId);
+  }
+
+  function onRemoteUserLeaveRoom(userId, reason) {
+    console.info(`${LOG_PREFIX} onRemoteUserLeaveRoom: userId: ${userId}, ${reason}`);
+    anchorSet.delete(userId);
+  }
+
+  function onUserVideoAvailable(userId, available) {
+    console.info(`${LOG_PREFIX} onUserVideoAvailable: userId: ${userId}, available: ${available}`);
+    if (available) {
+      const remoteVideoWrapper = document.getElementById('remoteVideoWrapper');
+      trtc.startRemoteView(userId, remoteVideoWrapper, TRTCVideoStreamType.TRTCVideoStreamTypeBig);
+
+      const remoteUserRoleHTML = document.getElementById('remoteUserRole');
+      if (anchorSet.has(userId)) {
+        remoteUserRoleHTML && (remoteUserRoleHTML.innerText = ` - ${a18n('主播')}`);
+      }
+    } else {
+      const remoteUserRoleHTML = document.getElementById('remoteUserRole');
+      remoteUserRoleHTML && (remoteUserRoleHTML.innerText = '');
+    }
+  }
+
+  function onFirstVideoFrame(userId, streamType, width, height) {
+    console.info(`${LOG_PREFIX} onFirstVideoFrame: userId: ${userId} streamType: ${streamType} width: ${width} height: ${height}`);
+    if (userId) {
+      // 远程用户(remote user)
+    } else {
+      // 本地用户(local user)
+    }
+  }
+  function handleOnSwitchRole(code, message) {
+    console.warn('--- code ', code, message);
+  }
+
+  const subscribeEvents = () => {
+    trtc.on('onError', onError);
+    trtc.on('onEnterRoom', onEnterRoom);
+    trtc.on('onExitRoom', onExitRoom);
+    trtc.on('onRemoteUserEnterRoom', onRemoteUserEnterRoom);
+    trtc.on('onRemoteUserLeaveRoom', onRemoteUserLeaveRoom);
+    trtc.on('onUserVideoAvailable', onUserVideoAvailable);
+    trtc.on('onFirstVideoFrame', onFirstVideoFrame);
+    trtc.on('onSwitchRole', handleOnSwitchRole);
+  };
+
+  const unsubscribeEvents = () => {
+    trtc.off('onError', onError);
+    trtc.off('onEnterRoom', onEnterRoom);
+    trtc.off('onExitRoom', onExitRoom);
+    trtc.off('onRemoteUserEnterRoom', onRemoteUserEnterRoom);
+    trtc.off('onRemoteUserLeaveRoom', onRemoteUserLeaveRoom);
+    trtc.off('onUserVideoAvailable', onUserVideoAvailable);
+    trtc.off('onFirstVideoFrame', onFirstVideoFrame);
+    trtc.off('onSwitchRole', handleOnSwitchRole);
+  };
+
+  function enterRoom() {
+    const localVideoWrapper = document.getElementById('localVideoWrapper');
+    trtc.startLocalPreview(localVideoWrapper);
+
+    trtc.startLocalAudio();
+
+    const trtcParams = new TRTCParams();
+    trtcParams.userId = userId;
+    trtcParams.sdkAppId = sdkAppId;
+    trtcParams.userSig = userSignature;
+    trtcParams.roomId = roomId;
+    // trtcParams.role = TRTCRoleType.TRTCRoleAudience; // default role is 'TRTCRoleType.TRTCRoleAnchor'
+    trtcParams.role = parseInt(document.forms.roleSelectForm.roleType.value, 10);
+
+    trtc.enterRoom(trtcParams, TRTCAppScene.TRTCAppSceneLIVE);
+
+    const localUserRoleHTML = document.getElementById('localUserRole');
+    localUserRoleHTML.innerText = ` - ${trtcParams.role === TRTCRoleType.TRTCRoleAudience ? a18n('观众(音视频不上传)') : a18n('主播')}`;
+  }
+
+  function exitRoom() {
+    trtc.stopLocalPreview();
+    trtc.stopLocalAudio();
+    trtc.exitRoom();
+  }
+
+  const handleInputChange = (event, type) => {
+    if (type === 'USERID') {
+      setUserId(event.target.value);
+    }
+    if (type === 'ROOMID') {
+      setRoomId(event.target.value);
+    }
+  };
+  const handleStart = () => {
+    info = genTestUserSig(userId);
+    sdkAppId = info.sdkAppId;
+    userSignature = info.userSig;
+
+    if (!validParams(userId, roomId, sdkAppId, userSignature)) {
+      return;
+    }
+
+    subscribeEvents();
+    enterRoom();
+  };
+  const handleStop = () => {
+    exitRoom();
+  };
+  // 角色切换
+  const handleRadioChange = (e, value) => {
+    trtc.switchRole(12);
+  };
+
+  return (
+    <div className="basic-scene basic-video-live">
+      <form name="roleSelectForm" className="role-select-form">
+        <span>{a18n('选择角色：')}</span>
+        <input type="radio" id="roleTypeAnchor" name="roleType" value={TRTCRoleType.TRTCRoleAnchor} defaultChecked onChange={e => handleRadioChange(e, TRTCRoleType.TRTCRoleAnchor)} /><label htmlFor="roleTypeAnchor">{a18n('主播')}</label>
+        <input type="radio" id="roleTypeAudience" name="roleType" value={TRTCRoleType.TRTCRoleAudience} onChange={e => handleRadioChange(e, TRTCRoleType.TRTCRoleAudience)} /><label htmlFor="roleTypeAudience">{a18n('观众')}</label>
+      </form>
+
+      <BasicInfoComponent
+        userId={userId}
+        roomId={roomId}
+        handleInputChange={handleInputChange}
+        handleStart={handleStart}
+        handleStop={handleStop}
+      ></BasicInfoComponent>
+
+      <div className="video-view-preview">
+        <div className="video-wrapper local-user">
+          <div className="user-desc">
+            <span className="user-type">{a18n('本地用户')}</span>
+            <span className="user-role" id="localUserRole"></span>
+          </div>
+          <div id="localVideoWrapper"></div>
+        </div>
+        <div className="video-wrapper remote-user">
+          <div className="user-desc">
+            <span className="user-type">{a18n('远程用户')}</span>
+            <span className="user-role" id="remoteUserRole"></span>
+          </div>
+          <div id="remoteVideoWrapper"></div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default VideoCall;