fcr-ui-scene 3.3.1 → 3.4.0

package/lib/modules/setting/store.d.ts

@@ -1,6 +1,6 @@
-import { FcrAiDenoiseLevel, FcrDesktopMediaControl, FcrMonitorControl, FcrStreamControl } from 'agora-edu-core';
-import { FcrBeautyOptions } from 'agora-edu-core/lib/media-control/type';
-import { FcrPerformanceInfo } from 'agora-edu-core/lib/type';
+import { FcrAiDenoiseLevel, FcrDesktopMediaControl, FcrMonitorControl, FcrStreamControl } from 'fcr-core';
+import { FcrBeautyOptions } from 'fcr-core/lib/media-control/type';
+import { FcrPerformanceInfo } from 'fcr-core/lib/type';
 import { AgoraRtcNetworkStats } from 'agora-rte-sdk';
 import { FcrUIEventStore } from '../../common/event-store';
 import { HighlightElement } from '../../utilities/constant';
@@ -8,7 +8,7 @@ import { DEFAULT_BEAUTY_VALUE } from 'agora-ui-foundation/lib/components/local-v
 import { FcrUISceneConfig } from '../../type';
 import { VirtualBackground } from '../device-pretest/assets/virtual-backdound-resources';
 import { FcrDeviceStore } from '../../common/device-store';
