agora-electron-sdk 4.2.6 → 4.3.0-dev.1

package/ts/Renderer/YUVCanvasRenderer/index.ts

@@ -1,217 +1,64 @@
-import isEqual from 'lodash.isequal';
-
-import { RenderModeType } from '../../Private/AgoraMediaBase';
-import { CanvasOptions, ShareVideoFrame } from '../../Types';
+import { VideoFrame } from '../../Private/AgoraMediaBase';
 import { IRenderer } from '../IRenderer';
 
 const YUVBuffer = require('yuv-buffer');
 const YUVCanvas = require('yuv-canvas');
 
 export class YUVCanvasRenderer extends IRenderer {
-  private _cacheCanvasOptions?: CanvasOptions;
-  private _yuvCanvasSink?: any;
-  private _videoFrame: ShareVideoFrame;
-
-  constructor() {
-    super();
-    this._videoFrame = {
-      rotation: 0,
-      width: 0,
-      height: 0,
-      yStride: 0,
-      yBuffer: new Uint8Array(0),
-      uBuffer: new Uint8Array(0),
-      vBuffer: new Uint8Array(0),
-    };
-  }
+  private frameSink?: any;
 
   public override bind(element: HTMLElement) {
     super.bind(element);
-    this._yuvCanvasSink = YUVCanvas.attach(this.canvas, {
+    this.frameSink = YUVCanvas.attach(this.canvas, {
       webGL: false,
     });
   }
 
-  public override unbind() {
-    if (this._yuvCanvasSink && this._yuvCanvasSink?.loseContext) {
-      this._yuvCanvasSink?.loseContext();
-    }
-    super.unbind();
-  }
-
-  public override drawFrame(frame: ShareVideoFrame) {
-    if (!this.container || !this._yuvCanvasSink) {
-      return;
-    }
-
-    let frameWidth = frame.width;
-    let frameHeight = frame.height;
-
-    if (
-      this._videoFrame.yStride === 0 ||
-      this._videoFrame.height === 0 ||
-      this._videoFrame.yStride != frame.yStride ||
-      this._videoFrame.height != frame.height
-    ) {
-      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);
-    this._videoFrame.uBuffer.set(frame.uBuffer);
-    this._videoFrame.vBuffer.set(frame.vBuffer);
-
-    this._videoFrame.width = frame.width;
-    this._videoFrame.height = frame.height;
-    this._videoFrame.yStride = frame.yStride;
-    this._videoFrame.rotation = frame.rotation;
-
-    let options: CanvasOptions = {
-      frameWidth,
-      frameHeight,
-      rotation: frame.rotation ? frame.rotation : 0,
-      contentMode: this.contentMode,
-      clientWidth: this.container.clientWidth,
-      clientHeight: this.container.clientHeight,
-    };
-
-    this.updateCanvas(options);
-
-    let format = YUVBuffer.format({
-      width: frameWidth,
-      height: frameHeight,
-      chromaWidth: frameWidth / 2,
-      chromaHeight: frameHeight / 2,
-      cropLeft: frame.yStride - frameWidth,
-    });
-
-    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,
-      }
+  public override drawFrame({
+    width,
+    height,
+    yStride,
+    uStride,
+    vStride,
+    yBuffer,
+    uBuffer,
+    vBuffer,
+    rotation,
+  }: VideoFrame) {
+    this.rotateCanvas({ width, height, rotation });
+    this.updateRenderMode();
+
+    if (!this.frameSink) return;
+
+    this.frameSink.drawFrame(
+      YUVBuffer.frame(
+        YUVBuffer.format({
+          width,
+          height,
+          chromaWidth: width! / 2,
+          chromaHeight: height! / 2,
+          cropLeft: yStride! - width!,
+        }),
+        {
+          bytes: yBuffer,
+          stride: yStride,
+        },
+        {
+          bytes: uBuffer,
+          stride: uStride,
+        },
+        {
+          bytes: vBuffer,
+          stride: vStride,
+        }
+      )
     );
-    this._yuvCanvasSink.drawFrame(yuvBufferFrame);
-  }
-
-  public override refreshCanvas() {
-    if (this._cacheCanvasOptions) {
-      this.zoom(
-        this._cacheCanvasOptions.rotation === 90 ||
-          this._cacheCanvasOptions.rotation === 270,
-        this._cacheCanvasOptions.contentMode,
-        this._cacheCanvasOptions.frameWidth,
-        this._cacheCanvasOptions.frameHeight,
-        this._cacheCanvasOptions.clientWidth,
-        this._cacheCanvasOptions.clientHeight
-      );
-    }
-  }
-
-  private updateCanvas(
-    options: CanvasOptions = {
-      frameWidth: 0,
-      frameHeight: 0,
-      rotation: 0,
-      contentMode: RenderModeType.RenderModeHidden,
-      clientWidth: 0,
-      clientHeight: 0,
-    }
-  ) {
-    if (this._cacheCanvasOptions) {
-      if (isEqual(this._cacheCanvasOptions, options)) {
-        return;
-      }
-    }
-
-    this._cacheCanvasOptions = Object.assign({}, options);
-
-    if (this.canvas) {
-      if (options.rotation === 0 || options.rotation === 180) {
-        this.canvas.width = options.frameWidth;
-        this.canvas.height = options.frameHeight;
-        Object.assign(this.canvas.style, {
-          'width': options.frameWidth + 'px',
-          'height': options.frameHeight + 'px',
-          'object-fit': 'cover',
-        });
-      } else if (options.rotation === 90 || options.rotation === 270) {
-        this.canvas.height = options.frameWidth;
-        this.canvas.width = options.frameHeight;
-      } else {
-        throw new Error(
-          'Invalid value for rotation. Only support 0, 90, 180, 270'
-        );
-      }
-
-      let transformItems = [];
-      transformItems.push(`rotateZ(${options.rotation}deg)`);
-
-      let scale = this.zoom(
-        options.rotation === 90 || options.rotation === 270,
-        options.contentMode,
-        options.frameWidth,
-        options.frameHeight,
-        options.clientWidth,
-        options.clientHeight
-      );
-
-      this.canvas.style.transform = `scale(${scale.toString()})`;
-
-      if (transformItems.length > 0) {
-        this.canvas.style.transform += ` ${transformItems.join(' ')}`;
-      }
-    }
   }
 
-  private zoom(
-    vertical: boolean,
-    contentMode: RenderModeType = RenderModeType.RenderModeFit,
-    width: number,
-    height: number,
-    clientWidth: number,
-    clientHeight: number
-  ): number {
-    let localRatio = clientWidth / clientHeight;
-    let tempRatio = width / height;
-    if (isNaN(localRatio) || isNaN(tempRatio)) {
-      return 1;
-    }
+  protected override rotateCanvas({ width, height, rotation }: VideoFrame) {
+    super.rotateCanvas({ width, height, rotation });
 
-    if (contentMode === RenderModeType.RenderModeHidden) {
-      if (vertical) {
-        return clientHeight / clientWidth < width / height
-          ? clientWidth / height
-          : clientHeight / width;
-      } else {
-        return clientWidth / clientHeight > width / height
-          ? clientWidth / width
-          : clientHeight / height;
-      }
-    } else {
-      if (vertical) {
-        return clientHeight / clientWidth < width / height
-          ? clientHeight / width
-          : clientWidth / height;
-      } else {
-        return clientWidth / clientHeight > width / height
-          ? clientHeight / height
-          : clientWidth / width;
-      }
-    }
+    if (!this.canvas) return;
+    this.canvas.style.transform += ` rotateZ(${rotation}deg)`;
   }
 }

package/ts/Types.ts

@@ -1,5 +1,7 @@
-import { RenderModeType, VideoSourceType } from './Private/AgoraMediaBase';
-import { IRenderer, IRendererManager } from './Renderer';
+import { VideoCanvas } from './Private/AgoraBase';
+import { VideoFrame } from './Private/AgoraMediaBase';
+import { RtcConnection } from './Private/IAgoraRtcEngineEx';
+import { IRendererManager } from './Renderer';
 
 /**
  * @ignore
@@ -36,51 +38,7 @@ export interface AgoraEnvType extends AgoraEnvOptions {
 /**
  * @ignore
  */
-export interface CanvasOptions {
-  /**
-   * @ignore
-   */
-  frameWidth: number;
-  /**
-   * @ignore
-   */
-  frameHeight: number;
-  /**
-   * @ignore
-   */
-  rotation: number;
-  /**
-   * @ignore
-   */
-  contentMode: RenderModeType;
-  /**
-   * @ignore
-   */
-  clientWidth: number;
-  /**
-   * @ignore
-   */
-  clientHeight: number;
-}
-
-/**
- * @ignore
- */
-export interface RendererOptions {
-  /**
-   * @ignore
-   */
-  contentMode?: RenderModeType;
-  /**
-   * @ignore
-   */
-  mirror?: boolean;
-}
-
-/**
- * @ignore
- */
-export enum RENDER_MODE {
+export enum RendererType {
   /**
    * @ignore
    */
@@ -91,129 +49,14 @@ export enum RENDER_MODE {
   SOFTWARE = 2,
 }
 
-export type User = 'local' | 'videoSource' | number | string;
+export type RENDER_MODE = RendererType;
 
-export type Channel = '' | string;
+export type RendererContext = VideoCanvas & RtcConnection;
 
-/**
- * @ignore
- */
-export interface RendererVideoConfig {
-  /**
-   * @ignore
-   */
-  videoSourceType?: VideoSourceType;
-  /**
-   * @ignore
-   */
-  channelId?: Channel;
-  /**
-   * @ignore
-   */
-  uid?: number;
-  /**
-   * @ignore
-   */
-  view?: HTMLElement;
-  /**
-   * @ignore
-   */
-  rendererOptions?: RendererOptions;
-}
-
-/**
- * @ignore
- */
-export interface FormatRendererVideoConfig {
-  /**
-   * @ignore
-   */
-  videoSourceType: VideoSourceType;
-  /**
-   * @ignore
-   */
-  channelId: Channel;
-  /**
-   * @ignore
-   */
-  uid: number;
-  /**
-   * @ignore
-   */
-  view?: HTMLElement;
-  /**
-   * @ignore
-   */
-  rendererOptions: RendererOptions;
-}
-
-/**
- * @ignore
- */
-export interface VideoFrameCacheConfig {
-  /**
-   * @ignore
-   */
-  uid: number;
-  /**
-   * @ignore
-   */
-  channelId: string;
-  /**
-   * @ignore
-   */
-  videoSourceType: VideoSourceType;
-}
-
-/**
- * @ignore
- */
-export interface ShareVideoFrame {
-  /**
-   * @ignore
-   */
-  width: number;
-  /**
-   * @ignore
-   */
-  height: number;
-  /**
-   * @ignore
-   */
-  yStride: number;
-  /**
-   * @ignore
-   */
-  yBuffer: Buffer | Uint8Array;
-  /**
-   * @ignore
-   */
-  uBuffer: Buffer | Uint8Array;
-  /**
-   * @ignore
-   */
-  vBuffer: Buffer | Uint8Array;
-  /**
-   * @ignore
-   */
-  mirror?: boolean;
-  /**
-   * @ignore
-   */
-  rotation?: number;
-  /**
-   * @ignore
-   */
-  uid?: number;
-  /**
-   * @ignore
-   */
-  channelId?: string;
-  /**
-   * @ignore
-   */
-  videoSourceType?: VideoSourceType;
-}
+export type RendererCacheContext = Pick<
+  RendererContext,
+  'channelId' | 'uid' | 'sourceType'
+>;
 
 /**
  * @ignore
@@ -260,20 +103,18 @@ export interface AgoraElectronBridge {
 
   ReleaseRenderer(): void;
 
-  EnableVideoFrameCache(config: VideoFrameCacheConfig): void;
+  EnableVideoFrameCache(context: RendererCacheContext): void;
 
-  DisableVideoFrameCache(config: VideoFrameCacheConfig): void;
+  DisableVideoFrameCache(context: RendererCacheContext): void;
 
   GetBuffer(ptr: number, length: number): Buffer;
 
-  GetVideoFrame(streamInfo: ShareVideoFrame): {
+  GetVideoFrame(
+    context: RendererCacheContext,
+    videoFrame: VideoFrame
+  ): {
     ret: number;
     isNewFrame: boolean;
-    yStride: number;
-    width: number;
-    height: number;
-    rotation: number;
-    timestamp: number;
   };
 
   sendMsg: (
@@ -283,21 +124,3 @@ export interface AgoraElectronBridge {
     bufferCount?: number
   ) => Result;
 }
-
-/**
- * @ignore
- */
-export interface RenderConfig {
-  /**
-   * @ignore
-   */
-  renders: IRenderer[];
-  /**
-   * @ignore
-   */
-  shareVideoFrame: ShareVideoFrame;
-}
-
-export type UidMap = Map<number, RenderConfig>;
-export type ChannelIdMap = Map<Channel, UidMap>;
-export type RenderMap = Map<VideoSourceType, ChannelIdMap>;

package/ts/Utils.ts

@@ -1,9 +1,4 @@
-import { VideoSourceType } from './Private/AgoraMediaBase';
-import {
-  AgoraEnvType,
-  FormatRendererVideoConfig,
-  RendererVideoConfig,
-} from './Types';
+import { AgoraEnvType } from './Types';
 
 /**
  * @ignore
@@ -14,15 +9,6 @@ export const TAG = '[Agora]: ';
  */
 export const DEBUG_TAG = '[Agora Debug]: ';
 
-/**
- * @ignore
- */
-export const deprecate = (originApi?: string, replaceApi?: string) =>
-  logError(
-    `${TAG} This method ${originApi} will be deprecated soon. `,
-    replaceApi ? `Please use ${replaceApi} instead` : ''
-  );
-
 /**
  * @ignore
  */
@@ -50,7 +36,7 @@ export const logInfo = (msg: string, ...optParams: any[]) => {
   if (!AgoraEnv.enableLogging) {
     return;
   }
-  console.log(`${TAG} ${msg}`, ...optParams);
+  console.info(`${TAG} ${msg}`, ...optParams);
 };
 
 /**
@@ -60,23 +46,7 @@ export const logDebug = (msg: string, ...optParams: any[]) => {
   if (!AgoraEnv.enableLogging || !AgoraEnv.enableDebugLogging) {
     return;
   }
-  console.warn(`${DEBUG_TAG} ${msg}`, ...optParams);
-};
-
-/**
- * @ignore
- */
-export const parseJSON = (jsonString: string) => {
-  if (jsonString === '') {
-    return jsonString;
-  }
-  let obj;
-  try {
-    obj = JSON.parse(jsonString);
-  } catch (error) {
-    logError('parseJSON', error);
-  }
-  return obj || jsonString;
+  console.debug(`${DEBUG_TAG} ${msg}`, ...optParams);
 };
 
 /**
@@ -93,71 +63,6 @@ export const objsKeysToLowerCase = (array: Array<any>) => {
   });
 };
 
-/**
- * @ignore
- */
-export const formatConfigByVideoSourceType = (
-  videoSourceType?: VideoSourceType,
-  originChannelId = '',
-  originUid = 0
-): {
-  uid: number;
-  channelId: string;
-  videoSourceType: VideoSourceType;
-} => {
-  if (videoSourceType === undefined || videoSourceType === null) {
-    throw new Error(`must set videoSourceType:${videoSourceType}`);
-  }
-  let uid = originUid;
-  let channelId = originChannelId;
-
-  switch (videoSourceType) {
-    case VideoSourceType.VideoSourceCamera:
-    case VideoSourceType.VideoSourceCameraPrimary:
-    case VideoSourceType.VideoSourceScreen:
-    case VideoSourceType.VideoSourceScreenSecondary:
-    case VideoSourceType.VideoSourceTranscoded:
-      channelId = '';
-      uid = 0;
-      break;
-    case VideoSourceType.VideoSourceRemote:
-      if (!uid || !channelId) {
-        throw new Error(`must set uid:${uid} and channelId:${channelId}`);
-      }
-      break;
-    case VideoSourceType.VideoSourceMediaPlayer:
-      channelId = '';
-      if (!uid) {
-        throw new Error(`must set mediaPlayerId:${uid}`);
-      }
-      break;
-    default:
-      break;
-  }
-  return { uid, channelId, videoSourceType };
-};
-
-/**
- * @ignore
- */
-export const getDefaultRendererVideoConfig = (
-  config: RendererVideoConfig
-): FormatRendererVideoConfig => {
-  const rendererOptions = Object.assign(
-    {},
-    AgoraEnv.AgoraRendererManager?.defaultRenderConfig?.rendererOptions,
-    config.rendererOptions
-  );
-
-  const { uid, channelId, videoSourceType } = formatConfigByVideoSourceType(
-    config.videoSourceType,
-    config.channelId,
-    config.uid
-  );
-
-  return { ...config, uid, channelId, videoSourceType, rendererOptions };
-};
-
 /**
  * @ignore
  */
@@ -187,7 +92,38 @@ function copyProperties<T>(target: T, source: any) {
   }
 }
 
-const agora = require('../build/Release/agora_node_ext');
+/**
+ * @ignore
+ */
+export function isSupportWebGL(): boolean {
+  let flag = false;
+  const canvas: HTMLCanvasElement = document.createElement('canvas');
+  try {
+    const getContext = (
+      contextNames = ['webgl2', 'webgl', 'experimental-webgl']
+    ): WebGLRenderingContext | WebGLRenderingContext | null => {
+      for (let i = 0; i < contextNames.length; i++) {
+        const contextName = contextNames[i]!;
+        const context = canvas?.getContext(contextName);
+        if (context) {
+          return context as WebGLRenderingContext | WebGLRenderingContext;
+        }
+      }
+      return null;
+    };
+    let gl = getContext();
+    flag = !!gl;
+    gl?.getExtension('WEBGL_lose_context')?.loseContext();
+    gl = null;
+    logInfo('Your browser support webGL');
+  } catch (e) {
+    logWarn('Your browser may not support webGL');
+    flag = false;
+  }
+  return flag;
+}
+
+const AgoraNode = require('../build/Release/agora_node_ext');
 
 /**
  * @ignore
@@ -196,5 +132,5 @@ export const AgoraEnv: AgoraEnvType = {
   enableLogging: true,
   enableDebugLogging: false,
   webEnvReady: true,
-  AgoraElectronBridge: new agora.AgoraElectronBridge(),
+  AgoraElectronBridge: new AgoraNode.AgoraElectronBridge(),
 };