@tencentcloud/roomkit-web-vue3/src/TUIRoom/services/function/virtualBackground.ts

<h1 align="center"> TUIRoomKit</h1> Conference (TUIRoomKit) is a product suitable for multi-person audio and video conversation scenarios such as business meetings, webinars, and online education. By integrating this product, you can add room management,

import { isElectron, isWeChat } from '../../utils/environment';
import { IRoomService } from '../types';

interface IVirtualBackground {
  dispose(): void;
  initVirtualBackground(): Promise<void>;
  toggleVirtualBackground(enabled: boolean): Promise<void>;
  toggleTestVirtualBackground(enabled: boolean): Promise<void>;
}

export class VirtualBackground implements IVirtualBackground {
  private service: IRoomService;
  private virtualBackgroundPluginReady = false;

  private get trtcCloud() {
    return this.service.roomEngine?.instance?.getTRTCCloud();
  }

  constructor(service: IRoomService) {
    this.service = service;
    if (isElectron || isWeChat) return;
    this.bindEvent();
  }

  private bindEvent() {
    this.service.lifeCycleManager.on('unmount', this.handleUnmount);
  }

  private handleUnmount = async () => {
    await this.toggleVirtualBackground(false);
    await this.toggleTestVirtualBackground(false);
  };

  public dispose() {
    this.service.lifeCycleManager.off('unmount', this.handleUnmount);
  }

  public async initVirtualBackground(): Promise<void> {
    if (
      !this.virtualBackgroundPluginReady &&
      this.trtcCloud?.useVirtualBackground
    ) {
      await this.trtcCloud.useVirtualBackground();
      this.virtualBackgroundPluginReady = true;
    }
  }

  public async toggleVirtualBackground(enabled: boolean): Promise<void> {
    await this.initVirtualBackground();
    const { sdkAppId, userId, userSig } = this.service.basicStore;
    const params = {
      sdkAppId,
      userId,
      userSig,
      enable: enabled,
    };
    await this.trtcCloud.callExperimentalAPI(
      JSON.stringify({ api: 'enableVirtualBackground', params })
    );
  }

  public async toggleTestVirtualBackground(enabled: boolean): Promise<void> {
    await this.initVirtualBackground();
    const { sdkAppId, userId, userSig } = this.service.basicStore;
    const params = {
      sdkAppId,
      userId,
      userSig,
      enable: enabled,
    };
    await this.trtcCloud.callExperimentalAPI(
      JSON.stringify({ api: 'enableTestVirtualBackground', params })
    );
  }
}