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.

Component

Name

BackgroundModal

Example

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

Param: isVisible

Visibility state of the modal.

Param: parameters

Parameters including settings and methods for media and background management.

Param: position

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

Param: backgroundColor

Background color of the modal.

Param: onClose

Callback function when the modal is closed.

Method

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

Implements

  • OnChanges
  • OnInit

Constructors

constructor

Methods

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

Properties

isVisible parameters position backgroundColor onClose 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

constructor

Methods

ngOnInit

ngOnChanges

updateVariables

onVisibilityChange

preloadModel

renderDefaultImages

handleImageUpload

clearCanvas

loadImageToCanvas

removeBackground

applyBackground

selfieSegmentationPreview

saveBackground

handleModalClose

showLoading

hideLoading

Properties

isVisible

isVisible: boolean = false

parameters

parameters: BackgroundModalParameters = ...

position

position: string = 'topLeft'

backgroundColor

backgroundColor: string = '#f5f5f5'

onClose

onClose: (() => void) = ...

defaultImagesContainerRef

defaultImagesContainerRef: ElementRef<any>

uploadImageInputRef

uploadImageInputRef: ElementRef<any>

backgroundCanvasRef

backgroundCanvasRef: ElementRef<any>

videoPreviewRef

videoPreviewRef: ElementRef<any>

captureVideoRef

captureVideoRef: ElementRef<any>

loadingOverlayRef

loadingOverlayRef: ElementRef<any>

applyBackgroundButtonRef

applyBackgroundButtonRef: ElementRef<any>

saveBackgroundButtonRef

saveBackgroundButtonRef: ElementRef<any>

faTimes

faTimes: IconDefinition = faTimes

Icon used for closing the modal.

customImage

customImage: string = ''

Custom image URL for background.

selectedImage

selectedImage: string = ''

Selected image URL for background.

segmentVideo

segmentVideo: null | MediaStream = null

Media stream for video segmentation.

selfieSegmentation

selfieSegmentation: null | SelfieSegmentation = null

SelfieSegmentation instance.

pauseSegmentation

pauseSegmentation: boolean = false

Pause state for segmentation.

processedStream

processedStream: null | MediaStream = null

Processed media stream with applied background.

keepBackground

keepBackground: boolean = false

State to keep or reset background.

backgroundHasChanged

backgroundHasChanged: boolean = false

virtualStream

virtualStream: null | MediaStream = null

mainCanvas

mainCanvas: HTMLCanvasElement

prevKeepBackground

prevKeepBackground: boolean = false

appliedBackground

appliedBackground: boolean = false

videoAlreadyOn

videoAlreadyOn: boolean = false

audioOnlyRoom

audioOnlyRoom: boolean = false

islevel

islevel: string = '0'

recordStarted

recordStarted: boolean = false

recordResumed

recordResumed: boolean = false

recordPaused

recordPaused: boolean = false

recordStopped

recordStopped: boolean = false

recordingMediaOptions

recordingMediaOptions: string = ''

vidCons

vidCons: any = {}

frameRate

frameRate: number = 5

targetResolution

targetResolution: string = '1280x720'

videoParams

videoParams: ProducerOptions = {}

autoClickBackground

autoClickBackground: boolean = false

localStreamVideo

localStreamVideo: null | MediaStream = null

clonedStream

clonedStream: null | MediaStream = null

clonedTrack

clonedTrack: null | MediaStreamTrack = null

updateCustomImage

updateCustomImage: ((value: string) => void)

updateSelectedImage

updateSelectedImage: ((value: string) => void)

updateSegmentVideo

updateSegmentVideo: ((value: null | MediaStream) => void)

updateSelfieSegmentation

updateSelfieSegmentation: ((value: null | SelfieSegmentation) => void)

updatePauseSegmentation

updatePauseSegmentation: ((value: boolean) => void)

updateProcessedStream

updateProcessedStream: ((value: null | MediaStream) => void)

updateKeepBackground

updateKeepBackground: ((value: boolean) => void)

updateBackgroundHasChanged

updateBackgroundHasChanged: ((value: boolean) => void)

updateVirtualStream

updateVirtualStream: ((value: null | MediaStream) => void)

updateMainCanvas

updateMainCanvas: ((value: HTMLCanvasElement) => void)

updatePrevKeepBackground

updatePrevKeepBackground: ((value: boolean) => void)

updateAppliedBackground

updateAppliedBackground: ((value: boolean) => void)

updateVideoParams

updateVideoParams: ((value: ProducerOptions) => void)

updateAutoClickBackground

updateAutoClickBackground: ((value: boolean) => void)

createSendTransport

createSendTransport: CreateSendTransportType

connectSendTransportVideo

connectSendTransportVideo: ConnectSendTransportVideoType

disconnectSendTransportVideo

disconnectSendTransportVideo: DisconnectSendTransportVideoType

onScreenChanges

onScreenChanges: OnScreenChangesType

sleep

sleep: SleepType

Settings

Member Visibility

On This Page

Constructors
Methods
Properties
isVisibleparameterspositionbackgroundColoronClosedefaultImagesContainerRefuploadImageInputRefbackgroundCanvasRefvideoPreviewRefcaptureVideoRefloadingOverlayRefapplyBackgroundButtonRefsaveBackgroundButtonReffaTimescustomImageselectedImagesegmentVideoselfieSegmentationpauseSegmentationprocessedStreamkeepBackgroundbackgroundHasChangedvirtualStreammainCanvasprevKeepBackgroundappliedBackgroundvideoAlreadyOnaudioOnlyRoomislevelrecordStartedrecordResumedrecordPausedrecordStoppedrecordingMediaOptionsvidConsframeRatetargetResolutionvideoParamsautoClickBackgroundlocalStreamVideoclonedStreamclonedTrackupdateCustomImageupdateSelectedImageupdateSegmentVideoupdateSelfieSegmentationupdatePauseSegmentationupdateProcessedStreamupdateKeepBackgroundupdateBackgroundHasChangedupdateVirtualStreamupdateMainCanvasupdatePrevKeepBackgroundupdateAppliedBackgroundupdateVideoParamsupdateAutoClickBackgroundcreateSendTransportconnectSendTransportVideodisconnectSendTransportVideoonScreenChangessleep