-import { FcrBaseRoomControl } from 'agora-edu-core/lib/room-control/type';
+import { FcrBaseRoomControl } from 'fcr-core/lib/room-control/type';
 export interface DeviceItem {
     text: string;
     value: string;
@@ -80,18 +80,18 @@ export default class SettingStore {
         memoryOtherAppUsageRatio: number;
         memoryOtherAppUsageInKbytes: number;
     };
-    accessor localAudioStreamMap: Map<string, import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcLocalAudioStats>;
-    accessor remoteAudioStreamMap: Map<string, import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcRemoteAudioStats>;
+    accessor localAudioStreamMap: Map<string, import("agora-rte-sdk").AgoraRtcLocalAudioStats>;
+    accessor remoteAudioStreamMap: Map<string, import("agora-rte-sdk").AgoraRtcRemoteAudioStats>;
     accessor localVideoStreamMap: Map<string, import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcLocalTrackStats & {
         sendFrameRate: number;
-        dimensions: import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcDimensions;
+        dimensions: import("agora-rte-sdk").AgoraRtcDimensions;
         frameRate: number;
         bitrate: number;
     } & {
         isScreenStream: boolean;
     }>;
     accessor remoteVideoStreamMap: Map<string, import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcRemoteTrackStats & {
-        dimensions: import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcDimensions;
+        dimensions: import("agora-rte-sdk").AgoraRtcDimensions;
         frameRate: number;
     } & {
         isScreenStream: boolean;
@@ -103,28 +103,28 @@ export default class SettingStore {
     accessor getSystemInfoTimer: NodeJS.Timeout | null;
     get maxVideoSendInfo(): (import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcLocalTrackStats & {
         sendFrameRate: number;
-        dimensions: import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcDimensions;
+        dimensions: import("agora-rte-sdk").AgoraRtcDimensions;
         frameRate: number;
         bitrate: number;
     } & {
         isScreenStream: boolean;
     }) | null;
     get maxVideoReceiveInfo(): (import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcRemoteTrackStats & {
-        dimensions: import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcDimensions;
+        dimensions: import("agora-rte-sdk").AgoraRtcDimensions;
         frameRate: number;
     } & {
         isScreenStream: boolean;
     }) | null;
     get sendScreenShareInfo(): (import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcLocalTrackStats & {
         sendFrameRate: number;
-        dimensions: import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcDimensions;
+        dimensions: import("agora-rte-sdk").AgoraRtcDimensions;
         frameRate: number;
         bitrate: number;
     } & {
         isScreenStream: boolean;
     }) | null;
     get receiveScreenShareInfo(): (import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcRemoteTrackStats & {
-        dimensions: import("agora-rte-sdk/lib/core/rtc/type").AgoraRtcDimensions;
+        dimensions: import("agora-rte-sdk").AgoraRtcDimensions;
         frameRate: number;
     } & {
         isScreenStream: boolean;
@@ -153,7 +153,7 @@ export default class SettingStore {
     get currentIsMirror(): boolean;
     get microphoneDetecting(): boolean;
     get speakerDetecting(): boolean;
-    constructor({ mediaControl, config, uiEventStore, deviceStore, monitorControl, streamControl, roomControl, }: {
+    constructor({ mediaControl, config, uiEventStore, deviceStore, monitorControl, streamControl, roomControl, parameters, }: {
         mediaControl: FcrDesktopMediaControl;
         config: FcrUISceneConfig;
         uiEventStore: FcrUIEventStore;
@@ -161,12 +161,14 @@ export default class SettingStore {
         streamControl: FcrStreamControl;
         roomControl: FcrBaseRoomControl;
         deviceStore: FcrDeviceStore;
+        parameters?: Record<string, unknown>;
     });
     enableVirtualBackground(enable: boolean, source?: VirtualBackground): void;
     setEditBeautyKey(key: BeautyKey): void;
     enableBeautyEffect(enable: boolean): void;
     private _initReactions;
     private _disposeReactions;
+    private _setupAudioVolumeAnalyzerTask;
     setCameraDevice(id: string): void;
     setMicrophoneDevice(deviceId: string): void;
     stopSpeakerTest(): void;
@@ -213,3 +215,4 @@ export default class SettingStore {
     private _onAudioVolumeUpdated;
     private _preHandleSetting;
 }
+export declare const StoreContext: import("react").Context<SettingStore>;

package/lib/modules/setting/store.js

@@ -32,7 +32,7 @@ Object.defineProperty(exports, "DEFAULT_BEAUTY_VALUE", {
     return _localVideoPlayer.DEFAULT_BEAUTY_VALUE;
   }
 });
-exports["default"] = exports.DeviceSettingTab = void 0;
+exports["default"] = exports.StoreContext = exports.DeviceSettingTab = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 require("core-js/modules/es.array.concat.js");
@@ -88,7 +88,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _agoraEduCore = require("agora-edu-core");
+var _fcrCore = require("fcr-core");
 var _logger = require("agora-foundation/lib/logger");
 var _mobx = require("mobx");
 var _decorator = require("agora-foundation/lib/decorator");
@@ -96,6 +96,9 @@ var _constant = require("../../utilities/constant");
 var _localVideoPlayer = require("agora-ui-foundation/lib/components/local-video-player");
 var _schedule = require("agora-foundation/lib/schedule");
 var _config = require("./config");
+var _parameters = require("../../utilities/parameters");
+var _react = require("react");
+var _env = require("agora-foundation/lib/utilities/env");
 var _excluded = ["dialogId"];
 var _SettingStore;
 var _initProto, _init_loudestStreamVolumeLevel, _init_microphoneVolumeLevel, _init_isWifiConnected, _init_dialogConfig, _init_networkState, _init_performanceState, _init_localAudioStreamMap, _init_remoteAudioStreamMap, _init_localVideoStreamMap, _init_remoteVideoStreamMap, _init_systemMemorySize, _init_systemCpuDesc, _init_setting, _init_config, _init_getSystemInfoTimer, _setDialogConfigDecs, _setSettingDecs, _onEventDecs, _onNetworkStatsUpdatedDecs, _calculateSystemInfoDecs, _getSystemInformationDecs, _clearGetSystemInfoIntervalDecs, _closeDialogDecs, _onLocalAudioStatsUpdatedDecs, _onRemoteAudioStatsUpdatedDecs, _onLocalVideoStatsUpdatedDecs, _onRemoteVideoStatsUpdatedDecs, _onStreamsUpdatedDecs, _onStreamsRemovedDecs, _onPerformanceUpdatedDecs, _onAudioVolumeUpdatedDecs, _preHandleSettingDecs, _ref;
@@ -142,13 +145,15 @@ var _O = /*#__PURE__*/new WeakMap();
 _ref = (_setDialogConfigDecs = [_mobx.action, _mobx.action.bound], _setSettingDecs = [_mobx.action, _mobx.action.bound], _onEventDecs = [_mobx.action, _mobx.action.bound], _onNetworkStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _calculateSystemInfoDecs = [_mobx.action, _mobx.action.bound], _getSystemInformationDecs = [_mobx.action, _mobx.action.bound], _clearGetSystemInfoIntervalDecs = [_mobx.action, _mobx.action.bound], _closeDialogDecs = [_mobx.action, _mobx.action.bound], _onLocalAudioStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onRemoteAudioStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onLocalVideoStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onRemoteVideoStatsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onStreamsUpdatedDecs = [_mobx.action, _mobx.action.bound], _onStreamsRemovedDecs = [_mobx.action, _mobx.action.bound], _onPerformanceUpdatedDecs = [_mobx.action, _mobx.action.bound], _onAudioVolumeUpdatedDecs = [_mobx.action, _mobx.action.bound], _preHandleSettingDecs = [_mobx.action, _mobx.action.bound], "logger");
 var SettingStore = exports["default"] = /*#__PURE__*/function () {
   function SettingStore(_ref2) {
+    var _defaultVideoGalleryS;
     var mediaControl = _ref2.mediaControl,
       config = _ref2.config,
       uiEventStore = _ref2.uiEventStore,
       deviceStore = _ref2.deviceStore,
       monitorControl = _ref2.monitorControl,
       streamControl = _ref2.streamControl,
-      roomControl = _ref2.roomControl;
+      roomControl = _ref2.roomControl,
+      parameters = _ref2.parameters;
     (0, _classCallCheck2["default"])(this, SettingStore);
     (0, _defineProperty2["default"])(this, _ref, (_initProto(this), (0, _logger.getLogger)()));
     (0, _defineProperty2["default"])(this, "_disposers", []);
@@ -201,14 +206,28 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
     _classPrivateFieldInitSpec(this, _J, _init_remoteVideoStreamMap(this, new Map()));
     _classPrivateFieldInitSpec(this, _K, _init_systemMemorySize(this, 0));
     _classPrivateFieldInitSpec(this, _L, _init_systemCpuDesc(this, ''));
-    _classPrivateFieldInitSpec(this, _M, _init_setting(this, {
+    _classPrivateFieldInitSpec(this, _M, _init_setting(this));
+    _classPrivateFieldInitSpec(this, _N, _init_config(this, undefined));
+    _classPrivateFieldInitSpec(this, _O, _init_getSystemInfoTimer(this, null));
+    this._mediaControl = mediaControl;
+    this._monitorControl = monitorControl;
+    this._streamControl = streamControl;
+    this._roomControl = roomControl;
+    this.config = config;
+    this._uiEventStore = uiEventStore;
+    this._deviceStore = deviceStore;
+    var defaultVideoGallerySize = (0, _parameters.getDefaultVideoGallerySize)(parameters);
+    if (defaultVideoGallerySize) {
+      defaultVideoGallerySize = Math.min(Math.max(defaultVideoGallerySize, 16), 25);
+    }
+    this.setting = {
       shouldTurnOffVideo: true,
       shouldDisplayPreviewDialog: true,
       shouldHideNonVideoParticipants: false,
-      displayedMaxAttendees: 16,
+      displayedMaxAttendees: (_defaultVideoGalleryS = defaultVideoGallerySize) !== null && _defaultVideoGalleryS !== void 0 ? _defaultVideoGalleryS : 16,
       autoAdjustmentSpeakerVolume: true,
-      autoAdjustmentMicrophoneVolume: true,
-      noiseReduce: _agoraEduCore.FcrAiDenoiseLevel.AUTO,
+      autoAdjustmentMicrophoneVolume: (0, _env.isElectron)(),
+      noiseReduce: _fcrCore.FcrAiDenoiseLevel.AUTO,
       recordingPath: '',
       videoHD: true,
       videoLowLight: false,
@@ -219,16 +238,7 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
       audioStereo: false,
       audioVoiceChanger: false,
       spotlightEnabled: true
-    }));
-    _classPrivateFieldInitSpec(this, _N, _init_config(this, undefined));
-    _classPrivateFieldInitSpec(this, _O, _init_getSystemInfoTimer(this, null));
-    this._mediaControl = mediaControl;
-    this._monitorControl = monitorControl;
-    this._streamControl = streamControl;
-    this._roomControl = roomControl;
-    this.config = config;
-    this._uiEventStore = uiEventStore;
-    this._deviceStore = deviceStore;
+    };
     this._uiEventStore.addObserver({
       onEvent: this._onEvent
     });
@@ -257,6 +267,9 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
     if (this._deviceStore.cameraId) {
       this._cameraTrack = this._mediaControl.getCameraTrack(this._deviceStore.cameraId);
     }
+    if (this.dialogConfig.activeTab === DeviceSettingTab.STATE) {
+      this._setupAudioVolumeAnalyzerTask();
+    }
   }
   return (0, _createClass2["default"])(SettingStore, [{
     key: "loudestStreamVolumeLevel",
@@ -424,7 +437,7 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
       if (this.microphoneVolumeLevel === 0) {
         return '0';
       }
-      return (70 + 20 * Math.log10(this.microphoneVolumeLevel / 100)).toFixed(1);
+      return (70 + 20 * Math.log10(this.microphoneVolumeLevel / 255)).toFixed(1);
     }
   }, {
     key: "speakerVolumeDb",
@@ -432,7 +445,7 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
       if (this.loudestStreamVolumeLevel === 0) {
         return '0';
       }
-      return (70 + 20 * Math.log10(this.loudestStreamVolumeLevel / 100)).toFixed(1);
+      return (70 + 20 * Math.log10(this.loudestStreamVolumeLevel / 255)).toFixed(1);
     }
   }, {
     key: "speakerTestVolumeLevel",
@@ -576,13 +589,15 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
           _this._audioDeviceVolumeRefreshTask = undefined;
         }
         if (activeTab === DeviceSettingTab.STATE) {
-          _this._audioDeviceVolumeRefreshTask = _schedule.AgoraScheduler.shared.addIntervalTask(function () {
-            var loudestStreamVolumeLevel = Math.max.apply(Math, [0].concat((0, _toConsumableArray2["default"])(Array.from(_this._streamVolumeMap.values()))));
-            (0, _mobx.runInAction)(function () {
-              _this.loudestStreamVolumeLevel = loudestStreamVolumeLevel;
-              _this.microphoneVolumeLevel = _this._deviceStore.microphoneVolumeLevel;
-            });
-          }, _this._volumeIndicationInterval);
+          _this._setupAudioVolumeAnalyzerTask();
+        }
+      }), (0, _mobx.reaction)(function () {
+        return _this._deviceStore.microphoneEnabled;
+      }, function (microphoneEnabled) {
+        if (!microphoneEnabled) {
+          (0, _mobx.runInAction)(function () {
+            _this.microphoneVolumeLevel = 0;
+          });
         }
       }));
     }
@@ -594,6 +609,18 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
       });
       this._disposers = [];
     }
+  }, {
+    key: "_setupAudioVolumeAnalyzerTask",
+    value: function _setupAudioVolumeAnalyzerTask() {
+      var _this2 = this;
+      this._audioDeviceVolumeRefreshTask = _schedule.AgoraScheduler.shared.addIntervalTask(function () {
+        var loudestStreamVolumeLevel = Math.max.apply(Math, [0].concat((0, _toConsumableArray2["default"])(Array.from(_this2._streamVolumeMap.values()))));
+        (0, _mobx.runInAction)(function () {
+          _this2.loudestStreamVolumeLevel = loudestStreamVolumeLevel;
+          _this2.microphoneVolumeLevel = _this2._deviceStore.microphoneVolumeLevel;
+        });
+      }, this._volumeIndicationInterval);
+    }
 
     // TODO:
     // private async _initCameraDevices() {
@@ -652,12 +679,12 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "toggleLocalMirrorPreview",
     value: function toggleLocalMirrorPreview(isMirror) {
-      var _this2 = this;
+      var _this3 = this;
       if (!this._videoView4Setting || !this._deviceStore.cameraId) return;
       this.stopVideo();
       // 直接在一个loop中调用stop和start会导致glcontext无法正常释放，现象 [APAAS-7207]
       setTimeout(function () {
-        _this2.startVideo(isMirror);
+        _this3.startVideo(isMirror);
       });
 
       // set mirror for layout
@@ -669,15 +696,17 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
       var view = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this._videoView4Setting;
       if (!view) return;
       this._videoView4Setting = view;
+      this.startCameraTest();
       var cameraTrack = this._mediaControl.getCameraTrack(this._deviceStore.cameraId);
       cameraTrack.startPreview({
-        renderMode: _agoraEduCore.FcrVideoRenderMode.HIDDEN,
+        renderMode: _fcrCore.FcrVideoRenderMode.HIDDEN,
         isMirror: isMirror
       }, view);
     }
   }, {
     key: "stopVideo",
     value: function stopVideo() {
+      this.stopCameraTest();
       if (!this._videoView4Setting) return;
       var cameraTrack = this._mediaControl.getCameraTrack(this._deviceStore.cameraId);
       cameraTrack.stopPreview(this._videoView4Setting);
@@ -695,12 +724,12 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "toggleLocalMirror",
     value: function toggleLocalMirror(enable) {
-      var _this3 = this;
+      var _this4 = this;
       if (!this._videoView4Setting || !this._deviceStore.cameraId) return;
       this.stopVideo();
       // 直接在一个loop中调用stop和start会导致glcontext无法正常释放，现象 [APAAS-7207]
       setTimeout(function () {
-        _this3.startVideo(enable);
+        _this4.startVideo(enable);
       });
       this._deviceStore.toggleLocalMirror(enable);
     }
@@ -718,7 +747,7 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
     key: "_syncSystemInfo",
     value: function () {
       var _syncSystemInfo2 = (0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator["default"].mark(function _callee() {
-        var _this4 = this;
+        var _this5 = this;
         var _yield$window$runtime, isWifiConnected;
         return _regenerator["default"].wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -734,9 +763,9 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
               (0, _mobx.runInAction)(function () {
                 var cpus = window.runtime.getSystemCpuInfo();
                 var cpuInfo = cpus.length === 0 ? '' : "".concat(cpus.length, "-").concat(cpus[0].model);
-                _this4.systemCpuDesc = cpuInfo;
-                _this4.systemMemorySize = window.runtime.getSystemMemorySize() / 1024;
-                _this4.isWifiConnected = isWifiConnected;
+                _this5.systemCpuDesc = cpuInfo;
+                _this5.systemMemorySize = window.runtime.getSystemMemorySize() / 1024;
+                _this5.isWifiConnected = isWifiConnected;
 
                 // this.performanceState.cpuAppUsage = Number(cpuUsage.toFixed(2));
                 // this.performanceState.cpuOtherAppUsage = Number((totalCpuUsage - cpuUsage).toFixed(2));
@@ -857,7 +886,7 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "setSetting",
     value: function setSetting(setting) {
-      var _this5 = this;
+      var _this6 = this;
       var newSetting = this._preHandleSetting(setting);
       this.setting = _objectSpread(_objectSpread({}, this.setting), newSetting);
       if (newSetting.displayedMaxAttendees) {
@@ -867,33 +896,33 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
       }
       var settingActions = {
         autoAdjustmentMicrophoneVolume: function autoAdjustmentMicrophoneVolume(enable) {
-          return _this5.setMicrophoneVolume(enable ? 100 : _this5._deviceStore.microphoneVolume);
+          return _this6.setMicrophoneVolume(enable ? 100 : _this6._deviceStore.microphoneVolume);
         },
         // video
         videoHD: function videoHD(value) {
-          return _this5._enableVideoHd(value);
+          return _this6._enableVideoHd(value);
         },
         videoLowLight: function videoLowLight(value) {
-          return _this5._enableLowlightEnhancement(value);
+          return _this6._enableLowlightEnhancement(value);
         },
         hardwareForReception: function hardwareForReception(value) {
-          return _this5._enableHardwareForReception(value);
+          return _this6._enableHardwareForReception(value);
         },
         videoNoise: function videoNoise(value) {
-          return _this5._enableVideoDenoiser(value);
+          return _this6._enableVideoDenoiser(value);
         },
         // audio
         audioHiFi: function audioHiFi(value) {
-          return _this5._deviceStore.enableAudioHiFiMode(value);
+          return _this6._deviceStore.enableAudioHiFiMode(value);
         },
         audioEchoCancellation: function audioEchoCancellation(value) {
-          return _this5._deviceStore.enableAudioEchoCancellation(value);
+          return _this6._deviceStore.enableAudioEchoCancellation(value);
         },
         audioStereo: function audioStereo(value) {
-          return _this5._deviceStore.enableAudioStereo(value);
+          return _this6._deviceStore.enableAudioStereo(value);
         },
         noiseReduce: function noiseReduce(value) {
-          return _this5._deviceStore.setNoiseLevel(value);
+          return _this6._deviceStore.setNoiseLevel(value);
         }
       };
       for (var _i = 0, _Object$entries = Object.entries(newSetting); _i < _Object$entries.length; _i++) {
@@ -997,10 +1026,10 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
       var streamInfo = this._streamControl.getStreamByStreamId(streamId);
       if (streamInfo) {
         // console.log('onLocalVideoStatsUpdated', streamId, stats, streamInfo);
-        if (streamInfo.videoSourceState === _agoraEduCore.FcrMediaSourceState.STARTED) {
+        if (streamInfo.videoSourceState === _fcrCore.FcrMediaSourceState.OPEN) {
           this.localVideoStreamMap.set(streamId, _objectSpread(_objectSpread({}, stats), {}, {
             sendFrameRate: Math.max(0, stats.sendFrameRate),
-            isScreenStream: streamInfo.videoSourceType === _agoraEduCore.FcrVideoSourceType.SCREEN
+            isScreenStream: streamInfo.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN
           }));
         }
       }
@@ -1010,10 +1039,10 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
     value: function _onRemoteVideoStatsUpdated(roomId, streamId, stats) {
       var streamInfo = this._streamControl.getStreamByStreamId(streamId);
       // console.log('onRemoteVideoStatsUpdated', streamId, stats, streamInfo);
-      if ((streamInfo === null || streamInfo === void 0 ? void 0 : streamInfo.videoSourceState) === _agoraEduCore.FcrMediaSourceState.STARTED) {
+      if ((streamInfo === null || streamInfo === void 0 ? void 0 : streamInfo.videoSourceState) === _fcrCore.FcrMediaSourceState.OPEN) {
         this.remoteVideoStreamMap.set(streamId, _objectSpread(_objectSpread({}, stats), {}, {
           frameRate: Math.max(0, stats.frameRate),
-          isScreenStream: streamInfo.videoSourceType === _agoraEduCore.FcrVideoSourceType.SCREEN
+          isScreenStream: streamInfo.videoSourceType === _fcrCore.FcrVideoSourceType.SCREEN
         }));
       }
     }
@@ -1026,12 +1055,12 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
       try {
         for (_iterator.s(); !(_step = _iterator.n()).done;) {
           var event = _step.value;
-          if (event.modifiedStream.audioSourceState !== _agoraEduCore.FcrMediaSourceState.STARTED) {
+          if (event.modifiedStream.audioSourceState !== _fcrCore.FcrMediaSourceState.OPEN) {
             this.localAudioStreamMap["delete"](event.modifiedStream.streamId);
             this.remoteAudioStreamMap["delete"](event.modifiedStream.streamId);
             this._streamVolumeMap["delete"](event.modifiedStream.streamId);
           }
-          if (event.modifiedStream.videoSourceState !== _agoraEduCore.FcrMediaSourceState.STARTED) {
+          if (event.modifiedStream.videoSourceState !== _fcrCore.FcrMediaSourceState.OPEN) {
             this.localVideoStreamMap["delete"](event.modifiedStream.streamId);
             this.remoteVideoStreamMap["delete"](event.modifiedStream.streamId);
           }
@@ -1113,7 +1142,7 @@ var SettingStore = exports["default"] = /*#__PURE__*/function () {
   }, {
     key: "_onAudioVolumeUpdated",
     value: function _onAudioVolumeUpdated(roomId, streamId, volume) {
-      this._streamVolumeMap.set(streamId, volume);
+      this._streamVolumeMap.set(streamId, Math.floor(volume / 255 * 100));
     }
   }, {
     key: "_preHandleSetting",
@@ -1145,4 +1174,5 @@ _init_systemCpuDesc = _applyDecs$e[11];
 _init_setting = _applyDecs$e[12];
 _init_config = _applyDecs$e[13];
 _init_getSystemInfoTimer = _applyDecs$e[14];
-_initProto = _applyDecs$e[15];
+_initProto = _applyDecs$e[15];
+var StoreContext = exports.StoreContext = /*#__PURE__*/(0, _react.createContext)(null);

package/lib/modules/setting/translate-settings/translate-settings.js

@@ -23,13 +23,13 @@ var _languageSelect = require("./language-select");
 var _radio = require("agora-ui-foundation/lib/components/radio");
 require("./index.css");
 var _mobxReact = require("mobx-react");
-var _context = require("../context");
+var _store = require("../store");
 var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
 var _jsxRuntime = require("react/jsx-runtime");
 var TranslateSettings = exports.TranslateSettings = (0, _mobxReact.observer)(function () {
   var ns = (0, _useNamespace.useNamespace)('translate-settings');
   var t = (0, _i18n.useI18n)();
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     setting = _useContext.setting,
     setSetting = _useContext.setSetting;
   var languageList = (0, _react.useMemo)(function () {

package/lib/modules/setting/video-settings/video-settings-basic.js

@@ -10,7 +10,7 @@ var _i18n = require("agora-ui-foundation/lib/i18n");
 var _checkbox = require("agora-ui-foundation/lib/components/checkbox");
 var _useNamespace = require("../common/useNamespace");
 var _mobxReact = require("mobx-react");
-var _context = require("../context");
+var _store = require("../store");
 var _cameraSelect = require("../../device-pretest/settings/camera-select");
 var _constant = require("../../../utilities/constant");
 var _tooltip = require("agora-ui-foundation/lib/components/tooltip");
@@ -24,7 +24,7 @@ var VideoSettingsBasic = exports.VideoSettingsBasic = (0, _mobxReact.observer)(f
     cameraDeviceList = _ref.cameraDeviceList;
   var ns = (0, _useNamespace.useNamespace)('video-settings-basic');
   var t = (0, _i18n.useI18n)();
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     setting = _useContext.setting,
     setSetting = _useContext.setSetting,
     dialogConfig = _useContext.dialogConfig;

package/lib/modules/setting/video-settings/video-settings.js

@@ -23,10 +23,9 @@ require("agora-ui-foundation/lib/components/local-video-player/index.css");
 var _mobxReact = require("mobx-react");
 var _react = require("react");
 var _useNamespace = require("../common/useNamespace");
-var _context = require("../context");
+var _store = require("../store");
 require("./index.css");
 var _videoEffect = require("../../device-pretest/settings/video-effect");
-var _store = require("../store");
 var _localVideoPlayer = _interopRequireWildcard(require("agora-ui-foundation/lib/components/local-video-player"));
 var _virtualBackgroundSetting = require("../../device-pretest/settings/virtual-background-setting");
 var _beauty = require("../../device-pretest/settings/beauty");
@@ -44,7 +43,7 @@ var VideoSettings = exports.VideoSettings = (0, _mobxReact.observer)(function (p
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     containerDom = _useState2[0],
     setContainerDom = _useState2[1];
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     config = _useContext.config,
     toggleLocalMirror = _useContext.toggleLocalMirror,
     isLocalMirrorEnabled = _useContext.isLocalMirrorEnabled,
@@ -69,8 +68,6 @@ var VideoSettings = exports.VideoSettings = (0, _mobxReact.observer)(function (p
     cameraDeviceList = _useContext.cameraDeviceList,
     enableBeauty = _useContext.enableBeauty,
     virtualBackgroundList = _useContext.virtualBackgroundList,
-    startCameraTest = _useContext.startCameraTest,
-    stopCameraTest = _useContext.stopCameraTest,
     currentIsMirror = _useContext.currentIsMirror;
   var _useState3 = (0, _react.useState)(beautyOptions[currentBeautyKey] || _store.DEFAULT_BEAUTY_VALUE),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
@@ -86,14 +83,8 @@ var VideoSettings = exports.VideoSettings = (0, _mobxReact.observer)(function (p
       setCurrentVideoViewType(_localVideoPlayer.VideoViewType.SELFIE_VIEW);
     }
   }, [isLocalMirrorEnabled]);
-  (0, _react.useEffect)(function () {
-    startCameraTest();
-  }, [cameraDeviceId]);
   (0, _react.useEffect)(function () {
     setContainerDom(containerRef.current);
-    return function () {
-      stopCameraTest();
-    };
   }, []);
   (0, _react.useEffect)(function () {
     setCurrentEditValue(beautyOptions[currentBeautyKey] || _store.DEFAULT_BEAUTY_VALUE);

package/lib/modules/setting/view.js

@@ -15,7 +15,6 @@ var _icon = require("agora-ui-foundation/lib/components/icon");
 var _type = require("agora-ui-foundation/lib/components/icon/type");
 var _useNamespace = require("./common/useNamespace");
 var _mobxReact = require("mobx-react");
-var _context = require("./context");
 var _store = require("./store");
 require("./index.css");
 require("./state/index.css");
@@ -36,7 +35,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 // import { State } from './state';
 
 var DeviceSettingsView = exports.DeviceSettingsView = (0, _mobxReact.observer)(function () {
-  var _useContext = (0, _react.useContext)(_context.StoreContext),
+  var _useContext = (0, _react.useContext)(_store.StoreContext),
     dialogConfig = _useContext.dialogConfig,
     setDialogConfig = _useContext.setDialogConfig,
     setSettingVideoOpened = _useContext.setSettingVideoOpened;

package/lib/modules/share-screen/index.d.ts

@@ -1,4 +1,4 @@
-import { FcrDesktopMediaControl, FcrBaseRoomControl } from 'agora-edu-core';
+import { FcrDesktopMediaControl, FcrBaseRoomControl } from 'fcr-core';
 import { UIModule } from '../../base';
 import './index.css';
 import { FcrDeviceStore } from '../../common/device-store';
@@ -17,10 +17,6 @@ export declare class ShareScreenUIModule extends UIModule {
         deviceStreamStore: FcrDeviceStreamStore;
         config: FcrUISceneConfig;
     });
-    getShareState(): void;
-    startShareScreen(): void;
-    stopShareScreen(): void;
-    replaceScreen(): void;
     getComponent(): import("react/jsx-runtime").JSX.Element;
     getSelectionComponent(): import("react/jsx-runtime").JSX.Element;
     onUnload(): void;

package/lib/modules/share-screen/index.dev.js

@@ -13,8 +13,9 @@ var _deviceStreamStore = require("../../common/device-stream-store");
 var _securityStore = require("../../common/security-store");
 var _eventStore = require("../../common/event-store");
 var _dialog = require("../dialog");
-var _button = require("agora-ui-foundation/lib/components/button");
 var _deviceStore = require("../../common/device-store");
+var _roomStore = require("../../common/room-store");
+var _remoteRenderer = require("../../common/remote-renderer");
 var _jsxRuntime = require("react/jsx-runtime");
 var App = (0, _root.hot)(function () {
   return null;
@@ -33,7 +34,7 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
       case 5:
         roomControl = engine.createMainRoomControl(roomId);
         userName = 'test-user';
-        deviceStore = new _deviceStore.FcrDeviceStore(userName, engine.getDesktopMediaControl());
+        deviceStore = new _deviceStore.FcrDeviceStore(engine.getDesktopMediaControl(), new _eventStore.FcrUIEventStore());
         _context.next = 10;
         return roomControl.join({
           userRole: _type.FcrUserRole.HOST,
@@ -52,7 +53,8 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
           userControl: roomControl.getUserControl(),
           chatRoomControl: roomControl.getChatRoomControl(),
           deviceStore: deviceStore,
-          streamControl: roomControl.getStreamControl()
+          streamControl: roomControl.getStreamControl(),
+          remoteVideoRenderManager: new _remoteRenderer.FcrRemoteVideoRenderManager(roomControl.getStreamControl())
         });
         uiModule = new _.ShareScreenUIModule({
           roomControl: roomControl,
@@ -63,7 +65,8 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
             roomControl: roomControl,
             securityStore: securityStore,
             deviceStore: deviceStore,
-            uiEventStore: uiEventStore
+            uiEventStore: uiEventStore,
+            roomStore: new _roomStore.FcrRoomStore(uiEventStore, deviceStore, {}, engine)
           }),
           securityStore: securityStore,
           uiEventStore: uiEventStore,
@@ -76,18 +79,7 @@ window.__DEV_ENGINE_IS_READY__.then(/*#__PURE__*/(0, _asyncToGenerator2["default
             engine.logout();
           });
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              children: uiModule.getShareState()
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-              onClick: uiModule.replaceScreen,
-              children: "Replace"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-              onClick: uiModule.startShareScreen,
-              children: "Start"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.FcrButton, {
-              onClick: uiModule.stopShareScreen,
-              children: "Stop"
-            }), uiModule.getComponent(), dialogModule.getComponent()]
+            children: [uiModule.getComponent(), dialogModule.getComponent()]
           });
         });
         _reactDom["default"].render(/*#__PURE__*/(0, _jsxRuntime.jsx)(App, {}), document.querySelector('#root'));