Merge branch 'main' into dev/4.3.0

AgoraIO-Extensions · Dec 4, 2023 · d813ae6 · d813ae6
2 parents 9cb028f + d0098c1
commit d813ae6
Show file tree

Hide file tree

Showing 22 changed files with 1,000 additions and 1,717 deletions.
diff --git a/example/src/renderer/components/BaseComponent.tsx b/example/src/renderer/components/BaseComponent.tsx
@@ -190,7 +190,6 @@ export abstract class BaseComponent<
       <>
         {!!startPreview || joinChannelSuccess
           ? this.renderUser({
-              uid: 0,
               sourceType: VideoSourceType.VideoSourceCamera,
             })
           : undefined}

diff --git a/example/src/renderer/components/RtcSurfaceView/index.tsx b/example/src/renderer/components/RtcSurfaceView/index.tsx
@@ -1,10 +1,12 @@
 import {
+  AgoraEnv,
   IMediaPlayer,
   IRtcEngineEx,
   RtcConnection,
   VideoCanvas,
   VideoMirrorModeType,
   VideoSourceType,
+  VideoViewSetupMode,
   createAgoraRtcEngine,
 } from 'agora-electron-sdk';
 import React, { Component } from 'react';
@@ -23,6 +25,12 @@ interface State {
   uniqueId: number;
 }
 
+type SetupVideoFunc =
+  | typeof IRtcEngineEx.prototype.setupRemoteVideoEx
+  | typeof IRtcEngineEx.prototype.setupRemoteVideo
+  | typeof IRtcEngineEx.prototype.setupLocalVideo
+  | typeof IMediaPlayer.prototype.setView;
+
 export class RtcSurfaceView extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
