我们很高兴地宣布我们的Web SDK的一个新版本。它采用了一种更现代的网络开发方法，旨在简化与您的网络应用的整合。这篇博文将列出所有令人兴奋的更新 ^v4.0.0所提供的内容。

‍

‍

关于DeepAR Web

DeepAR使添加增强现实功能到任何网站变得容易。 从虚拟试戴化妆品、运动鞋或眼镜到从视频通话中删除背景，增强现实正迅速成为现代网络互动的主要成分。

我们的演示项目可以用来在30分钟内让AR在iOS、Android、MacOS或网络上运行。 我们有数百种现成的AR效果，你可以用来创造各种体验，以进行销售、娱乐和参与。 使用DeepAR Creator Studio，你可以创建具有Instagram或SnapChat上那些功能的自定义AR效果，以及更多。

TLDR

• DeepAR Web现在可以在NPM上使用。
• DeepAR Web现在是用Typescript编写的。
• 在你的IDE里面的API参考和文档。
• DeepAR JS库现在可以作为ES模块使用。
• 易于与Webpack和Rollup等捆绑器集成。
• DeepAR Web现在期望所有资产文件的路径，如 ^deepar.wasm.
• 减少40%的javascript文件和20%的WebAssembly文件。
• 性能和稳定性的改进。
• 即使浏览器标签没有被聚焦，DeepAR预览也可以工作。
• 我们有一些突破性的变化。更多信息请参见迁移到^v4.0.0。

‍

公共NPM包

NPM是许多Web框架和库的一个公共仓库。将代码发布到NPM将大量增加DeepAR网络库的可用性，并改善新开发者的集成过程的便利性。

👉 是的，你没听错。DeepAR Web现在可以在 NPM.

‍

你只需一个命令就可以安装最强大的网络AR框架。

   
       npm安装deepar
    
  

‍

只需13行代码就可以运行你的第一个演示。就是这么简单!

   
        import { DeepAR } from 'deepar';
        const deepAR = new DeepAR({
          licenseKey: 'your_license_key_here',  
          canvas: document.getElementById('deepar-canvas'),  
          deeparWasmPath: 'path/to/deepar.wasm',
          callbacks: {     
              onInitialize: () => {         
                  deepAR.startVideo(true);
                  deepAR.switchEffect(0, 'mask', 'path/to/super_cool_mask_filter');
              } 
          }
        });
        deepAR.downloadFaceTrackingModel('path/to/models-68-extreme.bin');
    
  

‍

脚本模块

长期以来，Javascript并不支持将代码分成多个文件（模块）。将代码组织成文件的能力有助于将功能划分为更小、更容易管理的部分。对于任何大于400行代码的项目来说，这一点是很明显的。如果一个项目是由多人开发的，这就是必须的。

👉 新的DeepAR Web现在是一个ES模块。 从实用的角度来看，这意味着它可以很好地与Webpack和Rollup等Javascript捆绑器一起工作。

‍

捆绑器是Javascript对将代码分离成模块的非官方回答。让我们看一下DeepAR的例子。

DeepAR Web自带 ^{deepar.esm.js}文件。它在一个文件中包含了DeepAR SDK的所有功能。大多数Web应用程序由许多库和文件组成。要将DeepAR功能导入你的代码中。

   
        import { DeepAR } from 'deepar.esm';
    
  

‍

下面是一个如何在HTML中直接使用ES模块的例子。

   
        <script type="module">    
          import { DeepAR } from 'path/to/deepar.esm.js';    
          let deepAR = new DeepAR({ ... });
        </script>
    
  

‍

‍

类型、定义、自动完成和内联文档

如果有一件事是所有开发者都喜欢的，那就是IDE能帮助他们提高生产力。这就是我们重写整个Web SDK的主要原因。

👉 DeepAR Web现在是用Typescript编写的。

‍

每一个Typescript应用程序现在都将与DeepAR Web进行直接的整合。对于所有的Javascript人士，不要害怕。因为你也将获得Typescript库所带来的大部分好处。

Typescript代码被转译成Javascript代码。因此，Typescript和Javascript项目都可以消费它。但在发出的Javascript代码的同时。 ^tsc生成Typescript声明文件。

📓transpile- 变换和编译两个词的花式组合。

^tsc- 一个Typescript编译器。

‍

什么是Typescript定义文件？

DeepAR Web带有一对这样的文件。

• ^deepar.js
• ^残疾人

扩展 ^.d.ts表示一个Typescript定义文件。它描述了该文件的所有类、方法和属性。 ^.deepar.js文件。这对开发者有什么帮助？

• 你可以检查一个 ^.d.ts文件，看到所有可用的API，哪些类和类型被导出，方法如何被调用，以及它们的参数是什么。所有这些都不用看文档。
• 集成开发环境将接收并解析定义文件，从而实现代码的自动完成。
• 定义文件还包含所有方法和属性的文档。IDE可以很好地为你预览这些文档。

