diff --git a/example/src/renderer/examples/advanced/AudioMixing/AudioMixing.tsx b/example/src/renderer/examples/advanced/AudioMixing/AudioMixing.tsx
index a6805e3b2..f97eb5af8 100644
--- a/example/src/renderer/examples/advanced/AudioMixing/AudioMixing.tsx
+++ b/example/src/renderer/examples/advanced/AudioMixing/AudioMixing.tsx
@@ -63,12 +63,12 @@ export default class AudioMixing
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Only need to enable audio on this case
     this.engine.enableAudio();
@@ -168,6 +168,7 @@ export default class AudioMixing
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/AudioSpectrum/AudioSpectrum.tsx b/example/src/renderer/examples/advanced/AudioSpectrum/AudioSpectrum.tsx
index 77e2d4fd4..8a6b14f40 100644
--- a/example/src/renderer/examples/advanced/AudioSpectrum/AudioSpectrum.tsx
+++ b/example/src/renderer/examples/advanced/AudioSpectrum/AudioSpectrum.tsx
@@ -59,12 +59,12 @@ export default class AudioSpectrum
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Only need to enable audio on this case
     this.engine.enableAudio();
@@ -141,6 +141,7 @@ export default class AudioSpectrum
    */
   protected releaseRtcEngine() {
     this.unregisterAudioSpectrumObserver();
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/BeautyEffect/BeautyEffect.tsx b/example/src/renderer/examples/advanced/BeautyEffect/BeautyEffect.tsx
index 4d9e6eed4..d1c577ca4 100644
--- a/example/src/renderer/examples/advanced/BeautyEffect/BeautyEffect.tsx
+++ b/example/src/renderer/examples/advanced/BeautyEffect/BeautyEffect.tsx
@@ -63,12 +63,12 @@ export default class BeautyEffect
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     this.engine?.enableExtension(
       'agora_video_filters_clear_vision',
@@ -152,6 +152,7 @@ export default class BeautyEffect
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/ChannelMediaRelay/ChannelMediaRelay.tsx b/example/src/renderer/examples/advanced/ChannelMediaRelay/ChannelMediaRelay.tsx
index 5c6acd24f..66d13e5d5 100644
--- a/example/src/renderer/examples/advanced/ChannelMediaRelay/ChannelMediaRelay.tsx
+++ b/example/src/renderer/examples/advanced/ChannelMediaRelay/ChannelMediaRelay.tsx
@@ -58,12 +58,12 @@ export default class ChannelMediaRelay
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
@@ -184,6 +184,7 @@ export default class ChannelMediaRelay
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/ContentInspect/ContentInspect.tsx b/example/src/renderer/examples/advanced/ContentInspect/ContentInspect.tsx
index 326761faa..a8be024a7 100644
--- a/example/src/renderer/examples/advanced/ContentInspect/ContentInspect.tsx
+++ b/example/src/renderer/examples/advanced/ContentInspect/ContentInspect.tsx
@@ -63,12 +63,12 @@ export default class ContentInspect
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
@@ -141,6 +141,7 @@ export default class ContentInspect
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/DeviceManager/DeviceManager.tsx b/example/src/renderer/examples/advanced/DeviceManager/DeviceManager.tsx
index fcb79ce79..6f3f7477d 100644
--- a/example/src/renderer/examples/advanced/DeviceManager/DeviceManager.tsx
+++ b/example/src/renderer/examples/advanced/DeviceManager/DeviceManager.tsx
@@ -78,12 +78,12 @@ export default class DeviceManager
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
diff --git a/example/src/renderer/examples/advanced/DirectCdnStreaming/DirectCdnStreaming.tsx b/example/src/renderer/examples/advanced/DirectCdnStreaming/DirectCdnStreaming.tsx
index 1fb539e28..24175833f 100644
--- a/example/src/renderer/examples/advanced/DirectCdnStreaming/DirectCdnStreaming.tsx
+++ b/example/src/renderer/examples/advanced/DirectCdnStreaming/DirectCdnStreaming.tsx
@@ -84,12 +84,12 @@ export default class DirectCdnStreaming
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
@@ -186,6 +186,7 @@ export default class DirectCdnStreaming
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/EncodedVideoFrame/EncodedVideoFrame.tsx b/example/src/renderer/examples/advanced/EncodedVideoFrame/EncodedVideoFrame.tsx
index 8eacc4879..f94901832 100644
--- a/example/src/renderer/examples/advanced/EncodedVideoFrame/EncodedVideoFrame.tsx
+++ b/example/src/renderer/examples/advanced/EncodedVideoFrame/EncodedVideoFrame.tsx
@@ -57,12 +57,12 @@ export default class EncodedVideoFrame
     }
 
     this.engine = createAgoraRtcEngine() as IRtcEngineEx;
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
diff --git a/example/src/renderer/examples/advanced/Encryption/Encryption.tsx b/example/src/renderer/examples/advanced/Encryption/Encryption.tsx
index 41f28ff1d..c4240711e 100644
--- a/example/src/renderer/examples/advanced/Encryption/Encryption.tsx
+++ b/example/src/renderer/examples/advanced/Encryption/Encryption.tsx
@@ -62,12 +62,12 @@ export default class Encryption
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
@@ -137,6 +137,7 @@ export default class Encryption
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/Extension/Extension.tsx b/example/src/renderer/examples/advanced/Extension/Extension.tsx
index 723e497a1..e2a9d040a 100644
--- a/example/src/renderer/examples/advanced/Extension/Extension.tsx
+++ b/example/src/renderer/examples/advanced/Extension/Extension.tsx
@@ -52,12 +52,12 @@ export default class Extension
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
@@ -134,6 +134,7 @@ export default class Extension
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/JoinMultipleChannel/JoinMultipleChannel.tsx b/example/src/renderer/examples/advanced/JoinMultipleChannel/JoinMultipleChannel.tsx
index 61f959084..99e04fa53 100644
--- a/example/src/renderer/examples/advanced/JoinMultipleChannel/JoinMultipleChannel.tsx
+++ b/example/src/renderer/examples/advanced/JoinMultipleChannel/JoinMultipleChannel.tsx
@@ -65,12 +65,12 @@ export default class JoinMultipleChannel
     }
 
     this.engine = createAgoraRtcEngine() as IRtcEngineEx;
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
@@ -219,6 +219,7 @@ export default class JoinMultipleChannel
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/LocalSpatialAudioEngine/LocalSpatialAudioEngine.tsx b/example/src/renderer/examples/advanced/LocalSpatialAudioEngine/LocalSpatialAudioEngine.tsx
index cdd7bd8dc..7c3bdc710 100644
--- a/example/src/renderer/examples/advanced/LocalSpatialAudioEngine/LocalSpatialAudioEngine.tsx
+++ b/example/src/renderer/examples/advanced/LocalSpatialAudioEngine/LocalSpatialAudioEngine.tsx
@@ -64,7 +64,6 @@ export default class LocalSpatialAudioEngine
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
@@ -72,6 +71,7 @@ export default class LocalSpatialAudioEngine
       // ⚠️ Must use AudioScenarioGameStreaming on this case
       audioScenario: AudioScenarioType.AudioScenarioGameStreaming,
     });
