agora-electron-sdk 4.2.0-dev.5 → 4.2.0-dev.8

package/ts/Private/impl/IAgoraMediaPlayerImpl.ts

@@ -531,6 +531,90 @@ export class IMediaPlayerImpl implements IMediaPlayer {
     return 'MediaPlayer_unregisterPlayerSourceObserver';
   }
 
+  registerAudioFrameObserver(
+    observer: IAudioPcmFrameSink,
+    mode: RawAudioFrameOpModeType = RawAudioFrameOpModeType.RawAudioFrameOpModeReadOnly
+  ): number {
+    const apiType = this.getApiTypeFromRegisterAudioFrameObserver(
+      observer,
+      mode
+    );
+    const jsonParams = {
+      observer: observer,
+      mode: mode,
+      toJSON: () => {
+        return {
+          mode: mode,
+        };
+      },
+    };
+    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
+    return jsonResults.result;
+  }
+
+  protected getApiTypeFromRegisterAudioFrameObserver(
+    observer: IAudioPcmFrameSink,
+    mode: RawAudioFrameOpModeType = RawAudioFrameOpModeType.RawAudioFrameOpModeReadOnly
+  ): string {
+    return 'MediaPlayer_registerAudioFrameObserver';
+  }
+
+  unregisterAudioFrameObserver(observer: IAudioPcmFrameSink): number {
+    const apiType = this.getApiTypeFromUnregisterAudioFrameObserver(observer);
+    const jsonParams = {
+      observer: observer,
+      toJSON: () => {
+        return {};
+      },
+    };
+    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
+    return jsonResults.result;
+  }
+
+  protected getApiTypeFromUnregisterAudioFrameObserver(
+    observer: IAudioPcmFrameSink
+  ): string {
+    return 'MediaPlayer_unregisterAudioFrameObserver';
+  }
+
+  registerVideoFrameObserver(observer: IMediaPlayerVideoFrameObserver): number {
+    const apiType = this.getApiTypeFromRegisterVideoFrameObserver(observer);
+    const jsonParams = {
+      observer: observer,
+      toJSON: () => {
+        return {};
+      },
+    };
+    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
+    return jsonResults.result;
+  }
+
+  protected getApiTypeFromRegisterVideoFrameObserver(
+    observer: IMediaPlayerVideoFrameObserver
+  ): string {
+    return 'MediaPlayer_registerVideoFrameObserver';
+  }
+
+  unregisterVideoFrameObserver(
+    observer: IMediaPlayerVideoFrameObserver
+  ): number {
+    const apiType = this.getApiTypeFromUnregisterVideoFrameObserver(observer);
+    const jsonParams = {
+      observer: observer,
+      toJSON: () => {
+        return {};
+      },
+    };
+    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
+    return jsonResults.result;
+  }
+
+  protected getApiTypeFromUnregisterVideoFrameObserver(
+    observer: IMediaPlayerVideoFrameObserver
+  ): string {
+    return 'MediaPlayer_unregisterVideoFrameObserver';
+  }
+
   registerMediaPlayerAudioSpectrumObserver(
     observer: IAudioSpectrumObserver,
     intervalInMS: number
@@ -870,90 +954,6 @@ export class IMediaPlayerImpl implements IMediaPlayer {
   ): string {
     return 'MediaPlayer_setSoundPositionParams';
   }
-
-  registerAudioFrameObserver(
-    observer: IAudioPcmFrameSink,
-    mode: RawAudioFrameOpModeType = RawAudioFrameOpModeType.RawAudioFrameOpModeReadOnly
-  ): number {
-    const apiType = this.getApiTypeFromRegisterAudioFrameObserver(
-      observer,
-      mode
-    );
-    const jsonParams = {
-      observer: observer,
-      mode: mode,
-      toJSON: () => {
-        return {
-          mode: mode,
-        };
-      },
-    };
-    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
-    return jsonResults.result;
-  }
-
-  protected getApiTypeFromRegisterAudioFrameObserver(
-    observer: IAudioPcmFrameSink,
-    mode: RawAudioFrameOpModeType = RawAudioFrameOpModeType.RawAudioFrameOpModeReadOnly
-  ): string {
-    return 'MediaPlayer_registerAudioFrameObserver';
-  }
-
-  unregisterAudioFrameObserver(observer: IAudioPcmFrameSink): number {
-    const apiType = this.getApiTypeFromUnregisterAudioFrameObserver(observer);
-    const jsonParams = {
-      observer: observer,
-      toJSON: () => {
-        return {};
-      },
-    };
-    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
-    return jsonResults.result;
-  }
-
-  protected getApiTypeFromUnregisterAudioFrameObserver(
-    observer: IAudioPcmFrameSink
-  ): string {
-    return 'MediaPlayer_unregisterAudioFrameObserver';
-  }
-
-  registerVideoFrameObserver(observer: IMediaPlayerVideoFrameObserver): number {
-    const apiType = this.getApiTypeFromRegisterVideoFrameObserver(observer);
-    const jsonParams = {
-      observer: observer,
-      toJSON: () => {
-        return {};
-      },
-    };
-    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
-    return jsonResults.result;
-  }
-
-  protected getApiTypeFromRegisterVideoFrameObserver(
-    observer: IMediaPlayerVideoFrameObserver
-  ): string {
-    return 'MediaPlayer_registerVideoFrameObserver';
-  }
-
-  unregisterVideoFrameObserver(
-    observer: IMediaPlayerVideoFrameObserver
-  ): number {
-    const apiType = this.getApiTypeFromUnregisterVideoFrameObserver(observer);
-    const jsonParams = {
-      observer: observer,
-      toJSON: () => {
-        return {};
-      },
-    };
-    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
-    return jsonResults.result;
-  }
-
-  protected getApiTypeFromUnregisterVideoFrameObserver(
-    observer: IMediaPlayerVideoFrameObserver
-  ): string {
-    return 'MediaPlayer_unregisterVideoFrameObserver';
-  }
 }
 
 // @ts-ignore

