feat: WebCodecs videoDecoder

.eslintignore

@@ -4,3 +4,4 @@ build/
 js/
 types/
 ts/Private/ti/
+native/

.eslintrc

@@ -84,8 +84,15 @@
     "document": false,
     "HTMLElement": false,
     "HTMLDivElement": false,
+    "RenderingContext": false,
+    "WebGLRenderingContext": false,
     "WebGL2RenderingContext": false,
     "WebGLTexture": false,
+    "WebGLBuffer": false,
+    "WebGLProgram": false,
+    "VideoDecoder": false,
+    "VideoFrame": false,
+    "EncodedVideoChunk":false,
     "HTMLCanvasElement": false,
     "ResizeObserver": false,
     "name": false,

.github/workflows/build.yml

@@ -97,17 +97,17 @@ jobs:
           yarn link agora-electron-sdk
           yarn dist:mac
           yarn unlink agora-electron-sdk
-        env: 
+        env:
           USE_HARD_LINKS: false
         working-directory: example
-      
+
       - uses: actions/upload-artifact@v3
         with:
           name: AgoraRtcNgExample-mac
           path: |
             example/dist/Agora-Electron-API-Example-*-mac.zip
           if-no-files-found: error
-  
+
   notification:
     runs-on: ubuntu-latest
     needs: [ build-windows, build-mac ]

.gitignore

@@ -242,3 +242,4 @@ docs/
 types/
 iris/
 appId.*
+native/

CHANGELOG.md

@@ -1,5 +1,20 @@
 
 
+## [4.2.2-build.143-rc.2](https://github.com/AgoraIO-Extensions/Electron-SDK/compare/v4.2.2-build.143-rc.1...v4.2.2-build.143-rc.2) (2024-05-22)
+
+## [4.2.2-build.143-rc.1](https://github.com/AgoraIO-Extensions/Electron-SDK/compare/v4.2.2-build.141-rc.2...v4.2.2-build.143-rc.1) (2024-05-20)
+
+
+### Features
+
+* support native 4.2.2.142 ([#1178](https://github.com/AgoraIO-Extensions/Electron-SDK/issues/1178)) ([473815e](https://github.com/AgoraIO-Extensions/Electron-SDK/commit/473815eb05fc08845e394b4daf9a59c0d5096d6d))
+
+
+### Reverts
+
+* Revert "chore: optimize" ([c844528](https://github.com/AgoraIO-Extensions/Electron-SDK/commit/c844528de5cb301091d9bd39c270db86bd21fa57))
+* Revert "chore: optimize" ([3240684](https://github.com/AgoraIO-Extensions/Electron-SDK/commit/3240684eb9e47e464cd321b657797139918653e2))
+
 ## [4.2.2-build.142-rc.1](https://github.com/AgoraIO-Extensions/Electron-SDK/compare/v4.2.2-build.141-rc.2...v4.2.2-build.142-rc.1) (2024-03-29)
 
 ## [4.2.2-build.141-rc.2](https://github.com/AgoraIO-Extensions/Electron-SDK/compare/v4.2.2-build.141-rc.1...v4.2.2-build.141-rc.2) (2023-12-15)

example/package.json

@@ -15,6 +15,7 @@
   },
   "build": {
     "appId": "agora.io.ElectronApiExample",
+    "includePdb": true,
     "asar": true,
     "asarUnpack": [
       "node_modules/agora-electron-sdk"
@@ -70,10 +71,10 @@
     ]
   },
   "dependencies": {
-    "agora-electron-sdk": "4.2.2-build.142-rc.1",
+    "agora-electron-sdk": "4.2.2-build.143-rc.2",
     "antd": "^4.20.3",
     "download": "^8.0.0",
-    "ffi-napi": "^4.0.3",
+    "koffi": "^2.8.0",
     "react": "^18.1.0",
     "react-color": "^2.19.3",
     "react-dom": "^18.1.0",
@@ -94,7 +95,7 @@
     "@types/react-dom": "^18.0.3",
     "@types/react-router-dom": "^5.1.6",
     "@types/ref-napi": "^3.0.7",
-    "electron": "18.2.3",
+    "electron": "22.0.0",
     "electron-builder": "^23.1.0",
     "electron-webpack": "^2.8.2",
     "fork-ts-checker-webpack-plugin": "^4.1.2",

example/src/main/index.js

@@ -1,6 +1,7 @@
 import path from 'path';
 import { format as formatUrl } from 'url';
 
+import 'agora-electron-sdk/js/Private/ipc/main.js';
 import { BrowserWindow, app, ipcMain, systemPreferences } from 'electron';
 
 const isDevelopment = process.env.NODE_ENV !== 'production';

example/src/renderer/components/BaseComponent.tsx

@@ -190,7 +190,6 @@ export abstract class BaseComponent<
       <>
         {!!startPreview || joinChannelSuccess
           ? this.renderUser({
-              uid: 0,
               sourceType: VideoSourceType.VideoSourceCamera,
             })
           : undefined}

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

example/src/renderer/examples/advanced/LocalVideoTranscoder/LocalVideoTranscoder.tsx

@@ -456,7 +456,6 @@
         {startLocalVideoTranscoder
           ? this.renderUser({
               renderMode: RenderModeType.RenderModeFit,
-              uid: 0,
               sourceType: VideoSourceType.VideoSourceTranscoded,
             })
           : undefined}
@@ -493,7 +492,7 @@
             };
           })}
           value={videoDeviceId}
           onValueChange={(value, index) => {
             if (videoDeviceId?.indexOf(value) === -1) {
               this.setState(
                 (preState) => {
@@ -576,6 +575,7 @@
             canvas={{
               mediaPlayerId: this.player?.getMediaPlayerId(),
               sourceType: VideoSourceType.VideoSourceMediaPlayer,
+              renderMode: RenderModeType.RenderModeFit,
             }}
           />
         ) : undefined}

example/src/renderer/examples/advanced/MediaPlayer/MediaPlayer.tsx

@@ -5,6 +5,7 @@ import {
   MediaPlayerError,
   MediaPlayerEvent,
   MediaPlayerState,
+  RenderModeType,
   VideoSourceType,
   createAgoraRtcEngine,
 } from 'agora-electron-sdk';
@@ -353,6 +354,7 @@ export default class MediaPlayer
             canvas={{
               mediaPlayerId: this.player?.getMediaPlayerId(),
               sourceType: VideoSourceType.VideoSourceMediaPlayer,
+              renderMode: RenderModeType.RenderModeFit,
             }}
           />
         ) : undefined}