+    this.engine.registerEventHandler(this);
 
     // Only need to enable audio on this case
     this.engine.enableAudio();
@@ -164,6 +164,7 @@ export default class LocalSpatialAudioEngine
    */
   protected releaseRtcEngine() {
     this.releaseLocalSpatialAudioEngine();
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/MediaPlayer/MediaPlayer.tsx b/example/src/renderer/examples/advanced/MediaPlayer/MediaPlayer.tsx
index eb7229e3a..bd676a968 100644
--- a/example/src/renderer/examples/advanced/MediaPlayer/MediaPlayer.tsx
+++ b/example/src/renderer/examples/advanced/MediaPlayer/MediaPlayer.tsx
@@ -68,10 +68,10 @@ export default class MediaPlayer
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
     });
+    this.engine.registerEventHandler(this);
 
     this.createMediaPlayer();
   }
@@ -210,7 +210,7 @@ export default class MediaPlayer
    */
   protected releaseRtcEngine() {
     this.destroyMediaPlayer();
-
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/MediaRecorder/MediaRecorder.tsx b/example/src/renderer/examples/advanced/MediaRecorder/MediaRecorder.tsx
index f148deeca..78fed45ce 100644
--- a/example/src/renderer/examples/advanced/MediaRecorder/MediaRecorder.tsx
+++ b/example/src/renderer/examples/advanced/MediaRecorder/MediaRecorder.tsx
@@ -70,12 +70,12 @@ export default class MediaRecorder
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
diff --git a/example/src/renderer/examples/advanced/PlayEffect/PlayEffect.tsx b/example/src/renderer/examples/advanced/PlayEffect/PlayEffect.tsx
index bcad160db..22244fb2b 100644
--- a/example/src/renderer/examples/advanced/PlayEffect/PlayEffect.tsx
+++ b/example/src/renderer/examples/advanced/PlayEffect/PlayEffect.tsx
@@ -70,12 +70,12 @@ export default class PlayEffect
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Only need to enable audio on this case
     this.engine.enableAudio();
@@ -181,6 +181,7 @@ export default class PlayEffect
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/PushVideoFrame/PushVideoFrame.tsx b/example/src/renderer/examples/advanced/PushVideoFrame/PushVideoFrame.tsx
index 9017404f3..f67e0e852 100644
--- a/example/src/renderer/examples/advanced/PushVideoFrame/PushVideoFrame.tsx
+++ b/example/src/renderer/examples/advanced/PushVideoFrame/PushVideoFrame.tsx
@@ -59,12 +59,12 @@ export default class PushVideoFrame
     }
 
     this.engine = createAgoraRtcEngine() as IRtcEngineEx;
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
diff --git a/example/src/renderer/examples/advanced/RTMPStreaming/RTMPStreaming.tsx b/example/src/renderer/examples/advanced/RTMPStreaming/RTMPStreaming.tsx
index 07e4ef6cf..0fa02f35e 100644
--- a/example/src/renderer/examples/advanced/RTMPStreaming/RTMPStreaming.tsx
+++ b/example/src/renderer/examples/advanced/RTMPStreaming/RTMPStreaming.tsx
@@ -111,12 +111,12 @@ export default class RTMPStreaming
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
@@ -275,6 +275,7 @@ export default class RTMPStreaming
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/RhythmPlayer/RhythmPlayer.tsx b/example/src/renderer/examples/advanced/RhythmPlayer/RhythmPlayer.tsx
index a0973fee4..3ad8a1943 100644
--- a/example/src/renderer/examples/advanced/RhythmPlayer/RhythmPlayer.tsx
+++ b/example/src/renderer/examples/advanced/RhythmPlayer/RhythmPlayer.tsx
@@ -63,12 +63,12 @@ export default class RhythmPlayer
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Only need to enable audio on this case
     this.engine.enableAudio();