package/ts/Private/impl/IAgoraRtcEngineImpl.ts

@@ -5009,11 +5009,11 @@ export class IRtcEngineImpl implements IRtcEngine {
     return 'RtcEngine_startScreenCapture';
   }
 
-  startScreenCaptureDesktop(
+  startScreenCaptureBySourceType(
     sourceType: VideoSourceType,
     config: ScreenCaptureConfiguration
   ): number {
-    const apiType = this.getApiTypeFromStartScreenCaptureDesktop(
+    const apiType = this.getApiTypeFromStartScreenCaptureBySourceType(
       sourceType,
       config
     );
@@ -5031,11 +5031,11 @@ export class IRtcEngineImpl implements IRtcEngine {
     return jsonResults.result;
   }
 
-  protected getApiTypeFromStartScreenCaptureDesktop(
+  protected getApiTypeFromStartScreenCaptureBySourceType(
     sourceType: VideoSourceType,
     config: ScreenCaptureConfiguration
   ): string {
-    return 'RtcEngine_startScreenCaptureDesktop';
+    return 'RtcEngine_startScreenCaptureBySourceType';
   }
 
   updateScreenCapture(captureParams: ScreenCaptureParameters2): number {
@@ -5089,10 +5089,20 @@ export class IRtcEngineImpl implements IRtcEngine {
     return 'RtcEngine_setScreenCaptureScenario';
   }
 
-  stopScreenCapture(
-    sourceType: VideoSourceType = VideoSourceType.VideoSourceScreenPrimary
-  ): number {
-    const apiType = this.getApiTypeFromStopScreenCapture(sourceType);
+  stopScreenCapture(): number {
+    const apiType = this.getApiTypeFromStopScreenCapture();
+    const jsonParams = {};
+    const jsonResults = callIrisApi.call(this, apiType, jsonParams);
+    return jsonResults.result;
+  }
+
+  protected getApiTypeFromStopScreenCapture(): string {
+    return 'RtcEngine_stopScreenCapture';
+  }
+
+  stopScreenCaptureBySourceType(sourceType: VideoSourceType): number {
+    const apiType =
+      this.getApiTypeFromStopScreenCaptureBySourceType(sourceType);
     const jsonParams = {
       sourceType: sourceType,
       toJSON: () => {
@@ -5105,10 +5115,10 @@ export class IRtcEngineImpl implements IRtcEngine {
     return jsonResults.result;
   }
 
-  protected getApiTypeFromStopScreenCapture(
-    sourceType: VideoSourceType = VideoSourceType.VideoSourceScreenPrimary
+  protected getApiTypeFromStopScreenCaptureBySourceType(
+    sourceType: VideoSourceType
   ): string {
-    return 'RtcEngine_stopScreenCapture';
+    return 'RtcEngine_stopScreenCaptureBySourceType';
   }
 
   getCallId(): string {
@@ -6593,65 +6603,15 @@ export class IRtcEngineImpl implements IRtcEngine {
     return 'RtcEngine_enableInstantMediaRendering';
   }
 
-  getNtpTimeInMs(): number {
-    const apiType = this.getApiTypeFromGetNtpTimeInMs();
+  getNtpWallTimeInMs(): number {
+    const apiType = this.getApiTypeFromGetNtpWallTimeInMs();
     const jsonParams = {};
     const jsonResults = callIrisApi.call(this, apiType, jsonParams);
     return jsonResults.result;
   }
 
-  protected getApiTypeFromGetNtpTimeInMs(): string {
-    return 'RtcEngine_getNtpTimeInMs';
-  }
-
-  destroyRendererByView(view: any): void {
-    const apiType = this.getApiTypeFromDestroyRendererByView(view);
-    const jsonParams = {
-      view: view,
-      toJSON: () => {
-        return {
-          view: view,
-        };
-      },
-    };
-    callIrisApi.call(this, apiType, jsonParams);
-  }
-
-  protected getApiTypeFromDestroyRendererByView(view: any): string {
-    return 'RtcEngine_destroyRendererByView';
-  }
-
-  destroyRendererByConfig(
-    sourceType: VideoSourceType,
-    channelId?: string,
-    uid: number = 0
-  ): void {
-    const apiType = this.getApiTypeFromDestroyRendererByConfig(
-      sourceType,
-      channelId,
-      uid
-    );
-    const jsonParams = {
-      sourceType: sourceType,
-      channelId: channelId,
-      uid: uid,
-      toJSON: () => {
-        return {
-          sourceType: sourceType,
-          channelId: channelId,
-          uid: uid,
-        };
-      },
-    };
-    callIrisApi.call(this, apiType, jsonParams);
-  }
-
-  protected getApiTypeFromDestroyRendererByConfig(
-    sourceType: VideoSourceType,
-    channelId?: string,
-    uid: number = 0
-  ): string {
-    return 'RtcEngine_destroyRendererByConfig';
+  protected getApiTypeFromGetNtpWallTimeInMs(): string {
+    return 'RtcEngine_getNtpWallTimeInMs';
   }
 
   getAudioDeviceManager(): IAudioDeviceManager {
@@ -6750,6 +6710,56 @@ export class IRtcEngineImpl implements IRtcEngine {
     return 'RtcEngine_setMaxMetadataSize';
   }
 
+  destroyRendererByView(view: any): void {
+    const apiType = this.getApiTypeFromDestroyRendererByView(view);
+    const jsonParams = {
+      view: view,
+      toJSON: () => {
+        return {
+          view: view,
+        };
+      },
+    };
+    callIrisApi.call(this, apiType, jsonParams);
+  }
+
+  protected getApiTypeFromDestroyRendererByView(view: any): string {
+    return 'RtcEngine_destroyRendererByView';
+  }
+
+  destroyRendererByConfig(
+    sourceType: VideoSourceType,
+    channelId?: string,
+    uid: number = 0
+  ): void {
+    const apiType = this.getApiTypeFromDestroyRendererByConfig(
+      sourceType,
+      channelId,
+      uid
+    );
+    const jsonParams = {
+      sourceType: sourceType,
+      channelId: channelId,
+      uid: uid,
+      toJSON: () => {
+        return {
+          sourceType: sourceType,
+          channelId: channelId,
+          uid: uid,
+        };
+      },
+    };
+    callIrisApi.call(this, apiType, jsonParams);
+  }
+
+  protected getApiTypeFromDestroyRendererByConfig(
+    sourceType: VideoSourceType,
+    channelId?: string,
+    uid: number = 0
+  ): string {
+    return 'RtcEngine_destroyRendererByConfig';
+  }
+
   unregisterAudioEncodedFrameObserver(
     observer: IAudioEncodedFrameObserver
   ): number {

package/ts/Private/internal/IrisApiEngine.ts

@@ -317,7 +317,6 @@ function handleEvent(...[event, data, buffers]: any) {
   let processor: EventProcessor = EVENT_PROCESSORS.IRtcEngineEventHandler;
 
   Object.values(EVENT_PROCESSORS).some((it) => {
-    // @ts-ignore
     const p = it as EventProcessor;
     if (
       _event.startsWith(p.suffix) &&
@@ -421,7 +420,6 @@ export function callIrisApi(funcName: string, params: any): any {
           buffers.push(params.data);
           break;
         case 'RtcEngine_destroyMediaPlayer':
-          // @ts-ignore
           params.mediaPlayerId = params.media_player.getMediaPlayerId();
           params.toJSON = function () {
             return { playerId: params.mediaPlayerId };

package/ts/Private/internal/RtcEngineExInternal.ts

@@ -1,6 +1,5 @@
 import { createCheckers } from 'ts-interface-checker';
 
-import { RendererManager } from '../../Renderer/RendererManager';
 import { Channel } from '../../Types';
 import { AgoraEnv } from '../../Utils';
 
@@ -61,11 +60,6 @@ import {
 import AgoraBaseTI from '../ti/AgoraBase-ti';
 import AgoraMediaBaseTI from '../ti/AgoraMediaBase-ti';
 import IAgoraRtcEngineTI from '../ti/IAgoraRtcEngine-ti';
-const checkers = createCheckers(
-  AgoraBaseTI,
-  AgoraMediaBaseTI,
-  IAgoraRtcEngineTI
-);
 
 import { AudioDeviceManagerInternal } from './AudioDeviceManagerInternal';
 import { DeviceEventEmitter, EVENT_TYPE, callIrisApi } from './IrisApiEngine';
@@ -76,6 +70,12 @@ import { MediaRecorderInternal } from './MediaRecorderInternal';
 import { MusicContentCenterInternal } from './MusicContentCenterInternal';
 import type { EmitterSubscription } from './emitter/EventEmitter';
 
+const checkers = createCheckers(
+  AgoraBaseTI,
+  AgoraMediaBaseTI,
+  IAgoraRtcEngineTI
+);
+
 export class RtcEngineExInternal extends IRtcEngineExImpl {
   static _event_handlers: IRtcEngineEventHandler[] = [];
   static _direct_cdn_streaming_event_handler: IDirectCdnStreamingEventHandler[] =
@@ -107,8 +107,11 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
   >();
 
   initialize(context: RtcEngineContext): number {
-    AgoraEnv.AgoraRendererManager = new RendererManager();
-    AgoraEnv.AgoraRendererManager.enableRender();
+    if (AgoraEnv.webEnvReady) {
+      const { RendererManager } = require('../../Renderer/RendererManager');
+      AgoraEnv.AgoraRendererManager = new RendererManager();
+    }
+    AgoraEnv.AgoraRendererManager?.enableRender();
     const ret = super.initialize(context);
     callIrisApi.call(this, 'RtcEngine_setAppType', {
       appType: 3,
@@ -117,6 +120,7 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
   }
 
   release(sync: boolean = false) {
+    AgoraEnv.AgoraElectronBridge.ReleaseRenderer();
     AgoraEnv.AgoraRendererManager?.clear();
     AgoraEnv.AgoraRendererManager = undefined;
     this._audio_device_manager.release();
@@ -478,15 +482,15 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
     return 'RtcEngineEx_createDataStreamEx2';
   }
 
-  protected getApiTypeFromStartScreenCaptureDesktop(
+  protected getApiTypeFromStartScreenCaptureBySourceType(
     sourceType: VideoSourceType,
     config: ScreenCaptureConfiguration
   ): string {
     return 'RtcEngine_startScreenCapture2';
   }
 
-  protected getApiTypeFromStopScreenCapture(
-    sourceType: VideoSourceType = VideoSourceType.VideoSourceScreenPrimary
+  protected getApiTypeFromStopScreenCaptureBySourceType(
+    sourceType: VideoSourceType
   ): string {
     return 'RtcEngine_stopScreenCapture2';
   }
@@ -583,13 +587,20 @@ export class RtcEngineExInternal extends IRtcEngineExImpl {
   }
 
   setupLocalVideo(canvas: VideoCanvas): number {
-    const {
+    let {
       sourceType = VideoSourceType.VideoSourceCamera,
       uid,
+      mediaPlayerId,
       view,
       renderMode,
       mirrorMode,
     } = canvas;
+    if (
+      sourceType === VideoSourceType.VideoSourceMediaPlayer &&
+      mediaPlayerId !== undefined
+    ) {
+      uid = mediaPlayerId;
+    }
     return (
       AgoraEnv.AgoraRendererManager?.setupLocalVideo({
         videoSourceType: sourceType,

package/ts/Renderer/AgoraView.ts

@@ -82,6 +82,7 @@ export default class AgoraView extends HTMLElement {
       this.removeAttribute(VIDEO_SOURCE_TYPE_STRING);
     }
   }
+
   get uid(): number {
     const number = Number(this.getAttribute(UID_STRING));
     return isNaN(number) ? 0 : number;

package/ts/Renderer/IRenderer.ts

@@ -8,32 +8,30 @@ export type RenderFailCallback =
   | undefined
   | null;
 
-export class IRenderer {
+export abstract class IRenderer {
   parentElement?: HTMLElement;
   canvas?: HTMLCanvasElement;
   event?: EventEmitter;
   contentMode = RenderModeType.RenderModeFit;
   mirror?: boolean;
 
-  snapshot(fileType = 'image/png') {
+  public snapshot(fileType = 'image/png') {
     if (this.canvas && this.canvas.toDataURL) {
       return this.canvas.toDataURL(fileType);
     }
     return null;
   }
 
-  bind(element: HTMLElement) {
+  public bind(element: HTMLElement) {
     if (!element) {
       throw new Error('You have pass a element');
     }
     this.parentElement = element;
   }
 
-  unbind() {
-    throw new Error('You have to declare your own custom render');
-  }
+  abstract unbind(): void;
 
-  equalsElement(element: Element): boolean {
+  public equalsElement(element: Element): boolean {
     if (!element) {
       throw new Error('You have pass a element');
     }
@@ -43,11 +41,9 @@ export class IRenderer {
     return element === this.parentElement;
   }
 
-  drawFrame(imageData: ShareVideoFrame) {
-    throw new Error('You have to declare your own custom render');
-  }
+  abstract drawFrame(imageData: ShareVideoFrame): void;
 
-  setRenderOption({ contentMode, mirror }: RendererOptions) {
+  public setRenderOption({ contentMode, mirror }: RendererOptions) {
     this.contentMode = contentMode ?? RenderModeType.RenderModeFit;
     this.mirror = mirror;
     Object.assign(this.parentElement!.style, {
@@ -55,7 +51,5 @@ export class IRenderer {
     });
   }
 
-  refreshCanvas() {
-    throw new Error('You have to declare your own custom render');
-  }
+  abstract refreshCanvas(): void;
 }

package/ts/Renderer/IRendererManager.ts

@@ -0,0 +1,35 @@
+import { RenderModeType, VideoSourceType } from '../Private/AgoraMediaBase';
+import { Channel, RendererVideoConfig } from '../Types';
+
+/**
+ * @ignore
+ */
+export abstract class IRendererManager {
+  abstract get defaultRenderConfig(): RendererVideoConfig;
+
+  abstract enableRender(enabled?: boolean): void;
+
+  abstract clear(): void;
+
+  abstract setupVideo(rendererVideoConfig: RendererVideoConfig): number;
+
+  abstract setupLocalVideo(rendererConfig: RendererVideoConfig): number;
+
+  abstract setupRemoteVideo(rendererConfig: RendererVideoConfig): number;
+
+  abstract setRenderOptionByConfig(rendererConfig: RendererVideoConfig): number;
+
+  abstract destroyRendererByView(view: Element): void;
+
+  abstract destroyRenderersByConfig(
+    videoSourceType: VideoSourceType,
+    channelId?: Channel,
+    uid?: number
+  ): void;
+
+  abstract setRenderOption(
+    view: HTMLElement,
+    contentMode?: RenderModeType,
+    mirror?: boolean
+  ): void;
+}

package/ts/Renderer/RendererManager.ts

@@ -23,14 +23,15 @@ import {
   logWarn,
 } from '../Utils';
 
-import GlRenderer from './GlRenderer';
 import { IRenderer, RenderFailCallback } from './IRenderer';
+import { IRendererManager } from './IRendererManager';
+import WebGLRenderer from './WebGLRenderer';
 import { YUVCanvasRenderer } from './YUVCanvasRenderer';
 
 /**
  * @ignore
  */
-export class RendererManager {
+export class RendererManager extends IRendererManager {
   /**
    * @ignore
    */
@@ -58,6 +59,7 @@ export class RendererManager {
   defaultRenderConfig: RendererVideoConfig;
 
   constructor() {
+    super();
     this.renderFps = 10;
     this.renderers = new Map();
     this.renderMode = this.checkWebglEnv()
@@ -183,7 +185,7 @@ export class RendererManager {
     const render = this.bindHTMLElementToRender(formatConfig, view!);
 
     // render config
-    render.setRenderOption(rendererOptions);
+    render?.setRenderOption(rendererOptions);
 
     // enable iris videoFrame
     this.enableVideoFrameCache({
@@ -305,7 +307,6 @@ export class RendererManager {
    * @ignore
    */
   public clear(): void {
-    AgoraEnv.AgoraElectronBridge.ReleaseRenderer();
     this.stopRender();
     this.removeAllRenderer();
   }
@@ -423,7 +424,7 @@ export class RendererManager {
     if (this.renderMode === RENDER_MODE.SOFTWARE) {
       return new YUVCanvasRenderer();
     } else {
-      return new GlRenderer(failCallback);
+      return new WebGLRenderer(failCallback);
     }
   }
 
@@ -458,7 +459,7 @@ export class RendererManager {
   private bindHTMLElementToRender(
     config: FormatRendererVideoConfig,
     view: HTMLElement
-  ): IRenderer {
+  ): IRenderer | undefined {
     this.ensureRendererConfig(config);
     const renders = this.getRenderers(config);
     const filterRenders =
@@ -611,14 +612,13 @@ export class RendererManager {
   /**
    * @ignore
    */
-  private updateVideoFrameCacheInMap(
+  public updateVideoFrameCacheInMap(
     config: VideoFrameCacheConfig,
     shareVideoFrame: ShareVideoFrame
   ): void {
     let rendererConfigMap = this.ensureRendererConfig(config);
     rendererConfigMap
-      ? // @ts-ignore
-        Object.assign(rendererConfigMap.get(config.uid), {
+      ? Object.assign(rendererConfigMap.get(config.uid) ?? {}, {
           shareVideoFrame,
         })
       : logWarn(