agora-electron-sdk 4.1.1-rc.1 → 4.2.0-dev.13

package/ts/Renderer/{GlRenderer → WebGLRenderer}/index.ts

@@ -1,11 +1,14 @@
-const createProgramFromSources =
-  require('./webgl-utils').createProgramFromSources;
-
 import { EventEmitter } from 'events';
+
+import { RenderModeType } from '../../Private/AgoraMediaBase';
+
 import { ShareVideoFrame } from '../../Types';
 import { logError, logWarn } from '../../Utils';
 import { IRenderer, RenderFailCallback } from '../IRenderer';
 
+const createProgramFromSources =
+  require('./webgl-utils').createProgramFromSources;
+
 const vertexShaderSource =
   'attribute vec2 a_position;' +
   'attribute vec2 a_texCoord;' +
@@ -21,7 +24,8 @@ const vertexShaderSource =
 const yuvShaderSource =
   'precision mediump float;' +
   'uniform sampler2D Ytex;' +
-  'uniform sampler2D Utex,Vtex;' +
+  'uniform sampler2D Utex;' +
+  'uniform sampler2D Vtex;' +
   'varying vec2 v_texCoord;' +
   'void main(void) {' +
   '  float nx,ny,r,g,b,y,u,v;' +
@@ -52,8 +56,10 @@ export class GlRenderer extends IRenderer {
   texCoordBuffer: any;
   surfaceBuffer: any;
 
+  // @ts-ignore
   parentElement: HTMLElement | undefined;
   container: HTMLElement | undefined;
+  // @ts-ignore
   canvas: HTMLCanvasElement | undefined;
   renderImageCount = 0;
   initWidth = 0;
@@ -78,28 +84,12 @@ export class GlRenderer extends IRenderer {
     this.failInitRenderCB = failCallback;
   }
 
-  bind(view: HTMLElement) {
+  public bind(view: HTMLElement) {
     super.bind(view);
-
-    // this.initCanvas(
-    //   view,
-    //   view.clientWidth,
-    //   view.clientHeight,
-    //   this.initRotation,
-    //   console.warn
-    // );
-    // const ResizeObserver = window.ResizeObserver;
-    // if (ResizeObserver) {
-    //   this.observer = new ResizeObserver(() => {
-    //     this.refreshCanvas && this.refreshCanvas();
-    //   });
-    //   this.observer.observe(view);
-    // }
   }
 
-  unbind() {
-    // @ts-ignore
-    this.observer && this.observer.unobserve && this.observer.disconnect();
+  public unbind() {
+    this.observer?.unobserve && this.observer.disconnect();
     this.program = undefined;
     this.positionLocation = undefined;
     this.texCoordLocation = undefined;
@@ -142,7 +132,7 @@ export class GlRenderer extends IRenderer {
     this.parentElement = undefined;
   }
 
-  updateViewZoomLevel(rotation: number, width: number, height: number) {
+  private updateViewZoomLevel(rotation: number, width: number, height: number) {
     if (!this.parentElement || !this.canvas) {
       return;
     }
@@ -150,43 +140,37 @@ export class GlRenderer extends IRenderer {
     this.clientHeight = this.parentElement.clientHeight;
 
     try {
-      if (this.contentMode === 0) {
+      if (this.contentMode === RenderModeType.RenderModeHidden) {
         // Cover
         if (rotation === 0 || rotation === 180) {
           if (this.clientWidth / this.clientHeight > width / height) {
-            // @ts-ignore
-            this.canvas.style.zoom = this.clientWidth / width;
+            this.canvas.style.transform = `scale(${this.clientWidth / width})`;
           } else {
-            // @ts-ignore
-            this.canvas.style.zoom = this.clientHeight / height;
+            this.canvas.style.transform = `scale(${
+              this.clientHeight / height
+            })`;
           }
         } else {
           // 90, 270
           if (this.clientHeight / this.clientWidth > width / height) {
-            // @ts-ignore
-            this.canvas.style.zoom = this.clientHeight / width;
+            this.canvas.style.transform = `scale(${this.clientHeight / width})`;
           } else {
-            // @ts-ignore
-            this.canvas.style.zoom = this.clientWidth / height;
+            this.canvas.style.transform = `scale(${this.clientWidth / height})`;
           }
         }
         // Contain
       } else if (rotation === 0 || rotation === 180) {
         if (this.clientWidth / this.clientHeight > width / height) {
-          // @ts-ignore
-          this.canvas.style.zoom = this.clientHeight / height;
+          this.canvas.style.transform = `scale(${this.clientHeight / height})`;
         } else {
-          // @ts-ignore
-          this.canvas.style.zoom = this.clientWidth / width;
+          this.canvas.style.transform = `scale(${this.clientWidth / width})`;
         }
       } else {
         // 90, 270
         if (this.clientHeight / this.clientWidth > width / height) {
-          // @ts-ignore
-          this.canvas.style.zoom = this.clientWidth / height;
+          this.canvas.style.transform = `scale(${this.clientWidth / height})`;
         } else {
-          // @ts-ignore
-          this.canvas.style.zoom = this.clientHeight / width;
+          this.canvas.style.transform = `scale(${this.clientHeight / width})`;
         }
       }
     } catch (e) {
@@ -197,7 +181,7 @@ export class GlRenderer extends IRenderer {
     return true;
   }
 
-  updateCanvas(rotation: number, width: number, height: number) {
+  private updateCanvas(rotation: number, width: number, height: number) {
     // if (this.canvasUpdated) {
     //   return;
     // }
@@ -284,7 +268,7 @@ export class GlRenderer extends IRenderer {
     gl.uniform2f(resolutionLocation, width, height);
   }
 
-  drawFrame(videoFrame: ShareVideoFrame) {
+  public drawFrame(videoFrame: ShareVideoFrame) {
     let error;
     try {
       this.renderImage({
@@ -292,7 +276,7 @@ export class GlRenderer extends IRenderer {
         height: videoFrame.height,
         left: 0,
         top: 0,
-        right: 0,
+        right: videoFrame.yStride - videoFrame.width,
         bottom: 0,
         rotation: videoFrame.rotation || 0,
         yplane: videoFrame.yBuffer,
@@ -312,7 +296,7 @@ export class GlRenderer extends IRenderer {
     }
   }
 
-  refreshCanvas() {
+  public refreshCanvas() {
     if (this.lastImageWidth) {
       this.updateViewZoomLevel(
         this.lastImageRotation,
@@ -322,7 +306,7 @@ export class GlRenderer extends IRenderer {
     }
   }
 
-  renderImage(image: {
+  private renderImage(image: {
     width: number;
     height: number;
     left: number;
@@ -394,7 +378,7 @@ export class GlRenderer extends IRenderer {
     }
   }
 
-  uploadYuv(
+  private uploadYuv(
     width: number,
     height: number,
     yplane: Uint8Array,
@@ -452,19 +436,19 @@ export class GlRenderer extends IRenderer {
     );
   }
 
-  deleteBuffer(buffer: any) {
+  private deleteBuffer(buffer: any) {
     if (buffer && this.gl) {
       this.gl.deleteBuffer(buffer);
     }
   }
 
-  deleteTexture(texture: any) {
+  private deleteTexture(texture: any) {
     if (texture && this.gl) {
       this.gl.deleteTexture(texture);
     }
   }
 
-  initCanvas(
+  private initCanvas(
     view: HTMLElement,
     width: number,
     height: number,
@@ -557,7 +541,8 @@ export class GlRenderer extends IRenderer {
 
     this.initTextures();
   }
-  initTextures() {
+
+  private initTextures() {
     let gl = this.gl;
     if (!gl) {
       return;

package/ts/Renderer/YUVCanvasRenderer/index.ts

@@ -5,14 +5,14 @@
  * @Last Modified time: 2021-05-19 15:59:03
  */
 
-const YUVBuffer = require('yuv-buffer');
-const YUVCanvas = require('yuv-canvas');
-const isEqual = require('lodash.isequal');
-
 import { RenderModeType } from '../../Private/AgoraMediaBase';
 import { CanvasOptions, ShareVideoFrame } from '../../Types';
 import { IRenderer } from '../IRenderer';
 
+const isEqual = require('lodash.isequal');
+const YUVBuffer = require('yuv-buffer');
+const YUVCanvas = require('yuv-canvas');
+
 export class YUVCanvasRenderer extends IRenderer {
   private _cacheCanvasOptions?: CanvasOptions;
   private _yuvCanvasSink?: any;
@@ -25,6 +25,7 @@ export class YUVCanvasRenderer extends IRenderer {
       rotation: 0,
       width: 0,
       height: 0,
+      yStride: 0,
       yBuffer: new Uint8Array(0),
       uBuffer: new Uint8Array(0),
       vBuffer: new Uint8Array(0),
@@ -32,7 +33,7 @@ export class YUVCanvasRenderer extends IRenderer {
     };
   }
 
-  bind(element: HTMLElement) {
+  public bind(element: HTMLElement) {
     super.bind(element);
     let container = document.createElement('div');
     Object.assign(container.style, {
@@ -53,7 +54,7 @@ export class YUVCanvasRenderer extends IRenderer {
     });
   }
 
-  unbind() {
+  public unbind() {
     if (this._container) {
       this._container.replaceChildren();
       this._container = undefined;
@@ -70,7 +71,7 @@ export class YUVCanvasRenderer extends IRenderer {
     }
   }
 
-  zoom(
+  private zoom(
     vertical: boolean,
     contentMode: RenderModeType = RenderModeType.RenderModeFit,
     width: number,
@@ -107,7 +108,7 @@ export class YUVCanvasRenderer extends IRenderer {
     }
   }
 
-  updateCanvas(
+  private updateCanvas(
     options: CanvasOptions = {
       frameWidth: 0,
       frameHeight: 0,
@@ -155,17 +156,15 @@ export class YUVCanvasRenderer extends IRenderer {
         options.clientHeight
       );
 
-      // @ts-ignore
-      this.canvas.style.zoom = scale.toString();
+      this.canvas.style.transform = `scale(${scale.toString()})`;
 
       if (transformItems.length > 0) {
-        let transform = `${transformItems.join(' ')}`;
-        this.canvas.style.transform = transform;
+        this.canvas.style.transform = `${transformItems.join(' ')}`;
       }
     }
   }
 
-  drawFrame(frame: ShareVideoFrame) {
+  public drawFrame(frame: ShareVideoFrame) {
     if (!this._container || !this._yuvCanvasSink) {
       return;
     }
@@ -174,14 +173,18 @@ export class YUVCanvasRenderer extends IRenderer {
     let frameHeight = frame.height;
 
     if (
-      this._videoFrame.width === 0 ||
+      this._videoFrame.yStride === 0 ||
       this._videoFrame.height === 0 ||
-      this._videoFrame.width != frame.width ||
+      this._videoFrame.yStride != frame.yStride ||
       this._videoFrame.height != frame.height
     ) {
-      this._videoFrame.yBuffer = new Uint8Array(frameWidth * frameHeight);
-      this._videoFrame.uBuffer = new Uint8Array((frameWidth * frameHeight) / 4);
-      this._videoFrame.vBuffer = new Uint8Array((frameWidth * frameHeight) / 4);
+      this._videoFrame.yBuffer = new Uint8Array(frame.yStride * frameHeight);
+      this._videoFrame.uBuffer = new Uint8Array(
+        (frame.yStride * frameHeight) / 4
+      );
+      this._videoFrame.vBuffer = new Uint8Array(
+        (frame.yStride * frameHeight) / 4
+      );
     }
 
     this._videoFrame.yBuffer.set(frame.yBuffer);
@@ -190,11 +193,12 @@ export class YUVCanvasRenderer extends IRenderer {
 
     this._videoFrame.width = frame.width;
     this._videoFrame.height = frame.height;
+    this._videoFrame.yStride = frame.yStride;
     this._videoFrame.rotation = frame.rotation;
 
     let options: CanvasOptions = {
-      frameWidth: frame.width,
-      frameHeight: frame.height,
+      frameWidth,
+      frameHeight,
       rotation: frame.rotation ? frame.rotation : 0,
       contentMode: this.contentMode,
       clientWidth: this._container.clientWidth,
@@ -208,16 +212,28 @@ export class YUVCanvasRenderer extends IRenderer {
       height: frameHeight,
       chromaWidth: frameWidth / 2,
       chromaHeight: frameHeight / 2,
+      cropLeft: frame.yStride - frameWidth,
     });
 
-    let y = YUVBuffer.lumaPlane(format, this._videoFrame.yBuffer);
-    let u = YUVBuffer.chromaPlane(format, this._videoFrame.uBuffer);
-    let v = YUVBuffer.chromaPlane(format, this._videoFrame.vBuffer);
-    let yuvBufferFrame = YUVBuffer.frame(format, y, u, v);
+    let yuvBufferFrame = YUVBuffer.frame(
+      format,
+      {
+        bytes: this._videoFrame.yBuffer,
+        stride: frame.yStride,
+      },
+      {
+        bytes: this._videoFrame.uBuffer,
+        stride: frame.yStride / 2,
+      },
+      {
+        bytes: this._videoFrame.vBuffer,
+        stride: frame.yStride / 2,
+      }
+    );
     this._yuvCanvasSink.drawFrame(yuvBufferFrame);
   }
 
-  refreshCanvas() {
+  public refreshCanvas() {
     if (this._cacheCanvasOptions) {
       this.zoom(
         this._cacheCanvasOptions.rotation === 90 ||

package/ts/Renderer/index.ts

@@ -0,0 +1,2 @@
+export * from './IRenderer';
+export * from './IRendererManager';

package/ts/Types.ts

@@ -1,20 +1,28 @@
-import { VideoSourceType } from './Private/AgoraBase';
-import { RenderModeType } from './Private/AgoraMediaBase';
-import { IRenderer } from './Renderer/IRenderer';
-import { RendererManager } from './Renderer/RendererManager';
+import { RenderModeType, VideoSourceType } from './Private/AgoraMediaBase';
+import { IRenderer, IRendererManager } from './Renderer';
 
 /**
  * @ignore
  */
-export interface AgoraEnvType {
+export interface AgoraEnvOptions {
   /**
    * @ignore
    */
-  enableLogging: boolean;
+  enableLogging?: boolean;
   /**
    * @ignore
    */
-  enableDebugLogging: boolean;
+  enableDebugLogging?: boolean;
+  /**
+   * @ignore
+   */
+  webEnvReady?: boolean;
+}
+
+/**
+ * @ignore
+ */
+export interface AgoraEnvType extends AgoraEnvOptions {
   /**
    * @ignore
    */
@@ -22,7 +30,7 @@ export interface AgoraEnvType {
   /**
    * @ignore
    */
-  AgoraRendererManager?: RendererManager;
+  AgoraRendererManager?: IRendererManager;
 }
 
 /**
@@ -169,6 +177,10 @@ export interface ShareVideoFrame {
    * @ignore
    */
   height: number;
+  /**
+   * @ignore
+   */
+  yStride: number;
   /**
    * @ignore
    */
@@ -217,25 +229,10 @@ export interface Result {
   callApiResult: any;
 }
 
-/**
- * @ignore
- */
-export enum CallBackModule {
-  /**
-   * @ignore
-   */
-  RTC = 0,
-  MPK,
-  OBSERVER,
-}
-
 /**
  * @ignore
  */
 export interface AgoraElectronBridge {
-  /**
-   * @ignore
-   */
   OnEvent(
     callbackName: string,
     callback: (
@@ -258,19 +255,42 @@ export interface AgoraElectronBridge {
 
   ReleaseEnv(): void;
 
+  ReleaseRenderer(): void;
+
   EnableVideoFrameCache(config: VideoFrameCacheConfig): void;
 
   DisableVideoFrameCache(config: VideoFrameCacheConfig): void;
 
   GetBuffer(ptr: number, length: number): Buffer;
 
+  /**
+   * @ignore
+   */
   GetVideoFrame(streamInfo: ShareVideoFrame): {
     ret: number;
+    /**
+     * @ignore
+     */
     isNewFrame: boolean;
+    /**
+     * @ignore
+     */
     yStride: number;
+    /**
+     * @ignore
+     */
     width: number;
+    /**
+     * @ignore
+     */
     height: number;
+    /**
+     * @ignore
+     */
     rotation: number;
+    /**
+     * @ignore
+     */
     timestamp: number;
   };
 

package/ts/Utils.ts

@@ -1,5 +1,4 @@
-import { VideoSourceType } from './Private/AgoraBase';
-import { RenderModeType } from './Private/AgoraMediaBase';
+import { VideoSourceType } from './Private/AgoraMediaBase';
 import {
   AgoraEnvType,
   FormatRendererVideoConfig,
@@ -107,7 +106,7 @@ export const formatConfigByVideoSourceType = (
   videoSourceType: VideoSourceType;
 } => {
   if (videoSourceType === undefined || videoSourceType === null) {
-    throw new Error(`must set videoSourceType`);
+    throw new Error(`must set videoSourceType:${videoSourceType}`);
   }
   let uid = originUid;
   let channelId = originChannelId;
@@ -123,13 +122,13 @@ export const formatConfigByVideoSourceType = (
       break;
     case VideoSourceType.VideoSourceRemote:
       if (!uid || !channelId) {
-        throw new Error(`must set uid:${uid}} and channelId:${channelId}`);
+        throw new Error(`must set uid:${uid} and channelId:${channelId}`);
       }
       break;
     case VideoSourceType.VideoSourceMediaPlayer:
       channelId = '';
       if (!uid) {
-        throw new Error(`must set uid(mediaPlayerId):${uid}}}`);
+        throw new Error(`must set mediaPlayerId:${uid}`);
       }
       break;
     default:
@@ -145,10 +144,8 @@ export const getDefaultRendererVideoConfig = (
   config: RendererVideoConfig
 ): FormatRendererVideoConfig => {
   const rendererOptions = Object.assign(
-    {
-      contentMode: RenderModeType.RenderModeFit,
-      mirror: false,
-    },
+    {},
+    AgoraEnv.AgoraRendererManager?.defaultRenderConfig?.rendererOptions,
     config.rendererOptions
   );
 
@@ -198,8 +195,6 @@ const agora = require('../build/Release/agora_node_ext');
 export const AgoraEnv: AgoraEnvType = {
   enableLogging: true,
   enableDebugLogging: false,
+  webEnvReady: true,
   AgoraElectronBridge: new agora.AgoraElectronBridge(),
 };
-
-// @ts-ignore
-(window || global).AgoraEnv = AgoraEnv;

package/types/AgoraSdk.d.ts

@@ -1,36 +1,38 @@
-import { IRtcEngineEx } from './Private/IAgoraRtcEngineEx';
-import { IMediaPlayerCacheManager } from './Private/IAgoraMediaPlayer';
-export * from './Private/AgoraBase';
-export * from './Private/AgoraMediaBase';
-export * from './Private/AgoraMediaPlayerTypes';
-export * from './Private/IAgoraLog';
-export * from './Private/IAgoraMediaEngine';
-export * from './Private/IAgoraMediaPlayer';
-export * from './Private/IAgoraMediaPlayerSource';
-export * from './Private/IAgoraMediaRecorder';
-export * from './Private/IAgoraMusicContentCenter';
-export * from './Private/IAgoraRhythmPlayer';
-export * from './Private/IAgoraRtcEngine';
-export * from './Private/IAgoraRtcEngineEx';
-export * from './Private/IAgoraSpatialAudio';
-export * from './Private/IAudioDeviceManager';
-export * from './Renderer/RendererManager';
-export * from './Types';
-export * from './Utils';
-/**
- * Creates an IRtcEngine object.
- * Currently, the Agora RTC SDK v4.x supports creating only one IRtcEngine object for each app.
- *
- * @returns
- * One IRtcEngine object.
- */
-export declare function createAgoraRtcEngine(): IRtcEngineEx;
-/**
- * Gets an IMediaPlayerCacheManager instance.
- * Make sure the IRtcEngine is initialized before you call this method.
- *
- * @returns
- * The IMediaPlayerCacheManager instance.
- */
-export declare function getMediaPlayerCacheManager(): IMediaPlayerCacheManager;
-export default createAgoraRtcEngine;
+import { IMediaPlayerCacheManager } from './Private/IAgoraMediaPlayer';
+import { IRtcEngineEx } from './Private/IAgoraRtcEngineEx';
+import { AgoraEnvOptions } from './Types';
+export * from './Private/AgoraBase';
+export * from './Private/AgoraMediaBase';
+export * from './Private/AgoraMediaPlayerTypes';
+export * from './Private/IAgoraLog';
+export * from './Private/IAgoraMediaEngine';
+export * from './Private/IAgoraMediaPlayer';
+export * from './Private/IAgoraMediaPlayerSource';
+export * from './Private/IAgoraMediaRecorder';
+export * from './Private/IAgoraMusicContentCenter';
+export * from './Private/IAgoraRhythmPlayer';
+export * from './Private/IAgoraRtcEngine';
+export * from './Private/IAgoraRtcEngineEx';
+export * from './Private/IAgoraSpatialAudio';
+export * from './Private/IAudioDeviceManager';
+export * from './Renderer';
+export * from './Types';
+export * from './Utils';
+/**
+ * Creates an IRtcEngine object.
+ * Currently, the Agora RTC SDK v4.x supports creating only one IRtcEngine object for each app.
+ *
+ * @returns
+ * One IRtcEngine object.
+ */
+export declare function createAgoraRtcEngine(options?: AgoraEnvOptions): IRtcEngineEx;
+/**
+ * Gets one IMediaPlayerCacheManager instance.
+ * When you successfully call this method, the SDK returns a media player cache manager instance. The cache manager is a singleton pattern. Therefore, multiple calls to this method returns the same instance.Make sure the IRtcEngine is initialized before you call this method.
+ *
+ * @returns
+ * The IMediaPlayerCacheManager instance.
+ */
+export declare function getMediaPlayerCacheManager(): IMediaPlayerCacheManager;
+export default createAgoraRtcEngine;
+//# sourceMappingURL=AgoraSdk.d.ts.map

package/types/AgoraSdk.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AgoraSdk.d.ts","sourceRoot":"","sources":["../ts/AgoraSdk.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,wBAAwB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAG3D,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG1C,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,iCAAiC,CAAC;AAChD,cAAc,qBAAqB,CAAC;AACpC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AAIxB;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,CAAC,EAAE,eAAe,GAAG,YAAY,CAG5E;AAED;;;;;;GAMG;AACH,wBAAgB,0BAA0B,IAAI,wBAAwB,CAErE;AAED,eAAe,oBAAoB,CAAC"}