@@ -152,6 +152,7 @@ export default class RhythmPlayer
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/ScreenShare/ScreenShare.tsx b/example/src/renderer/examples/advanced/ScreenShare/ScreenShare.tsx
index 45f5e4eea..6dff692dd 100644
--- a/example/src/renderer/examples/advanced/ScreenShare/ScreenShare.tsx
+++ b/example/src/renderer/examples/advanced/ScreenShare/ScreenShare.tsx
@@ -101,12 +101,12 @@ export default class ScreenShare
     }
 
     this.engine = createAgoraRtcEngine() as IRtcEngineEx;
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
diff --git a/example/src/renderer/examples/advanced/SendMetadata/SendMetadata.tsx b/example/src/renderer/examples/advanced/SendMetadata/SendMetadata.tsx
index 95cfc455a..390aad254 100644
--- a/example/src/renderer/examples/advanced/SendMetadata/SendMetadata.tsx
+++ b/example/src/renderer/examples/advanced/SendMetadata/SendMetadata.tsx
@@ -51,12 +51,12 @@ export default class SendMetadata
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
@@ -133,6 +133,7 @@ export default class SendMetadata
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/SendMultiVideoStream/SendMultiVideoStream.tsx b/example/src/renderer/examples/advanced/SendMultiVideoStream/SendMultiVideoStream.tsx
index af38a3147..dd81c0d89 100644
--- a/example/src/renderer/examples/advanced/SendMultiVideoStream/SendMultiVideoStream.tsx
+++ b/example/src/renderer/examples/advanced/SendMultiVideoStream/SendMultiVideoStream.tsx
@@ -1,16 +1,23 @@
 import React from 'react';
 import {
+  AudioFrame,
+  AudioPcmFrame,
   ChannelProfileType,
   ClientRoleType,
   createAgoraRtcEngine,
+  IAudioFrameObserver,
   IMediaPlayer,
+  IMediaPlayerAudioFrameObserver,
   IMediaPlayerSourceObserver,
+  IMediaPlayerVideoFrameObserver,
   IRtcEngineEventHandler,
   IRtcEngineEx,
+  IVideoFrameObserver,
   MediaPlayerError,
   MediaPlayerState,
   RtcConnection,
   UserOfflineReasonType,
+  VideoFrame,
   VideoSourceType,
 } from 'agora-electron-sdk';
 
