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 two<script> tags to the body of the HTML:

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

<script src="https://app.tryfigment.com/?key=<key>&ver=1.0.0"></script>
<script>
	let figmentApp;
	(function() {
		figmentApp = new Figment();
		figmentApp.load().then(function(){
		
			// Actions directly after loading
		
		}).catch(function(err){
			// Error handling
			console.log(err);
		})
	})();
</script>

Inside the first <script>, <key> must be replaced with the customer key we provided. The second <script> loads Figment into the global scope of the DOM. This must be done at this point to ensure that the DOM and Figment are fully loaded before Figment is used due to the asynchronous nature of the Web.

When activated (see figmentApp.activate() in the next section), Figment will render inside the #figment <div>.

Figment's output size is dynamically defined by the height and width of the Figment <div>

Quickstart

Working with Figment is simple. After including both <script> tags the figmentApp object is globally available. Below we describe a minimal example for using Figment:

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

// Pass the mediaStream to Figment
figmentApp.setInputMediaStream(mediaStream);

// Blur background, may be executed before or while Figment is running
figmentApp.setOption('blur_background', '')

// Activate Figment
figmentApp.activate().then(() => {

  // Get an output MediaStream
  let outputMediaStream = figmentApp.getOutputMediaStream()
  
  // Further steps on your end
  
});

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

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.