trtc-cloud-js-sdk 1.0.13 → 2.0.0

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

@@ -0,0 +1,262 @@
+/* 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

@@ -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;
+}
+
+