@@ -32,7 +39,13 @@ interface State extends BaseVideoComponentState {
 
 export default class SendMultiVideoStream
   extends BaseComponent<{}, State>
-  implements IRtcEngineEventHandler, IMediaPlayerSourceObserver
+  implements
+    IRtcEngineEventHandler,
+    IMediaPlayerSourceObserver,
+    IAudioFrameObserver,
+    IVideoFrameObserver,
+    IMediaPlayerAudioFrameObserver,
+    IMediaPlayerVideoFrameObserver
 {
   // @ts-ignore
   protected engine?: IRtcEngineEx;
@@ -65,12 +78,14 @@ export default class SendMultiVideoStream
     }
 
     this.engine = createAgoraRtcEngine() as IRtcEngineEx;
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
+    // this.engine.getMediaEngine().registerAudioFrameObserver(this);
+    this.engine.getMediaEngine().registerVideoFrameObserver(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
@@ -113,8 +128,10 @@ export default class SendMultiVideoStream
     }
 
     this.player = this.engine?.createMediaPlayer();
-    this.player?.registerPlayerSourceObserver(this);
-    this.player?.open(url, 0);
+    // this.player.registerAudioFrameObserver(this);
+    // this.player.registerVideoFrameObserver(this);
+    this.player.registerPlayerSourceObserver(this);
+    this.player.open(url, 0);
   };
 
   /**
@@ -156,6 +173,8 @@ export default class SendMultiVideoStream
       return;
     }
 
+    // this.player?.unregisterAudioFrameObserver(this);
+    // this.player?.unregisterVideoFrameObserver(this);
     this.engine?.destroyMediaPlayer(this.player);
     this.setState({ open: false });
   };
@@ -172,6 +191,9 @@ export default class SendMultiVideoStream
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    // this.engine?.getMediaEngine().unregisterAudioFrameObserver(this);
+    this.engine?.getMediaEngine().unregisterVideoFrameObserver(this);
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
@@ -245,6 +267,28 @@ export default class SendMultiVideoStream
     this.player?.play();
   }
 
+  onRecordAudioFrame(channelId: string, audioFrame: AudioFrame): boolean {
+    this.info('onRecordAudioFrame', channelId, audioFrame);
+    return true;
+  }
+
+  onCaptureVideoFrame(videoFrame: VideoFrame): boolean {
+    this.info('onCaptureVideoFrame', videoFrame);
+    return true;
+  }
+
+  onMediaPlayerVideoFrame(
+    videoFrame: VideoFrame,
+    mediaPlayerId: number
+  ): boolean {
+    this.info('onMediaPlayerVideoFrame', videoFrame, mediaPlayerId);
+    return true;
+  }
+
+  onFrame(frame: AudioPcmFrame | VideoFrame) {
+    this.info('onFrame', frame);
+  }
+
   protected renderConfiguration(): React.ReactNode {
     const { uid2, url } = this.state;
     return (
diff --git a/example/src/renderer/examples/advanced/SpatialAudio/SpatialAudio.tsx b/example/src/renderer/examples/advanced/SpatialAudio/SpatialAudio.tsx
index f105109ac..7b6f0ae66 100644
--- a/example/src/renderer/examples/advanced/SpatialAudio/SpatialAudio.tsx
+++ b/example/src/renderer/examples/advanced/SpatialAudio/SpatialAudio.tsx
@@ -67,13 +67,13 @@ export default class SpatialAudio
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
       audioScenario: AudioScenarioType.AudioScenarioGameStreaming,
     });
+    this.engine.registerEventHandler(this);
 
     this.engine.setParameters(
       JSON.stringify({ 'rtc.audio.force_bluetooth_a2dp': true })
@@ -160,6 +160,7 @@ export default class SpatialAudio
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/StreamMessage/StreamMessage.tsx b/example/src/renderer/examples/advanced/StreamMessage/StreamMessage.tsx
index 0c797c5c0..4415fe060 100644
--- a/example/src/renderer/examples/advanced/StreamMessage/StreamMessage.tsx
+++ b/example/src/renderer/examples/advanced/StreamMessage/StreamMessage.tsx
@@ -59,12 +59,12 @@ export default class StreamMessage
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Only need to enable audio on this case
     this.engine.enableAudio();
@@ -137,6 +137,7 @@ export default class StreamMessage
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/TakeSnapshot/TakeSnapshot.tsx b/example/src/renderer/examples/advanced/TakeSnapshot/TakeSnapshot.tsx
index 553ffe7d4..e2d721269 100644
--- a/example/src/renderer/examples/advanced/TakeSnapshot/TakeSnapshot.tsx
+++ b/example/src/renderer/examples/advanced/TakeSnapshot/TakeSnapshot.tsx
@@ -59,12 +59,12 @@ export default class TakeSnapshot
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
@@ -121,6 +121,7 @@ export default class TakeSnapshot
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/VideoEncoderConfiguration/VideoEncoderConfiguration.tsx b/example/src/renderer/examples/advanced/VideoEncoderConfiguration/VideoEncoderConfiguration.tsx
index 0ab9556fa..bb3a696c7 100644
--- a/example/src/renderer/examples/advanced/VideoEncoderConfiguration/VideoEncoderConfiguration.tsx
+++ b/example/src/renderer/examples/advanced/VideoEncoderConfiguration/VideoEncoderConfiguration.tsx
@@ -74,12 +74,12 @@ export default class VideoEncoderConfiguration
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
@@ -157,6 +157,7 @@ export default class VideoEncoderConfiguration
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/VirtualBackground/VirtualBackground.tsx b/example/src/renderer/examples/advanced/VirtualBackground/VirtualBackground.tsx
index a9ced6fde..3799d582b 100644
--- a/example/src/renderer/examples/advanced/VirtualBackground/VirtualBackground.tsx
+++ b/example/src/renderer/examples/advanced/VirtualBackground/VirtualBackground.tsx
@@ -62,12 +62,12 @@ export default class VirtualBackground
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     this.engine?.enableExtension(
       'agora_video_filters_segmentation',
@@ -155,6 +155,7 @@ export default class VirtualBackground
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/advanced/VoiceChanger/VoiceChanger.tsx b/example/src/renderer/examples/advanced/VoiceChanger/VoiceChanger.tsx
index 14da8d9b5..e2ba5bdad 100644
--- a/example/src/renderer/examples/advanced/VoiceChanger/VoiceChanger.tsx
+++ b/example/src/renderer/examples/advanced/VoiceChanger/VoiceChanger.tsx
@@ -81,12 +81,12 @@ export default class VoiceChanger
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Only need to enable audio on this case
     this.engine.enableAudio();
@@ -197,6 +197,7 @@ export default class VoiceChanger
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/basic/JoinChannelAudio/JoinChannelAudio.tsx b/example/src/renderer/examples/basic/JoinChannelAudio/JoinChannelAudio.tsx
index 4f4ed68fe..8d2c6ff88 100644
--- a/example/src/renderer/examples/basic/JoinChannelAudio/JoinChannelAudio.tsx
+++ b/example/src/renderer/examples/basic/JoinChannelAudio/JoinChannelAudio.tsx
@@ -58,12 +58,12 @@ export default class JoinChannelAudio
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Only need to enable audio on this case
     this.engine.enableAudio();
@@ -154,6 +154,7 @@ export default class JoinChannelAudio
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx b/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx
index 88066cb23..bb6f627f8 100644
--- a/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx
+++ b/example/src/renderer/examples/basic/JoinChannelVideo/JoinChannelVideo.tsx
@@ -52,12 +52,12 @@ export default class JoinChannelVideo
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Need to enable video on this case
     // If you only call `enableAudio`, only relay the audio stream to the target channel
diff --git a/example/src/renderer/examples/basic/StringUid/StringUid.tsx b/example/src/renderer/examples/basic/StringUid/StringUid.tsx
index 70e62e137..42f01c048 100644
--- a/example/src/renderer/examples/basic/StringUid/StringUid.tsx
+++ b/example/src/renderer/examples/basic/StringUid/StringUid.tsx
@@ -49,12 +49,12 @@ export default class StringUid
     }
 
     this.engine = createAgoraRtcEngine();
-    this.engine.registerEventHandler(this);
     this.engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
       channelProfile: ChannelProfileType.ChannelProfileLiveBroadcasting,
     });
+    this.engine.registerEventHandler(this);
 
     // Only need to enable audio on this case
     this.engine.enableAudio();
@@ -110,6 +110,7 @@ export default class StringUid
    * Step 5: releaseRtcEngine
    */
   protected releaseRtcEngine() {
+    this.engine?.unregisterEventHandler(this);
     this.engine?.release();
   }
 
