Integrate Figment

All about integrating Figment, quickstart and whitelisting domains.

Integrate Figment

Figment can be integrated to your Website by simply adding a <div> and <script> tag to the body of the HTML:

<div id="figment"></div>

<script src="https://app.tryfigment.com/?key=<key>&ver=1.0.2"></script>

Inside the first <script>, <key> must be replaced with the customer key we provided. If you choose to let Figment render its output, Figment will render inside the #figment <div> after it is activated.

When rendered, the output size of Figment is dynamically defined by the height and width of the #figment <div>.

Quickstart

Working with Figment is simple. After including the <script> tag, Figment lives in the window namespace of the browser and can be accessed with window.figment.

Below we describe a minimal example for using Figment:

// Arbitrary function that gets a MediaStream
mediaStream = await getMediaStream();

// Check if Figment is loaded successfully
window.addEventListener("FigmentLoaded", () => {

  // Pass the mediaStream to Figment
  window.figment.setInputMediaStream(mediaStream);
  
  // Blur background, may be executed before or while Figment is running
  window.figment.setOption('blur_background', 'balanced')
  
  // Activate Figment, // "VB" for using virtual backgrounds
  await figment.activate({app: "VB"})
  
  // Catching the FigmentOutputUpdated event
  window.addEventListener('FigmentOutputUpdated', () => {

    // Get the output MediaStream
    let outputMediaStream = window.figment.getOutputMediaStream()
  
    // Further steps on your end
      
      
  });       
});

More details about how to interface with Figment are provided on the next page.

By default, Figment renders its output inside the #figment <div>Figment is also able to process a MediaStream end-to-end without rendering the output.

Whitelisting Domains

For security reasons we need to whitelist the core domains that will be used for both testing and production. Once the core domain example.example.com is whitelisted and added to our Database under your customer key, all sub domains that follow the core format will be automatically whitelisted as well.