trtc-cloud-js-sdk 2.0.0 → 2.1.0

package/examples/apiExample/src/page/basic/setDevice/index.js

@@ -1,262 +0,0 @@
-/* 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 TRTCCloud, { TRTCAppScene, TRTCParams, TRTCVideoStreamType } from 'trtc-cloud-js-sdk';
-import genTestUserSig from '../../../config/gen-test-user-sig';
-import { validParams } from '../../../utils/utils';
-const trtcCloud = TRTCCloud.getTRTCShareInstance();
-let preRemoteUserIdList = [];
-
-export default function SetDevice() {
-  const [userId, setUserId] = useState('TRTCCloud_' + parseInt(Math.random() * 100000));
-  const [roomId, setRoomId] = useState(parseInt(Math.random() * 100000) + '');
-  const [remoteUserIdList, setRemoteUserIdList] = useState([]);
-  const [cameraList, setCameraList] = useState([]);
-  const [micList, setMicList] = useState([]);
-  const [speakerList, setSpeakerList] = useState([]);
-  let info = {};
-  let sdkAppId = 0 || info.sdkAppId;
-  let userSignature = '';
-  const LOG_PREFIX = '[Video Call]';
-
-  useEffect(async () => {
-    console.warn(`${LOG_PREFIX} TRTC version:`, trtcCloud.getSDKVersion());
-    subscribeEvents();
-
-    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);
-  }, []);
-
-  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);
-    await startLocalPreview();
-    await startLocalAudio();
-  };
-  // 退房
-  const exitRoom = () => {
-    setRemoteUserIdList([]);
-    preRemoteUserIdList = [];
-    stopLocalPreview();
-    stopLocalAudio();
-    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;
-    if (!validParams(userId, +roomId, sdkAppId, userSignature)) {
-      return;
-    }
-    enterRoom();
-  };
-  const handleStop = () => exitRoom();
-  // 打开本地视频
-  const startLocalPreview = async () => {
-    const localVideoWrapper = document.getElementById('localVideoWrapper');
-    await trtcCloud.startLocalPreview(localVideoWrapper);
-  };
-  // 关闭本地视频
-  const stopLocalPreview = () => trtcCloud.stopLocalPreview();
-  // 开启本地音频
-  const startLocalAudio = async () => await trtcCloud.startLocalAudio();
-  // 关闭本地音频
-  const stopLocalAudio = async () => await trtcCloud.stopLocalAudio();
-  // 切换设备
-  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 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);
-  };
-  // audio available
-  const handleUserAudioAvailable = (userId, available) => {
-    console.warn(`${LOG_PREFIX} onUserAudioAvailable: userId: ${userId}, available: ${available}`);
-  };
-  // 注册所有的事件监听
-  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);
-  };
-  // 注销所有的事件监听
-  const unsubscribeEvents = () => {
-    trtcCloud.off('onError', onError);
-    trtcCloud.off('onEnterRoom', onEnterRoom);
-    trtcCloud.off('onExitRoom', onExitRoom);
-    trtcCloud.off('onRemoteUserEnterRoom', onRemoteUserEnterRoom);
-    trtcCloud.off('onRemoteUserLeaveRoom', onRemoteUserLeaveRoom);
-    trtcCloud.off('onUserVideoAvailable', onUserVideoAvailable);
-  };
-
-  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">
-          {/* <Button variant="contained" color="primary" onChange={() => operateFirstRemote()} style={{ marginTop: '8px' }}>
-            {isStopRemote ? 'start' : 'stop'}第一个远端用户
-          </Button> */}
-          {/*
-            <Button variant="contained" color="primary" onChange={() => disableAudioVolumeEvaluation()} style={{ marginTop: '8px' }}>关闭音量采集</Button>
-            <Button variant="contained" color="primary" onChange={() => 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/setDevice/index.scss

@@ -1,93 +0,0 @@
-.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;
-}
-
-