DeepAR Web v5.0 is a new version of the web-based augmented reality SDK.

We are thrilled to announce that we have made significant improvements to enhance the experience of our clients and their users. We have focused on making our technology easier to use while improving the overall loading times and performance. We have improved our API to follow modern best practices, making it easier for developers to use and less prone to errors. DeepAR Web is now more accessible than ever, as it is published on NPM and available from CDN. This significantly reduces integration time compared to previous versions.

‍

TLDR

Here is a short summary of all the main points:

‍

Loading time

One of the most important metrics when it comes to user experience with regard to web apps is the web page load time. In other words, how long does it take for a user to see the web page content on screen or how much time it takes for a user to start experiencing the content.

Load time is one of the most important metrics when it comes to web-based AR content. In this iteration of DeepAR Web we have focused on improving the load time.

Our engineers have carefully refined the engine's internal workings to handle all use cases, resulting in speedy loading times.

This includes timing the download of the AR filter, deciding when and how to connect to a webcam, compressing files with top-of-the-line compression algorithms, optimizing our machine learning (ML) models and runtime backends, and enhancing the initialization process overall. We are most proud of the Shoe Try-On use case in terms of load time boost. We achieved a significant improvement by transitioning from WebGL to the WASM-SIMD model runtime backend.

‍

Automatic resource management

DeepAR Web is a more complex dependency than your usual JS libraries installed from NPM. DeepAR engine needs additional files to be able to carry out its AR tasks like face tracking and 3D rendering. One of the biggest pain points our clients encountered is managing additional resources DeepAR Web uses.

Integrating DeepAR Web v4 with all its various functionalities required effectively ~40 lines of code and manual management and storage of additional WASM files and ML models. But in v5 that is no longer the case.

We’ll let the code speak for itself. Compare the DeepAR Web v4 and v5 initialization. Both sides do the same thing!

‍

DeepAR achieves automatic resource management by deploying WASM files and ML models on the Content Delivery Network (CDN). The internal logic determines which files need to be fetched and when. For advanced users, we still provide options to manually manage all resources.

‍

Ease of installation

Our top priority is to make sure our clients can successfully install and test our technology without any hassle. That's why we have made sure that DeepAR Web is accessible from the most important sources for web app development.

By doing so, we have significantly reduced the integration time compared to previous versions. This ensures that our clients can easily incorporate our AR filters and effects into their web projects without encountering any issues.

There are two main ways to get ^deepar.js in your web project:

1. Via script tags
2. Installing it from NPM and using a build tool like Parcel, WebPack, or Rollup

via Script tag

Add the following code to an HTML file:

  
  	<script src="https://cdn.jsdelivr.net/npm/deepar/js/deepar.js"></script>
  

via NPM

Add ^deepar.js to your project using yarn or npm.

   
	npm install deepar
    
  

‍

Modern user-friendly API

One of the main goals of v5 was to reimagine the API with modern best practices. The most notable change is the transition from the callback-based API to the promise-based API. With JS promises you can utilize the ^await keyword making the code readability much higher and in turn reducing the bugs and surface area for errors. Promises are a solution for the infamous "callback hell".

Let’s have a look at an example. Taking a picture with DeepAR Web v4.

        
    	deepAR.callbacks.onScreenshotTaken = function(image) {
      	// Do something with the image...
    	}
    	deepAR.takeScreenshot();
        
    

‍

And now taking a picture with DeepAR Web v5.

   
	const image = await deepAR.takeScreenshot()  
    
  

‍

Some of the API changes were made for the sake of ease of use. We followed the principle of convention over configuration. DeepAR Web can be used in many different WEB-AR use cases, so it has numerous options that can be overwhelming for some users. Deciding which options to set and which functions to call can be daunting and should be considered an advanced usage. Most of our customers only require a few use cases. That's why DeepAR comes packed with sensible default options, so developers don't need to worry about them.

For example, DeepAR Web is now by default initialized with the webcam preview and we expose simple options to choose a back or front camera. One of the most used API functions in DeepAR web is ^{switchEffect()} . It is used to load different AR filters for preview. Let's compare v4 and v5 API calls of this function.

   
	// DeepAR Web v4
	deepAR.switchEffect(0, 'faceFilter', 'path/to/face/filter')

	// DeepAR Web v5
	await deepAR.switchEffect('path/to/face/filter')
    
  

‍

👉 To avoid going into more detail here, please refer to our migration guide for v5 for a full list of all API changes.