MediaSFU Angular
    Preparing search index...

    Class BackgroundModal

    BackgroundModal - Component to manage background selection and manipulation in media streams.

    This component allows users to choose, apply, and manipulate virtual backgrounds for media streams, leveraging MediaPipe’s Selfie Segmentation and MediaSoup functionalities.

    BackgroundModal

    <app-background-modal
      [isVisible]="isModalVisible"
      [parameters]="modalParameters"
      position="topLeft"
      backgroundColor="#f5f5f5"
      (onClose)="handleModalClose()"
    ></app-background-modal>

    Visibility state of the modal.

    Parameters including settings and methods for media and background management.

    The position of the modal, e.g., 'topLeft'.

    Background color of the modal.

    Callback function when the modal is closed.

    ngOnInit - Initializes the modal component by updating properties based on parameters.

    Implements

    • OnChanges
    • OnInit
    Index

    Constructors

    constructor

    Methods

    ngOnInit ngOnChanges updateVariables onVisibilityChange preloadModel renderDefaultImages handleImageUpload clearCanvas loadImageToCanvas removeBackground applyBackground selfieSegmentationPreview saveBackground handleModalClose showLoading hideLoading getCombinedOverlayStyle getCombinedContentStyle

    Properties

    isVisible parameters position backgroundColor onClose overlayStyle? contentStyle? customTemplate? defaultImagesContainerRef uploadImageInputRef backgroundCanvasRef videoPreviewRef captureVideoRef loadingOverlayRef applyBackgroundButtonRef saveBackgroundButtonRef faTimes customImage selectedImage segmentVideo selfieSegmentation pauseSegmentation processedStream keepBackground backgroundHasChanged virtualStream mainCanvas prevKeepBackground appliedBackground videoAlreadyOn audioOnlyRoom islevel recordStarted recordResumed recordPaused recordStopped recordingMediaOptions vidCons frameRate targetResolution videoParams autoClickBackground localStreamVideo clonedStream clonedTrack updateCustomImage updateSelectedImage updateSegmentVideo updateSelfieSegmentation updatePauseSegmentation updateProcessedStream updateKeepBackground updateBackgroundHasChanged updateVirtualStream updateMainCanvas updatePrevKeepBackground updateAppliedBackground updateVideoParams updateAutoClickBackground createSendTransport connectSendTransportVideo disconnectSendTransportVideo onScreenChanges sleep

    Constructors

    Methods

    • A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.

      Returns void

    • A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

      Parameters

      • changes: SimpleChanges

        The changed properties.

      Returns void

    Properties

    isVisible: boolean = false
    parameters: BackgroundModalParameters = ...
    position: string = 'topLeft'
    backgroundColor: string = '#f5f5f5'
    onClose: () => void = ...
    overlayStyle?: Partial<CSSStyleDeclaration>
    contentStyle?: Partial<CSSStyleDeclaration>
    customTemplate?: any
    defaultImagesContainerRef: ElementRef
    uploadImageInputRef: ElementRef
    backgroundCanvasRef: ElementRef
    videoPreviewRef: ElementRef
    captureVideoRef: ElementRef
    loadingOverlayRef: ElementRef
    applyBackgroundButtonRef: ElementRef
    saveBackgroundButtonRef: ElementRef
    faTimes: IconDefinition = faTimes

    Icon used for closing the modal.

    customImage: string = ''

    Custom image URL for background.

    selectedImage: string = ''

    Selected image URL for background.

    segmentVideo: MediaStream | null = null

    Media stream for video segmentation.

    selfieSegmentation: SelfieSegmentation | null = null

    SelfieSegmentation instance.

    pauseSegmentation: boolean = false

    Pause state for segmentation.

    processedStream: MediaStream | null = null

    Processed media stream with applied background.

    keepBackground: boolean = false

    State to keep or reset background.

    backgroundHasChanged: boolean = false
    virtualStream: MediaStream | null = null
    mainCanvas: HTMLCanvasElement
    prevKeepBackground: boolean = false
    appliedBackground: boolean = false
    videoAlreadyOn: boolean = false
    audioOnlyRoom: boolean = false
    islevel: string = '0'
    recordStarted: boolean = false
    recordResumed: boolean = false
    recordPaused: boolean = false
    recordStopped: boolean = false
    recordingMediaOptions: string = ''
    vidCons: any = {}
    frameRate: number = 5
    targetResolution: string = '1280x720'
    videoParams: ProducerOptions = {}
    autoClickBackground: boolean = false
    localStreamVideo: MediaStream | null = null
    clonedStream: MediaStream | null = null
    clonedTrack: MediaStreamTrack | null = null
    updateCustomImage: (value: string) => void
    updateSelectedImage: (value: string) => void
    updateSegmentVideo: (value: MediaStream | null) => void
    updateSelfieSegmentation: (value: SelfieSegmentation | null) => void
    updatePauseSegmentation: (value: boolean) => void
    updateProcessedStream: (value: MediaStream | null) => void
    updateKeepBackground: (value: boolean) => void
    updateBackgroundHasChanged: (value: boolean) => void
    updateVirtualStream: (value: MediaStream | null) => void
    updateMainCanvas: (value: HTMLCanvasElement) => void
    updatePrevKeepBackground: (value: boolean) => void
    updateAppliedBackground: (value: boolean) => void
    updateVideoParams: (value: ProducerOptions) => void
    updateAutoClickBackground: (value: boolean) => void
    createSendTransport: CreateSendTransportType
    connectSendTransportVideo: ConnectSendTransportVideoType
    disconnectSendTransportVideo: DisconnectSendTransportVideoType
    onScreenChanges: OnScreenChangesType
    sleep: SleepType

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods
    Properties
    isVisibleparameterspositionbackgroundColoronCloseoverlayStylecontentStylecustomTemplatedefaultImagesContainerRefuploadImageInputRefbackgroundCanvasRefvideoPreviewRefcaptureVideoRefloadingOverlayRefapplyBackgroundButtonRefsaveBackgroundButtonReffaTimescustomImageselectedImagesegmentVideoselfieSegmentationpauseSegmentationprocessedStreamkeepBackgroundbackgroundHasChangedvirtualStreammainCanvasprevKeepBackgroundappliedBackgroundvideoAlreadyOnaudioOnlyRoomislevelrecordStartedrecordResumedrecordPausedrecordStoppedrecordingMediaOptionsvidConsframeRatetargetResolutionvideoParamsautoClickBackgroundlocalStreamVideoclonedStreamclonedTrackupdateCustomImageupdateSelectedImageupdateSegmentVideoupdateSelfieSegmentationupdatePauseSegmentationupdateProcessedStreamupdateKeepBackgroundupdateBackgroundHasChangedupdateVirtualStreamupdateMainCanvasupdatePrevKeepBackgroundupdateAppliedBackgroundupdateVideoParamsupdateAutoClickBackgroundcreateSendTransportconnectSendTransportVideodisconnectSendTransportVideoonScreenChangessleep