diff --git a/example/src/renderer/examples/hooks/JoinChannelVideo/JoinChannelVideo.tsx b/example/src/renderer/examples/hooks/JoinChannelVideo/JoinChannelVideo.tsx
index 265d39962..244e6244c 100644
--- a/example/src/renderer/examples/hooks/JoinChannelVideo/JoinChannelVideo.tsx
+++ b/example/src/renderer/examples/hooks/JoinChannelVideo/JoinChannelVideo.tsx
@@ -42,7 +42,6 @@ export default function JoinChannelVideoWithAddlisten() {
       error(`appId is invalid`);
     }
 
-    engine.registerEventHandler(this);
     engine.initialize({
       appId,
       // Should use ChannelProfileLiveBroadcasting on most of cases
@@ -92,7 +91,6 @@ export default function JoinChannelVideoWithAddlisten() {
    * Step 4: releaseRtcEngine
    */
   const releaseRtcEngine = () => {
-    engine?.unregisterEventHandler(this);
     engine?.release();
   };
 
diff --git a/package.json b/package.json
index 837f0f836..695c1fcb6 100644
--- a/package.json
+++ b/package.json
@@ -32,8 +32,8 @@
     "bootstrap": "yarn example && yarn"
   },
   "agora_electron": {
-    "iris_sdk_win": "https://download.agora.io/sdk/release/iris_4.0.0_DCG_Windows_Video_20220910_0326.zip",
-    "iris_sdk_mac": "https://download.agora.io/sdk/release/iris_4.0.0_DCG_Mac_Video_20220910_0344.zip",
+    "iris_sdk_win": "https://download.agora.io/sdk/release/iris_4.0.0_DCG_Windows_Video_20220927_0401.zip",
+    "iris_sdk_mac": "https://download.agora.io/sdk/release/iris_4.0.0_DCG_Mac_Video_20220927_0356.zip",
     "no_symbol": true,
     "prebuilt": true
   },
diff --git a/ts/Private/extension/IAgoraMediaEngineExtension.ts b/ts/Private/extension/IAgoraMediaEngineExtension.ts
index 0fae0bf41..076009c9b 100644
--- a/ts/Private/extension/IAgoraMediaEngineExtension.ts
+++ b/ts/Private/extension/IAgoraMediaEngineExtension.ts
@@ -10,17 +10,17 @@ export type IMediaEngineEvent = IAudioFrameObserver &
 
 declare module '../IAgoraMediaEngine' {
   interface IMediaEngine {
-    addListener?<EventType extends keyof IMediaEngineEvent>(
+    addListener<EventType extends keyof IMediaEngineEvent>(
       eventType: EventType,
       listener: IMediaEngineEvent[EventType]
     ): void;
 
-    removeListener?<EventType extends keyof IMediaEngineEvent>(
+    removeListener<EventType extends keyof IMediaEngineEvent>(
       eventType: EventType,
       listener: IMediaEngineEvent[EventType]
     ): void;
 
-    removeAllListeners?<EventType extends keyof IMediaEngineEvent>(
+    removeAllListeners<EventType extends keyof IMediaEngineEvent>(
       eventType?: EventType
     ): void;
   }
diff --git a/ts/Private/extension/IAgoraMediaPlayerExtension.ts b/ts/Private/extension/IAgoraMediaPlayerExtension.ts
index 2e44a2d26..69a68bcba 100644
--- a/ts/Private/extension/IAgoraMediaPlayerExtension.ts
+++ b/ts/Private/extension/IAgoraMediaPlayerExtension.ts
@@ -12,17 +12,17 @@ export type IMediaPlayerEvent = IMediaPlayerSourceObserver &
 
 declare module '../IAgoraMediaPlayer' {
   interface IMediaPlayer {
-    addListener?<EventType extends keyof IMediaPlayerEvent>(
+    addListener<EventType extends keyof IMediaPlayerEvent>(
       eventType: EventType,
       listener: IMediaPlayerEvent[EventType]
     ): void;
 
-    removeListener?<EventType extends keyof IMediaPlayerEvent>(
+    removeListener<EventType extends keyof IMediaPlayerEvent>(
       eventType: EventType,
       listener: IMediaPlayerEvent[EventType]
     ): void;
 
-    removeAllListeners?<EventType extends keyof IMediaPlayerEvent>(
+    removeAllListeners<EventType extends keyof IMediaPlayerEvent>(
       eventType?: EventType
     ): void;
 
diff --git a/ts/Private/extension/IAgoraMediaRecorderExtension.ts b/ts/Private/extension/IAgoraMediaRecorderExtension.ts
index 3642c3758..428f25bd6 100644
--- a/ts/Private/extension/IAgoraMediaRecorderExtension.ts
+++ b/ts/Private/extension/IAgoraMediaRecorderExtension.ts
@@ -4,17 +4,17 @@ export type IMediaRecorderEvent = IMediaRecorderObserver;
 
 declare module '../IAgoraMediaRecorder' {
   interface IMediaRecorder {
-    addListener?<EventType extends keyof IMediaRecorderEvent>(
+    addListener<EventType extends keyof IMediaRecorderEvent>(
       eventType: EventType,
       listener: IMediaRecorderEvent[EventType]
     ): void;
 
-    removeListener?<EventType extends keyof IMediaRecorderEvent>(
+    removeListener<EventType extends keyof IMediaRecorderEvent>(
       eventType: EventType,
       listener: IMediaRecorderEvent[EventType]
     ): void;
 
-    removeAllListeners?<EventType extends keyof IMediaRecorderEvent>(
+    removeAllListeners<EventType extends keyof IMediaRecorderEvent>(
       eventType?: EventType
     ): void;
   }
diff --git a/ts/Private/extension/IAgoraRtcEngineExtension.ts b/ts/Private/extension/IAgoraRtcEngineExtension.ts
index 081bd024c..20d772416 100644
--- a/ts/Private/extension/IAgoraRtcEngineExtension.ts
+++ b/ts/Private/extension/IAgoraRtcEngineExtension.ts
@@ -14,17 +14,17 @@ export type IRtcEngineEvent = IRtcEngineEventHandler &
 
 declare module '../IAgoraRtcEngine' {
   interface IRtcEngine {
-    addListener?<EventType extends keyof IRtcEngineEvent>(
+    addListener<EventType extends keyof IRtcEngineEvent>(
       eventType: EventType,
       listener: IRtcEngineEvent[EventType]
     ): void;
 
-    removeListener?<EventType extends keyof IRtcEngineEvent>(
+    removeListener<EventType extends keyof IRtcEngineEvent>(
       eventType: EventType,
       listener: IRtcEngineEvent[EventType]
     ): void;
 
-    removeAllListeners?<EventType extends keyof IRtcEngineEvent>(
+    removeAllListeners<EventType extends keyof IRtcEngineEvent>(
       eventType?: EventType
     ): void;
   }
diff --git a/ts/Private/impl/IAgoraMediaEngineImpl.ts b/ts/Private/impl/IAgoraMediaEngineImpl.ts
index 1186e4519..88199b9ca 100644
--- a/ts/Private/impl/IAgoraMediaEngineImpl.ts
+++ b/ts/Private/impl/IAgoraMediaEngineImpl.ts
@@ -10,6 +10,7 @@ import {
   ExternalVideoFrame,
 } from '../AgoraMediaBase';
 import { SenderOptions, EncodedVideoFrameInfo } from '../AgoraBase';
+// @ts-ignore
 export class IMediaEngineImpl implements IMediaEngine {
   registerAudioFrameObserver(observer: IAudioFrameObserver): number {
     const apiType = this.getApiTypeFromRegisterAudioFrameObserver(observer);
diff --git a/ts/Private/impl/IAgoraMediaPlayerImpl.ts b/ts/Private/impl/IAgoraMediaPlayerImpl.ts
index e4cb5a566..1e155cb68 100644
--- a/ts/Private/impl/IAgoraMediaPlayerImpl.ts
+++ b/ts/Private/impl/IAgoraMediaPlayerImpl.ts
@@ -17,6 +17,7 @@ import {
 } from '../AgoraMediaBase';
 import { IMediaPlayerSourceObserver } from '../IAgoraMediaPlayerSource';
 import { SpatialAudioParams } from '../AgoraBase';
+// @ts-ignore
 export class IMediaPlayerImpl implements IMediaPlayer {
   getMediaPlayerId(): number {
     const apiType = this.getApiTypeFromGetMediaPlayerId();
diff --git a/ts/Private/impl/IAgoraMediaRecorderImpl.ts b/ts/Private/impl/IAgoraMediaRecorderImpl.ts
index 12a1642ca..4b7707ae8 100644
--- a/ts/Private/impl/IAgoraMediaRecorderImpl.ts
+++ b/ts/Private/impl/IAgoraMediaRecorderImpl.ts
@@ -5,6 +5,7 @@ import {
   IMediaRecorderObserver,
   MediaRecorderConfiguration,
 } from '../AgoraMediaBase';
+// @ts-ignore
 export class IMediaRecorderImpl implements IMediaRecorder {
   setMediaRecorderObserver(
     connection: RtcConnection,
diff --git a/ts/Private/impl/IAgoraRtcEngineExImpl.ts b/ts/Private/impl/IAgoraRtcEngineExImpl.ts
index de92948e4..72ef50d1f 100644
--- a/ts/Private/impl/IAgoraRtcEngineExImpl.ts
+++ b/ts/Private/impl/IAgoraRtcEngineExImpl.ts
@@ -19,6 +19,7 @@ import {
   DataStreamConfig,
 } from '../AgoraBase';
 import { RenderModeType } from '../AgoraMediaBase';
+// @ts-ignore
 export class IRtcEngineExImpl extends IRtcEngineImpl implements IRtcEngineEx {
   joinChannelEx(
     token: string,
diff --git a/ts/Private/impl/IAgoraRtcEngineImpl.ts b/ts/Private/impl/IAgoraRtcEngineImpl.ts
index 6b1a1e45c..9e6910b92 100644
--- a/ts/Private/impl/IAgoraRtcEngineImpl.ts
+++ b/ts/Private/impl/IAgoraRtcEngineImpl.ts
@@ -1067,6 +1067,7 @@ export function processIDirectCdnStreamingEventHandler(
   }
 }
 
+// @ts-ignore
 export class IRtcEngineImpl implements IRtcEngine {
   release(sync = false): void {
     const apiType = this.getApiTypeFromRelease(sync);
diff --git a/ts/Private/internal/IrisApiEngine.ts b/ts/Private/internal/IrisApiEngine.ts
index 35186fdc6..29f453d4e 100644
--- a/ts/Private/internal/IrisApiEngine.ts
+++ b/ts/Private/internal/IrisApiEngine.ts
@@ -4,6 +4,7 @@ import { AgoraElectronBridge, Result } from '../../Types';
 import { AgoraEnv, logDebug, parseJSON } from '../../Utils';
 import {
   AudioFrame,
+  AudioPcmFrame,
   IAudioFrameObserver,
   IAudioSpectrumObserver,
   IMediaRecorderObserver,
@@ -145,8 +146,8 @@ export const EVENT_PROCESSORS = {
         (data.videoFrame as VideoFrame).yBuffer = buffers[0];
         (data.videoFrame as VideoFrame).uBuffer = buffers[1];
         (data.videoFrame as VideoFrame).vBuffer = buffers[2];
-        // (data.videoFrame as VideoFrame).metadata_buffer = buffers[3];
-        // (data.videoFrame as VideoFrame).alphaBuffer = buffers[4];
+        (data.videoFrame as VideoFrame).metadata_buffer = buffers[3];
+        (data.videoFrame as VideoFrame).alphaBuffer = buffers[4];
       }
     },
     handlers: () => MediaEngineInternal._video_frame_observers,
@@ -210,19 +211,19 @@ export const EVENT_PROCESSORS = {
       MediaPlayerInternal._source_observers.get(data.playerId),
   },
   IMediaPlayerAudioFrameObserver: {
-    suffix: 'MediaPlayerAudioFrameObserver_',
+    suffix: 'MediaPlayer_AudioFrameObserver_',
     type: EVENT_TYPE.IMediaPlayer,
     func: [processIMediaPlayerAudioFrameObserver],
     preprocess: (event: string, data: any, buffers: Uint8Array[]) => {
-      // if (data.frame) {
-      //   (data.frame as AudioPcmFrame).data_ = buffers[0];
-      // }
+      if (data.frame) {
+        (data.frame as AudioPcmFrame).data_ = Array.from(buffers[0]);
+      }
     },
     handlers: (data: any) =>
       MediaPlayerInternal._audio_frame_observers.get(data.playerId),
   },
   IMediaPlayerVideoFrameObserver: {
-    suffix: 'MediaPlayerVideoFrameObserver_',
+    suffix: 'MediaPlayer_VideoFrameObserver_',
     type: EVENT_TYPE.IMediaPlayer,
     func: [processIMediaPlayerVideoFrameObserver],
     preprocess: (event: string, data: any, buffers: Uint8Array[]) => {