trtc-cloud-js-sdk 1.0.13 → 2.0.0

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

@@ -0,0 +1,521 @@
+/* eslint-disable no-unused-vars */
+import React, { useState, useEffect } from 'react';
+import { Button, Switch, FormControlLabel } from '@material-ui/core';
+import './index.scss';
+import BasicInfoComponent from '../../../components/BasicInfoComponent';
+import TRTC_Cloud, { TRTCAppScene, TRTCParams, TRTCVideoStreamType, TRTCVideoResolution, TRTCRoleType, TRTCVideoMirrorType, TRTCDeviceType, TRTCDeviceState } from 'trtc-cloud-js-sdk';
+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 [sceneList] = useState([{
+    scene: TRTCAppScene.TRTCAppSceneVideoCall,
+    name: '实时通话模式',
+  }, {
+    scene: TRTCAppScene.TRTCAppSceneLIVE,
+    name: '互动直播模式',
+  }
+  ]);
+  const [currentScene, setCurrentScene] = useState(TRTCAppScene.TRTCAppSceneVideoCall);
+  const [role, setRole] = useState(TRTCRoleType.TRTCRoleAnchor);
+  const [cameraList, setCameraList] = useState([]);
+  const [micList, setMicList] = useState([]);
+  const [speakerList, setSpeakerList] = useState([]);
+  // 按钮状态控制
+  const [isJoined,setIsJoined] = useState(false);
+  const [isLocalVideo, setIsLocalVideo] = useState(false);
+  const [isMuteVideo, setIsMuteVideo] = useState(false);
+  const [isLocalAudio, setIsLocalAudio] = useState(false);
+  const [isScreeShare, setIsScreeShare] = useState(false);
+  const [isEnableAudioVolume, setIsEnableAudioVolume] = useState(false);
+  // 
+  let info = {};
+  let sdkAppId = 0 || info.sdkAppId;
+  let userSignature = '';
+  let shareUserId = 'share_' + userId;
+  let shareUserSig = '';
+  const LOG_PREFIX = '【Video Call Demo】';
+
+  useEffect(() => {
+    console.warn(`${LOG_PREFIX} TRTC version:`, trtcCloud.getSDKVersion());
+    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 () => {
+    subscribeEvents();
+    const trtcParams = new TRTCParams();
+    trtcParams.userId = userId;
+    trtcParams.sdkAppId = sdkAppId;
+    trtcParams.userSig = userSignature;
+    trtcParams.roomId = +roomId;
+    trtcParams.role = role;
+    console.warn(`${LOG_PREFIX} enterRoom params: ${JSON.stringify(trtcParams)}, scene: ${currentScene}`);
+    trtcCloud.enterRoom(trtcParams, currentScene);
+  };
+  // 退房
+  const exitRoom = async () => {
+    try {
+      setRemoteUserIdList([]);
+      preRemoteUserIdList = [];
+      stopLocalPreview();
+      stopLocalAudio();
+      trtcCloud.exitRoom();
+      unsubscribeEvents();
+    } catch (error) {
+      console.error(`${LOG_PREFIX} exitRoom error: ${JSON.stringify(error)}`);
+    }
+  };
+  // 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();
+    setIsJoined(true);
+  };
+  const handleStop = () => {
+    exitRoom();
+    setIsJoined(false);
+  }
+  // 打开本地视频
+  const startLocalPreview = async () => {
+    await trtcCloud.setLocalRenderParams({
+      mirrorType: TRTCVideoMirrorType.TRTCVideoMirrorType_Auto,
+    });
+    const localVideoWrapper = document.getElementById('localVideoWrapper');
+    await trtcCloud.startLocalPreview(true, localVideoWrapper);
+  };
+  const startLocalPreview2 = async () => {
+    const localVideoWrapper = document.getElementById('localVideoWrapper2');
+    await trtcCloud.updateLocalView(localVideoWrapper);
+  };
+  const switchCamera = async () => {
+    const isFront = trtcCloud.isFrontCamera();
+    await trtcCloud.switchCamera(!isFront);
+  };
+  // 关闭本地视频
+  const stopLocalPreview = () => {
+    console.warn(`${LOG_PREFIX} stopLocalPreview`);
+    try {
+      trtcCloud.stopLocalPreview();
+      setIsLocalVideo(false);
+    } catch (error) {
+      console.error(`${LOG_PREFIX} stopLocalPreview error: ${JSON.stringify(error)}`);
+    }
+  }
+  // mute/unmute video 操作
+  const muteVideo = (mute) => {
+    console.warn(`${LOG_PREFIX} local video mute state = ${mute}`);
+    trtcCloud.muteLocalVideo(mute);
+    setIsMuteVideo(mute);
+  };
+  // 开启本地音频
+  const startLocalAudio = async () => {
+    trtcCloud.startLocalAudio();
+    setIsLocalAudio(true);
+  }
+  // 关闭本地音频
+  const stopLocalAudio = async () => {
+    trtcCloud.stopLocalAudio();
+    setIsLocalAudio(false);
+  }
+  // 静音掉远端所有用户 audio
+  const muteAllRemoteAudio = async () => {
+    trtcCloud.muteAllRemoteAudio();
+    setIsMuteAllRemoteAudio(!isMuteAllRemoteAudio);
+  };
+  // 打开音量回调，这用可从 onUserVoiceVolume 事件中获取相应用户的音量
+  const handleEnableAudioVolumeEvaluation = async () => {
+    await trtcCloud.enableAudioVolumeEvaluation(500);
+    setIsEnableAudioVolume(true);
+  };
+  // 关闭音量回调
+  const handleDisableAudioVolumeEvaluation = async () => {
+    await trtcCloud.enableAudioVolumeEvaluation(-1);
+    setIsEnableAudioVolume(false);
+  };
+  // 切换设备
+  const handleChangeDevice = async (e, type) => {
+    const deviceId = e.target.value;
+    console.warn(' select device id: ', deviceId);
+    switch (type) {
+      case 'CAMERA': {
+        await trtcCloud.setCurrentCameraDevice(deviceId);
+        break;
+      }
+      case 'MIC': {
+        let currentMicDevice = trtcCloud.getCurrentMicDevice();
+        console.warn(`${LOG_PREFIX} current Mic deviceId before :`, currentMicDevice);
+        const result = await trtcCloud.setCurrentMicDevice(deviceId);
+        currentMicDevice = trtcCloud.getCurrentMicDevice();
+        console.warn(`${LOG_PREFIX} current Mic deviceId after, deviceId: ${JSON.stringify(currentMicDevice)}, result: ${result}`);
+        break;
+      }
+      case 'SPEAKER': {
+        const result = await trtcCloud.setCurrentSpeakerDevice(deviceId);
+        console.warn(`${LOG_PREFIX} switch speaker, deviceId: ${deviceId}, result: ${result}`);
+        break;
+      }
+      case 'SCENE': {
+        setCurrentScene(+e.target.value);
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  };
+  // 角色切换
+  const handleSwitchChange = (e, type) => {
+    switch (type) {
+      case 'ROLE': {
+        const role = e.target.checked ? TRTCRoleType.TRTCRoleAudience : TRTCRoleType.TRTCRoleAnchor;
+        setRole(role);
+        trtcCloud.switchRole(role);
+        break;
+      }
+      default: {}
+    }
+  };
+  // 开始屏幕分享
+  const handleStartScreenShare = async () => {
+    try {
+      const view = document.getElementById('remote-screen-share-container');
+      const type = TRTCVideoStreamType.TRTCVideoStreamTypeSub;
+      const params = {
+        videoResolution: TRTCVideoResolution.TRTCVideoResolution_1920_1080,
+        videoFps: 20,
+        videoBitrate: 1600,
+        screenAudio: false,
+      };
+      await trtcCloud.startScreenCapture(view, type, params);
+      setIsScreeShare(true);
+    } catch (error) {
+      setIsScreeShare(false);
+    }
+  };
+  // 停止屏幕分享
+  const handleStopScreenShare = async () => {
+    await trtcCloud.stopScreenCapture();
+    setIsScreeShare(false);
+  };
+
+  // 操作第一个远端用户
+  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, remoteQuality) => {
+    console.warn(`${LOG_PREFIX} onNetworkQuality: `, localQuality, remoteQuality);
+  };
+  // 设备变化：设备切换、设备插拔 事件
+  const handleOnDeviceChange = async (deviceId, type, state) => {
+    console.warn(`${LOG_PREFIX} onDeviceChange: `, deviceId, type, state);
+    const stateList = ['add', 'remove', 'active'];
+    if (type === TRTCDeviceType.TRTCDeviceTypeMic) {
+      console.log(`onDeviceChange: deviceId: ${deviceId}, type: microphone, state: ${stateList[state]}`);
+      const deviceList = await trtcCloud.getMicDevicesList();
+      console.error('lixin-debug getMicDevicesList', deviceList);
+      return;
+    }
+    if (type === TRTCDeviceType.TRTCDeviceTypeSpeaker) {
+      console.log(`onDeviceChange: deviceId: ${deviceId}, type: speaker, state: ${stateList[state]}`);
+      const deviceList =await trtcCloud.getSpeakerDevicesList();
+      console.error('lixin-debug getSpeakerDevicesList', deviceList);
+      return;
+    }
+    if (type === TRTCDeviceType.TRTCDeviceTypeCamera) {
+      console.log(`onDeviceChange: deviceId: ${deviceId}, type: camera, state: ${stateList[state]}`);
+      const deviceList = await trtcCloud?.getCameraDevicesList();
+      console.error('lixin-debug getCameraDevicesList', deviceList);
+    }
+  };
+  const handleOnSwitchRole = (code, message) => {
+    console.warn(`${LOG_PREFIX} onSwitchRole: `, code, message);
+  };
+  // 注册所有的事件监听
+  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);
+    trtcCloud.on('onSwitchRole', handleOnSwitchRole);
+  };
+  // 注销所有的事件监听
+  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} isJoined={isJoined} handleInputChange={handleInputChange} handleStart={handleStart} handleStop={handleStop}></BasicInfoComponent>
+        {/* 主播、观众 角色 */}
+        {!isJoined &&
+          <div className="select-container">
+            <label htmlFor="camera-select" className="select-item-label">
+              角色：
+            </label>
+            <select id="camera-select" className="select-item" onChange={(e) => handleChangeDevice(e, 'SCENE')}>
+              {sceneList.map((obj, idx) => (
+                <option key={obj.scene} value={obj.scene}>
+                  {obj.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        }
+        {(currentScene === TRTCAppScene.TRTCAppSceneLIVE && isJoined) &&
+          <div>
+            <FormControlLabel
+              control={<Switch checked={role === TRTCRoleType.TRTCRoleAnchor ? false : true} onChange={(e) => handleSwitchChange(e, 'ROLE')} name="gilad" />}
+              label="观众"
+            />
+          </div>
+        }
+        {/* 摄像头选择 */}
+        <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()} disabled={isLocalVideo}>
+              打开视频
+            </Button>
+            <Button variant="contained" color="primary" onClick={() => startLocalPreview2()}>
+              打开视频2
+            </Button>
+            <Button variant="contained" color="primary" onClick={() => switchCamera()}>
+              切换摄像头
+            </Button>
+            <Button variant="contained" color="primary" onClick={() => stopLocalPreview()} disabled={!isLocalVideo}>
+              关闭视频
+            </Button>
+          </div>
+          {isLocalVideo && <div className="btn-operate-group">
+              <Button variant="contained" color="primary" onClick={() => muteVideo(true)} disabled={isMuteVideo}>
+                Mute 视频
+              </Button>
+              <Button variant="contained" color="primary" onClick={() => muteVideo(false)} disabled={!isMuteVideo}>
+                UnMute 视频
+              </Button>
+            </div>
+          }
+          <div className="btn-operate-group">
+            <Button variant="contained" color="primary" onClick={() => startLocalAudio()} disabled={isLocalAudio}>
+              打开音频
+            </Button>
+            <Button variant="contained" color="primary" onClick={() => stopLocalAudio()} disabled={!isLocalAudio}>
+              关闭音频
+            </Button>
+          </div>
+          <div className="btn-operate-group">
+            <Button variant="contained" color="primary" onClick={() => handleEnableAudioVolumeEvaluation()} disabled={isEnableAudioVolume}>
+              开启音量回调
+            </Button>
+            <Button variant="contained" color="primary" onClick={() => handleDisableAudioVolumeEvaluation()} disabled={!isEnableAudioVolume}>
+              关闭音量回调
+            </Button>
+          </div>
+          {isJoined && <div className="btn-operate-group">
+              <Button variant="contained" color="primary" onClick={() => handleStartScreenShare()} disabled={isScreeShare}>
+                开启屏幕分享
+              </Button>
+              <Button variant="contained" color="primary" onClick={() => handleStopScreenShare()} disabled={!isScreeShare}>
+                关闭屏幕分享
+              </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 id="localVideoWrapper2" style={{ width: '400px', height: '300px', backgroundColor: '#eeeeee' }}></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/index.scss

@@ -0,0 +1,93 @@
+.content-container {
+  display: flex;
+  .operate-container {
+    display: flex;
+    flex-direction: column;
+    width: 320px;
+    .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;
+        width: 80px;
+      }
+      .select-item {
+        height: 28px;
+        width: 240px;
+      }
+    }
+  }
+  .video-view-preview {
+    margin-left: 12px;
+    /* padding: 1rem 2rem; */
+    display: flex;
+    flex: 1;
+    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;
+}
+
+