DeepAR Web v5.0是基于网络的增强现实SDK的一个新版本。

我们很高兴地宣布，我们已经进行了重大改进，以提高我们的客户及其用户的体验。我们专注于使我们的技术更容易使用，同时提高整体加载时间和性能。我们已经改进了我们的API，以遵循现代的最佳实践，使其更容易被开发人员使用，并且不容易出错。DeepAR Web现在比以往任何时候都更容易访问，因为它发布在NPM上并可从CDN获得。与以前的版本相比，这大大减少了整合时间。

‍

TLDR

以下是对所有要点的简短总结。

‍

装载时间

谈到网络应用的用户体验，最重要的指标之一是网页加载时间。换句话说，用户需要多长时间才能在屏幕上看到网页内容，或者用户需要多少时间才能开始体验内容。

当涉及到基于网络的AR内容时，加载时间是最重要的指标之一。在DeepAR Web的这次迭代中，我们专注于改善加载时间。

我们的工程师已经仔细完善了引擎的内部工作，以处理所有的使用情况，从而实现快速的加载时间。

这包括为下载AR过滤器计时，决定何时以及如何连接网络摄像头，用顶级压缩算法压缩文件，优化我们的机器学习（ML）模型和运行时后端，以及全面加强初始化过程。我们最引以为豪的是鞋类试穿用例在加载时间方面的提升。我们通过从WebGL过渡到WASM-SIMD模型的运行时后端，实现了显著的改善。

‍

自动资源管理

DeepAR Web是一个比你从NPM安装的普通JS库更复杂的依赖关系。DeepAR引擎需要额外的文件，以便能够执行其AR任务，如面部跟踪和3D渲染。我们的客户遇到的最大痛点之一是管理DeepAR Web使用的额外资源。

集成DeepAR Web v4的各种功能，实际上需要约40行的代码，以及手动管理和存储额外的WASM文件和ML模型。但在v5中，情况不再是这样了。

我们将让代码自己说话。比较DeepAR Web v4和v5的初始化。双方做的都是同样的事情!

‍

DeepAR通过在内容交付网络（CDN）上部署WASM文件和ML模型实现了自动资源管理。内部逻辑决定了哪些文件需要被获取以及何时被获取。对于高级用户，我们仍然提供手动管理所有资源的选项。

‍

安装简便

我们的首要任务是确保我们的客户能够成功地安装和测试我们的技术，没有任何麻烦。这就是为什么我们确保DeepAR Web可以从网络应用程序开发的最重要来源获得。

通过这样做，与以前的版本相比，我们已经大大减少了整合时间。这确保我们的客户可以轻松地将我们的AR过滤器和效果纳入他们的网络项目，而不会遇到任何问题。

在你的网络项目中获得^deepar.js有两种主要方式。

1. 通过脚本标签
2. 从NPM安装并使用Parcel、WebPack或Rollup等构建工具

通过脚本标签

在一个HTML文件中加入以下代码。

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

通过NPM

使用yarn或npm将^deepar.js添加到你的项目中。

   
	npm安装deepar
    
  

‍

现代用户友好型API

v5的主要目标之一是用现代的最佳实践重新构想API。最显著的变化是从基于回调的API过渡到基于承诺的API。通过JS承诺，你可以利用^await关键字，使代码的可读性大大提高，从而减少错误和错误的表面积。诺言是解决臭名昭著的"回调地狱 "的方法。

让我们来看看一个例子。用DeepAR Web v4拍摄照片。

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

‍

现在用DeepAR Web v5拍摄一张照片。

   
	const image = await deepAR.takeScreenshot()  
    
  

‍

一些API的改变是为了便于使用。我们遵循了惯例大于配置的原则。DeepAR Web可以用于许多不同的WEB-AR用例，所以它有许多选项，对一些用户来说可能是难以承受的。决定设置哪些选项和调用哪些功能可能是令人生畏的，应该被认为是一种高级用法。我们的大多数客户只需要几个用例。这就是为什么DeepAR包含了合理的默认选项，所以开发人员不需要担心这些问题。

例如，DeepAR Web现在默认初始化了网络摄像头预览，我们暴露了简单的选项来选择背面或正面摄像头。DeepAR Web中最常用的API函数之一是^{switchEffect()}。它被用来加载不同的AR过滤器进行预览。让我们比较一下这个函数的v4和v5的API调用。

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

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

‍

👉 为了避免在这里讨论更多细节，请参考我们的v5迁移指南，了解所有API变化的完整列表。