Figment API

How to work with Figment.

figment.activate()

Activates Figment. If the set_render_video option is enabled, the output is rendered to the #figment <div>.

To ensure that all parts of Figment are loaded before using the interface, .activate() returns a Promise. The intended way to activate Figment is as follows:

figment.activate().then(() => {
    // Interact with Figment
});

If Figment is activated without first executing setInputMediaStream(), Figment will read a MediaStream by itself usingmediaDevices.getUserMedia() with default parameters.

returns: Promise

figment.deactivate()

Deactivates Figment. All rendering and computations are stopped.

Figment also stops the input MediaStream when deactivated. So, before reactivating, a new input MediaStream must be set, otherwise a MediaStream with default parameters is read.

returns: Promise

figment.setInputMediaStream(mediaStream: MediaStream)

Lets you set the MediaStream that Figment uses as video input.

Usage:

figment.setInputMediaStream(mediaStream);

figment.activate().then(() => {
  // Interact with Figment 
});

This function should be executed before Figment is activated. If this function is executed while Figment is running, the output MediaStream is reinitialized and theFigmentOutputUpdatedEvent fires again.

figment.setMediaTrackConstraints(constraints: object)

Allows to set the MediaTrackConstraints for the input video. In this case, the input video is read by Figment using:

mediaStream = await navigator.mediaDevices.getUserMedia({video: constraints})

Usage:

figmentApp.setMediaTrackConstraints(constraints);

figmentApp.activate().then(() => {
  // Interact with Figment 
});

This function should be executed before Figment is activated. If this function is executed while Figment is running, the output MediaStream is reinitialized and theFigmentOutputUpdated Event fires again.

figment.getOutputMediaStream()

Lets you receive Figment's output MediaStream containing the final segmentation result. This function should only be executed after Figment fires its FigmentOutputUpdated event.

Usage:

// App should be activated

window.addEventListener('FigmentOutputUpdated', function (e) {
  
  let outputMediaStream = window.figment.getOutputMediaStream()
  
  // Further actions on your side

}, false);

returns: MediaStream

figment.setOption(option: string, value: string)

General function to change the internal state of Figment. This function may be executed before or while Figment is running.

option: Option to be set. Available options are: set_background_img | blur_background | set_render_video | activate_quality_mode | activate_performance_mode | show_hide_performance | set_mask_behavior

• set_background_img — sets the current background image. value: path_to_image.

• blur_background — blurs the background. We offer three different blur strengths: weak, balanced and strong. value: weak | balanced | strong

• set_render_video — Option to control whether Figment should render its output into the #figment <div> . value: true (default) | false

• activate_quality_mode (default) — uses the model with emphasis on segmentation quality. Slight drop in FPS is expected. value: ''

• activate_performance_mode — uses the model with emphasis on performance. Slight decrease in segmentation quality expected. value: ''

• show_hide_performance — allows to show and hide a transparent performance bar showing frames per second (FPS) and inference times in milliseconds. value: show | hide

• set_mask_behavior — Allows switching between a tight or a slightly looser mask. Both masks aim to accurately segment the person. The loose mask shows small fractions of the background in order to preserve the whole person, while the tight mask aims to show as little background as possible with the possibility that the mask may cut into the person at times. value: tight (default) | loose

value: value specifying the set option.

Usage examples:

// Change to the model with emphasis on performance
figment.setOption('activate_performance_mode', '');

figment.activate().then(() => {

    // Futher actions

});

or

<!-- Change Background -->
<button value="link/to/image" onclick="window.figment.setOption('set_background_img', this.value);"></button>