@@ -43,7 +51,16 @@ export class RtcSurfaceView extends Component<Props, State> {
   };
 
   componentDidMount() {
-    this.updateRender();
+    const { canvas, connection } = this.props;
+    this.getSetupVideoFunc().call(
+      this,
+      {
+        ...canvas,
+        setupMode: VideoViewSetupMode.VideoViewSetupAdd,
+        view: this.getHTMLElement(),
+      },
+      connection!
+    );
   }
 
   shouldComponentUpdate(
@@ -59,59 +76,59 @@ export class RtcSurfaceView extends Component<Props, State> {
   }
 
   componentDidUpdate() {
-    this.updateRender();
+    this.updateRenderer();
   }
 
   componentWillUnmount() {
-    const dom = this.getHTMLElement();
+    const { canvas, connection } = this.props;
 
-    createAgoraRtcEngine().destroyRendererByView(dom);
+    this.getSetupVideoFunc().call(
+      this,
+      {
+        ...canvas,
+        setupMode: VideoViewSetupMode.VideoViewSetupRemove,
+        view: this.getHTMLElement(),
+      },
+      connection!
+    );
   }
 
-  updateRender = () => {
+  getSetupVideoFunc = (): SetupVideoFunc => {
     const { canvas, connection } = this.props;
-    const { isMirror } = this.state;
-    const dom = this.getHTMLElement();
     const engine = createAgoraRtcEngine();
 
-    let funcName:
-      | typeof IRtcEngineEx.prototype.setupRemoteVideoEx
-      | typeof IRtcEngineEx.prototype.setupRemoteVideo
-      | typeof IRtcEngineEx.prototype.setupLocalVideo
-      | typeof IMediaPlayer.prototype.setView;
+    let func: SetupVideoFunc;
 
     if (canvas.sourceType === undefined) {
       if (canvas.uid) {
-        funcName = engine.setupRemoteVideo;
+        func = engine.setupRemoteVideo;
       } else {
-        funcName = engine.setupLocalVideo;
+        func = engine.setupLocalVideo;
       }
     } else if (canvas.sourceType === VideoSourceType.VideoSourceRemote) {
-      funcName = engine.setupRemoteVideo;
+      func = engine.setupRemoteVideo;
     } else {
-      funcName = engine.setupLocalVideo;
+      func = engine.setupLocalVideo;
     }
 
-    if (funcName === engine.setupRemoteVideo && connection) {
-      funcName = engine.setupRemoteVideoEx;
+    if (func === engine.setupRemoteVideo && connection) {
+      func = engine.setupRemoteVideoEx;
     }
 
-    try {
-      engine.destroyRendererByView(dom);
-    } catch (e) {
-      console.warn(e);
-    }
-    funcName.call(
-      this,
-      {
-        ...canvas,
-        mirrorMode: isMirror
-          ? VideoMirrorModeType.VideoMirrorModeEnabled
-          : VideoMirrorModeType.VideoMirrorModeDisabled,
-        view: dom,
-      },
-      connection!
-    );
+    return func;
+  };
+
+  updateRenderer = () => {
+    const { canvas, connection } = this.props;
+    const { isMirror } = this.state;
+    AgoraEnv.AgoraRendererManager?.setRendererContext({
+      ...canvas,
+      ...connection,
+      mirrorMode: isMirror
+        ? VideoMirrorModeType.VideoMirrorModeEnabled
+        : VideoMirrorModeType.VideoMirrorModeDisabled,
+      view: this.getHTMLElement(),
+    });
   };
 
   render() {
@@ -124,7 +141,7 @@ export class RtcSurfaceView extends Component<Props, State> {
         onClick={() => {
           this.setState((preState) => {
             return { isMirror: !preState.isMirror };
-          }, this.updateRender);
+          }, this.updateRenderer);
         }}
       >
         <div

diff --git a/example/src/renderer/examples/advanced/LocalVideoTranscoder/LocalVideoTranscoder.tsx b/example/src/renderer/examples/advanced/LocalVideoTranscoder/LocalVideoTranscoder.tsx
@@ -455,15 +455,13 @@ export default class LocalVideoTranscoder
       <>
         {startLocalVideoTranscoder
           ? this.renderUser({
-              renderMode: RenderModeType.RenderModeFit,
-              uid: 0,
               sourceType: VideoSourceType.VideoSourceTranscoded,
+              renderMode: RenderModeType.RenderModeFit,
             })
           : undefined}
         {startPreview || joinChannelSuccess
           ? videoDeviceId?.map((value) =>
               this.renderUser({
-                uid: 0,
                 sourceType: this._getVideoSourceTypeCamera(value),
               })
             )
@@ -574,8 +572,9 @@ export default class LocalVideoTranscoder
         {open ? (
           <RtcSurfaceView
             canvas={{
-              mediaPlayerId: this.player?.getMediaPlayerId(),
               sourceType: VideoSourceType.VideoSourceMediaPlayer,
+              mediaPlayerId: this.player?.getMediaPlayerId(),
+              renderMode: RenderModeType.RenderModeFit,
             }}
           />
         ) : undefined}

diff --git a/example/src/renderer/examples/advanced/MediaPlayer/MediaPlayer.tsx b/example/src/renderer/examples/advanced/MediaPlayer/MediaPlayer.tsx
@@ -5,6 +5,7 @@ import {
   MediaPlayerEvent,
   MediaPlayerReason,
   MediaPlayerState,
+  RenderModeType,
   VideoSourceType,
   createAgoraRtcEngine,
 } from 'agora-electron-sdk';
@@ -351,8 +352,9 @@ export default class MediaPlayer
         {open ? (
           <RtcSurfaceView
             canvas={{
-              mediaPlayerId: this.player?.getMediaPlayerId(),
               sourceType: VideoSourceType.VideoSourceMediaPlayer,
+              mediaPlayerId: this.player?.getMediaPlayerId(),
+              renderMode: RenderModeType.RenderModeFit,
             }}
           />
         ) : undefined}

diff --git a/example/src/renderer/examples/advanced/ScreenShare/ScreenShare.tsx b/example/src/renderer/examples/advanced/ScreenShare/ScreenShare.tsx
@@ -399,7 +399,6 @@ export default class ScreenShare
         {startScreenCapture ? (
           <RtcSurfaceView
             canvas={{
-              uid: 0,
               sourceType: VideoSourceType.VideoSourceScreen,
               renderMode: RenderModeType.RenderModeFit,
             }}

diff --git a/example/src/renderer/examples/advanced/SendMultiVideoStream/SendMultiVideoStream.tsx b/example/src/renderer/examples/advanced/SendMultiVideoStream/SendMultiVideoStream.tsx
@@ -13,6 +13,7 @@ import {
   IVideoFrameObserver,
   MediaPlayerReason,
   MediaPlayerState,
+  RenderModeType,
   RtcConnection,
   UserOfflineReasonType,
   VideoFrame,
@@ -335,6 +336,7 @@ export default class SendMultiVideoStream
             canvas={{
               mediaPlayerId: this.player?.getMediaPlayerId(),
               sourceType: VideoSourceType.VideoSourceMediaPlayer,
+              renderMode: RenderModeType.RenderModeFit,
             }}
           />
         ) : undefined}

diff --git a/...le/src/renderer/examples/advanced/VideoEncoderConfiguration/VideoEncoderConfiguration.tsx b/...le/src/renderer/examples/advanced/VideoEncoderConfiguration/VideoEncoderConfiguration.tsx
@@ -1,11 +1,9 @@
 import {
-  AgoraEnv,
   ChannelProfileType,
   ClientRoleType,
   DegradationPreference,
   IRtcEngineEventHandler,
   OrientationMode,
-  RENDER_MODE,
   RenderModeType,
   VideoCodecType,
   VideoMirrorModeType,
@@ -37,8 +35,7 @@ interface State extends BaseVideoComponentState {
   bitrate: number;
   minBitrate: number;
   orientationMode: OrientationMode;
-  renderMode: RENDER_MODE;
-  renderModeType: RenderModeType;
+  renderMode: RenderModeType;
   degradationPreference: DegradationPreference;
   mirrorMode: VideoMirrorModeType;
 }
@@ -64,8 +61,7 @@ export default class VideoEncoderConfiguration
       bitrate: 0,
       minBitrate: -1,
       orientationMode: OrientationMode.OrientationModeAdaptive,
-      renderMode: RENDER_MODE.WEBGL,
-      renderModeType: RenderModeType.RenderModeFit,
+      renderMode: RenderModeType.RenderModeHidden,
       degradationPreference: DegradationPreference.MaintainQuality,
       mirrorMode: VideoMirrorModeType.VideoMirrorModeDisabled,
     };
@@ -128,20 +124,11 @@ export default class VideoEncoderConfiguration
   }
 
   /**
-   * Step 3-1: setRenderMode,need leave and join channel again
-   */
-  setRenderMode = () => {
-    const { renderMode } = this.state;
-    // @ts-ignore
-    AgoraEnv?.AgoraRendererManager?.['setRenderMode'](renderMode);
-  };
-
-  /**
-   * Step 3-2: setVideoRenderMode
+   * Step 3-1: setVideoRenderMode
    */
   setVideoRenderMode = () => {
-    const { renderModeType, mirrorMode } = this.state;
-    this.engine?.setLocalRenderMode(renderModeType, mirrorMode);
+    const { renderMode, mirrorMode } = this.state;
+    this.engine?.setLocalRenderMode(renderMode, mirrorMode);
   };
 
   /**
@@ -194,7 +181,6 @@ export default class VideoEncoderConfiguration
       codecType,
       orientationMode,
       renderMode,
-      renderModeType,
       degradationPreference,
       mirrorMode,
     } = this.state;
@@ -283,16 +269,6 @@ export default class VideoEncoderConfiguration
           }}
         />
         <AgoraDivider />
-        <AgoraDropdown
-          title={'renderMode'}
-          items={enumToItems(RENDER_MODE)}
-          value={renderMode}
-          onValueChange={(value) => {
-            this.setState({ renderMode: value });
-          }}
-        />
-        <AgoraButton title={`set Render Mode`} onPress={this.setRenderMode} />
-        <AgoraDivider />
         <AgoraDropdown
           title={'mirrorMode'}
           items={enumToItems(VideoMirrorModeType)}
@@ -302,11 +278,11 @@ export default class VideoEncoderConfiguration
           }}
         />
         <AgoraDropdown
-          title={'renderModeType'}
+          title={'renderMode'}
           items={enumToItems(RenderModeType)}
-          value={renderModeType}
+          value={renderMode}
           onValueChange={(value) => {
-            this.setState({ renderModeType: value });
+            this.setState({ renderMode: value });
           }}
         />
         <AgoraButton

diff --git a/example/src/renderer/examples/hook/ScreenShare/ScreenShare.tsx b/example/src/renderer/examples/hook/ScreenShare/ScreenShare.tsx
@@ -404,7 +404,6 @@ export default function ScreenShare() {
         {startScreenCapture ? (
           <RtcSurfaceView
             canvas={{
-              uid: 0,
               sourceType: VideoSourceType.VideoSourceScreen,
               renderMode: RenderModeType.RenderModeFit,
             }}

diff --git a/example/src/renderer/examples/hook/components/BaseRenderUsers.tsx b/example/src/renderer/examples/hook/components/BaseRenderUsers.tsx
@@ -40,7 +40,6 @@ function BaseRenderUsers({
     <>
       {!!startPreview || joinChannelSuccess
         ? renderUser({
-            uid: 0,
             sourceType: VideoSourceType.VideoSourceCamera,
           })
         : undefined}