总之：有了Typescript定义 ^.dt.s文件，你就可以在你的IDE中获得API参考和自动完成。

‍

方便捆绑的API

Webpack和Rollup将代码合并成一个捆绑包。默认情况下，它们会重命名并将资产放在不同的目录结构中。以前版本的SDK在与捆绑器集成时有问题。主要问题是获取WebAssembly和机器学习模型。

在以前的SDK版本中，DeepAR假定了这些资产的路径，开发人员无法改变它们。这在DeepAR中有所改变 ^v4.0.0.

👉 DeepAR Web现在期望所有资产文件的路径。

‍

Webpack ↔ DeepAR 示例

这里有一个很酷的例子，就是将Webpack的资产模块与deepar npm包串联起来使用。把这个添加到你的 ^{webpack.config.js}:

   
      module.exports = {
        // ...
        module: {
          rules: [
            {
              test: /\.(wasm)|(bin)|(obj)$/i,        
              include: [
                path.resolve(__dirname, 'node_modules/deepar/'),        
              ],
              type: 'asset/resource',      
            },      
            {
              include: [
                path.resolve(__dirname, 'effects/'),        
              ],        
              type: 'asset/resource',      
            },    
          ],  
        },
        // ...
    
  

‍

然后你可以包括DeepAR SDK和它的资产。

• ^deepar.wasm-WebAssembly文件包含DeepAR的大部分功能，使其能够在浏览器中快速运行。
• ^{models-68-extreme.bin}- 用于人脸追踪的机器学习模型。
• 效果文件 - 所有的3D遮罩、滤镜、背景去除功能等都由DeepAR中的效果文件表示。你可以把它们加载到DeepAR中来预览效果。在这里下载一个免费的过滤器包。

  	
      import { DeepAR } from 'deepar';
      import deeparWasmPath from 'deepar/wasm/deepar.wasm';

      import faceTrackingModelPath from 'deepar/models/face/models-68-extreme.bin';
      import someEffect from './path/to/effect_file';
  	
  

‍

然后初始化DeepAR。

   
      const deepAR = new DeepAR({
        licenseKey: 'your_license_key_here',
        canvas: document.getElementById('deepar-canvas'),
        deeparWasmPath,
        callbacks: {
          onInitialize: function() {
            deepAR.startVideo(true);
            deepAR.switchEffect(0, 'mask', someEffect);
          },
        },
      });

      // Download the face tracking model. This is required in order to track face.
      deepAR.downloadFaceTrackingModel(faceTrackingModelPath);
    
  

‍

网络引擎升级

DeepAR SDK是一个多平台框架，可在所有现代平台上工作。

• 基础设施
• 安卓
• 网络
• MacOS

支持一些主要的移动框架。

• 翩翩起舞
• 非官方的react-native支持

DeepAR的核心SDK开发人员在开发和维护客户所期望的一系列非常不同的平台上的所有有趣的功能方面，有一项不胜感激的工作。为了使DeepAR的开发和维护更加易于管理和富有成效，核心开发人员不得不做一些重大的重构，并在SDK的网络方面引入一些升级。

🚘DeepAR汽车不仅得到了一个闪亮的新车身和保险杠。它还得到了一个巨大的引擎升级!

‍

‍

Emscripten升级

DeepAR SDK的核心是用C++编写的，我们用Emscripten把它编译成WebAssembly。几年后，我们终于设法将我们的Emscripten工具链升级到最新版本。阻碍我们提前升级的原因是无法用新的Emscripten工具链编译一些C++的依赖项，因为我们无法获得这些依赖项的代码。

除了我们内部的一些代码优化和代码大小分析外，这些是结果。

🔎 减少40%的javascript文件和20%的WebAssembly文件 →更快的网站加载!

🔥 性能和稳定性改进 →更多FPS!

‍

当浏览器标签没有焦点时，相机预览就会冻结。

一些网络应用需要DeepAR的摄像头和效果预览，即使在浏览器标签没有被聚焦的情况下。一个典型的例子是一个利用背景模糊的视频通话应用程序。当你在进行视频通话时，你将在某一时刻需要切换浏览器标签来检查网络上的一些东西。你最不希望发生的事情是你的相机预览被冻结。

❄️新的DeepAR Web SDK可以在后台渲染，即使浏览器标签没有被关注。

‍

一个典型的做一些处理和渲染的应用程序有一个叫做游戏循环的东西。在网络浏览器中，游戏循环不能是无限的，因为应用程序需要将执行结果返回给浏览器，以便对网页进行预览。

DeepAR将其预览渲染到一个HTML画布元素。在渲染之前，它需要进行脸部跟踪和计算引擎状态。所有这些都发生在浏览器的回调上。 ^{请求AnimationFrame}浏览器的回调。不幸的是。 ^{requestAnimationFrame}当标签没有被聚焦时就停止调用，以节省处理器的消耗。

的自然选择似乎是使用 ^SetTimeout函数，每秒调用游戏循环更新函数30次（如果你想要30FPS）。但这也不会产生好的结果，因为浏览器不会在标签页不被关注时以指定的时间间隔调用 ^setTimeout当标签没有被聚焦时，浏览器不会以给定的时间间隔来调用。它被调用的时间间隔要长得多，你最终只能得到5FPS而不是30FPS。

那么，我们如何解决这个问题呢？有一个有趣的黑客。什么东西可以在后台播放，即使标签没有被关注？不知道吗？声音!

我们使用Web Audio API来连接Gain节点和Oscillator节点。我们每秒播放振荡器节点30次，并在每次声音播放结束时附加一个回调。该回调被附加到游戏循环更新函数中。现在你会问自己，当我在非聚焦标签中使用DeepAR时，会不会听到高频蜂鸣声？当然不会，我们把增益节点的增益设置为 ⁰，你傻啊！？

我们在这里使用30 FPS作为例子。DeepAR默认以30FPS进行预览，但可以通过API进行配置。

这方面的一个例子是我们的Vonage视频通话API集成实例。请看这里。启用这一功能的DeepAR API是。

   
       deepAR.setOffscreenRenderingEnabled(true)。
    
  

‍

如何用Emscripten在C++中使用Javascript库

前段时间，我们从原生的C++ TensorFlow运行时过渡到TensorFlow.js运行时，以提高浏览器的性能。这使得我们的代码分散在繁琐的C++和JS互操作之间。我们不再有C++代码的调用来对摄像机图像进行推理。相反，所有的逻辑都写在JS中，并将结果传递给C++，C++通过笨拙地读取和设置一些全局标志来消耗它们。这使得代码完全无法理解，除非你知道到底发生了什么。

我们在JS中编写逻辑没有问题，但与全局标志通信是一个大问题！我们想从C++中用标准的C函数直接调用JS代码。我们想要的是用标准的C函数从C++中直接调用JS代码。

我们将TensorFlow.js库包裹在我们的内部跟踪JS库中，该库是用捆绑器创建的。下面是我们如何在Emscripten工具链中使用该JS库，并直接从C++中调用JS逻辑。

DeepAR Web最终是用Webpack创建的。在我们面向客户端的JS代码中，我们导入内部库，并通过模块将其传递给Emscripten。要启用这一点，你需要启用 ^模块化和 ^输出_ES6Emscripten的功能（见settings.js）。

   
      import { A, B, C } from 'internal_js_library.js';
      import Module from 'emitted_emscripten_js_code.js';

      // When initializing Emscripten Module
      Module({
        // Pass the library exports inside the Module
        internal_lib: { A, B, C }
      }).then((module) => {
        // Use emitted functions inside module
      });
    
  

‍

然后在你的Emscripten ^pre.js中添加下一行，使库的导出可以在你所有的Emscripten js代码中访问。

   
       var internal_lib = Module['internal_lib'];
    
  

‍

现在你可以像这样在你的JS代码中的任何地方访问这个库。

   
      internal_lib.A.foo(args...)。
      internal_lib.B.bar(args...)。
      internal_lib.C.baza(args...)。
    
  

‍

考虑到你正在生成生产级别的代码，你将尝试优化和减少发射的JS代码大小，使用 ^emcc标志 ^-Oz或 ^-Oz.Emscripten将使用谷歌的闭合编译器来完成这项工作。closure会进行各种重度优化，你需要记住，否则你的代码将无法运行（见Google Devs）。在这个例子中，closure将重命名 ^foo, ^bar，以及 ^巴兹函数的调用，在运行时，它将抛出一个异常，说没有这样的函数存在。为了解决这个问题，你可以做以下工作。

‍

1.用字符串调用函数，因为Closure从不重命名字符串。

     
        internal_lib.A.['foo'](42, true)。
     
  

‍

2.创建一个封闭的externs文件。

   
      /**
      * @param {number} a
      * @param {boolean} b
      * @return {string}
      */
      internal_lib.A.foo = function(a, b) {};
    
  

‍

然后我们将调用我们内部库的JS逻辑包裹在Emscripten的js-library代码中。这使我们能够拥有可以直接从C++代码中调用的Javascript函数。

‍

迁移到 ^v4.0.0从以前的版本迁移到

构建新技术有时意味着你必须打破旧技术。当我们不得不打破与以前版本的SDK的向后兼容性时，我们总是很难过。这是一个艰难的决定，但我们最终做了这个决定，因为这是朝正确方向迈出的一步。

📌 所有的改变都是为了帮助开发者进行更容易和更标准/现代的整合。

‍

不要被吓倒!变化并不很大。

我们准备了一个方便的文件，列出了你在从以前的版本迁移到DeepAR Web时需要知道的所有事情。 ^v4.0.0时需要知道的所有事情。

⏱ 迁移到新版本需要5-10分钟。

‍

就这些了，伙计们。

‍

DeepAR团队 💙

‍