第四期 04 Web美颜特效原创

大家好，我是讯，目前是讯视平中从事相关，然后今天就。然后我今天主要讲嗯四块内容，第一块就是啊为推销的一个简介，第二是技术实现方案，第三是结合我们直播场景进行一个最佳实践，意思就是呃，讲一下常见问题的一些分析解决思路。我们先讲第一简介。这里嗯，大概介绍一下，我们腾讯云目前推出了一个美颜特效的一个K，然后可以看到左边这个图，就我们提供的包括美颜滤镜，美妆贴纸。以及像分割等一些能力，这些都是在浏览器端能够直接看到的。然后同学们还支持移动web和小程序。然控制供自定义讯文档页。

维分码。然后讲一下我们这个特主架构就是主体，主体包括块，就是刚提到移程序是这部分，就是部分提供。包括权限校验以及特效的能力，以及素材渲染等等功能，然后还有控制，控制就是主要是对项目授权进行管理，然后我们还提供素材的制作以及素材的。一些管理的一些能力。这是我们一个大体的一个架构。然后我们提供的JSDK呢，其实已经发布到NPM上，然后嗯。

对前端比较熟悉的同学可以直接安装起来看一下，体验一下。他。功能比较丰富。基本上前面提到的能力，在我们这个N包页面都会有介绍，然后接入也是很方便的。然后同时我们还支持那个小程序。在性能方面我们也做了很多优化，比如说使用的使用的那个进行一个内部计算的优化，然后能够保证我们的这个主应用能够。比较顺畅的。不会影响到这个整个应用的一个展示。然后控制这一块的话，我这里贴一张，就是我们一个素材制作工具。制作工具，我们可以根据用户的情况，比如说想做一些人脸相关的一些贴纸或者一些挂。都可以在我们这个的控制台上能够实现，这里具体的制作过程就不在这里展开，大家有兴趣的话可以。

我们那个官网那个文档，仔细查看一下，那个最重要的一个过程。嗯，然后下面我们第二部分就是实现方案。嗯，我先来看一下这个，嗯，SDK的一个实现了一个大体的一个流程，然后左边是输入，右边输出，输入的话，我们一般会支持图片，支持视频以及那个媒体流。等几种形式的输入。然后这里其实也是一个，嗯，数据采集的一个部分，比如说采集。摄像头的一个画面。那其实这也是。一个相当于一个媒体的一个类型。然后中间这部分就是，呃，SDK内部集成的就是模型检测部分，模型检测的话，其实主要就是根据我们输入的，我们要检测出比如说人脸相关的一些点位以及坐标。

就是渲染，渲染主要通过一渲染工作，比如要加一一。最后我们会经过这个美颜特效处理的一个数据进行输出。然后大部分情况下。类。好，我们先看一下采集部分，采集的话一般分两种，左侧就是我们。前端比较经典的获取一个摄像头的一个方式。用浏览器提供。SDK的一个配置来实现我们在那个。初始时数指定个camera。

的话，其实也是内部调用的。这个方法。然后它对比左边的优势就在于，如果你使用了我们内置相机的这种配置方式的话，它会。嗯，然后采集过程的话，这里还了一张，这就是谷歌浏览器供的带一个工具，这个工具的话可以看到我们。代表了不同流的一个具体的一个数据情况。因为我们知道在媒体可能。还分为很多种，比如说会有音频流、视频流，以及输到远端的一些。

那在正常本地调试的过程，可能是没有发到，但是会有一个本地的频频，那我们通过这个。呃，采集到这个数据的详情。这个是可以方便。我们可能集到据题者卡顿情况，这个出现问一般在浏览器端采集的这个数据的这个帧率。如果我们要发送到，比如说我们要要通过一些。直播相关的一些工具发送到端的话。呃，正常情况下，大部分工具它默认会这个帧率到。然后顺便提一下，就是到网络或者浏览器的一个限制这个帧的。嗯，基本上我们实际的测试过程中，最高也就是30，再高的话也不会。

在一清场景下，可能需要到。测部分其实本来就是们入图片进行一个析，从中提关的。个厂有60个位的些百些些多位，正常说的检测人键。这个数量越多越密集。

呃，做一些美颜美妆特效，效果就会越逼真，那同时它也会带来一些负面效果，就是我们的预算时间也会越多。那以后可能因为检测这个点太多了，造成一个卡顿的一个现象，所以这里也是要。进行全程的一个。就是在原来阶段要实现这个能力的话，也要进行一些衡，就不能说检测这个点非常密集，可能导致我们这个。计算量非常大，那可能就得不偿失。然后还有一个。细节方面的处理。就是在检测这一块，我们。大部分的。目前。就是。的。那实际景。定位到瞳孔部分的位置，就比如说有一些美妆要把那个眼睛的瞳孔比说要换一些颜色。

那如果这个定位准的就出现效果不现。那这个颜这块我们也是对瞳孔啊，包括嘴唇进行种下的一个兼容计，然后已经效果。优化到一个。嗯，比较能够接受的一个。具体的话可以翻看我前面。提供的一个二维码。我们提供的是可以直接可以直接看到。比如说美及唇的一些效果可以体验。然后在人脸检测计算这一块的话啊，我这里贴了一个图。我们是可以通过浏览器提供。能够分析出的一个。

应的一个能消。因为很多时候做一些相。语言的一些处理的时候，可能。或多或少可能会遇到一些。顿，或者感觉不是很流畅的一些情况，但是很多时候是一种主观的感受。那么我们要更精确的定位问题的话。还是要利用到这个工。我可以大概讲一下，这里从上到下能分几个部分，重点来看。前面前面几。没有太多的一个消耗里面那个黄色方块那个。占用。

啊，没有太多这个影响流程的一些函数，然后再看下面就是下面的一个。这一行的话，我们可以看到有一些。相对来说比较长的一些方块，这里是其实代表计算的一个过程。那黄色方块这里如越长，其实就这的越大，那如果这里如的可能就致。我们看这个这个图，其实基本上每一个色方块。宽毫秒。还是一个比较快的一个。两其实保证们整个这个。维持在一个60帧的一个帧率基本上没问题。

那用到GPU这里的话，其实就是说。我们在前。然后现实情况中，嗯，因为是有一些浏览器没有支持一个。不。对SDK也会进行一些优雅降机，就比如说呃，移动端确实它有一些浏览器，它支持GPU加速。那没办，没办法，还是要用CPU。啊，但是呢，呃，我们也会在移动端做一些。

染染。然后这里，呃。主要的区别还是在于我们要结合前面就是我们的模型运算，这里我们要通过模型运算得到的一些坐标点位的结果来去动态的去调整属性参来达。我们整个。效起来形逼。常规的一个流程说我们。

结合前面提到了包括点位的一个额外的处理。让这个效果看起来比较好。啊，这里就不再继续展开。啊，这里先打一个小广告。呃，直播场景下的话，腾讯云也提供了一个。一。然后用起来也是很方便的。然后具体直播相关的文档的话可以。然后直播也是提供了一个在线的。直接。

有感兴趣的可以直接。据采集特效。特效加。然后会有一个本地览过程。一般我们。预。大概流程是这样。分化S。嗯，可以大概看一下。其实就是。

然后这个周期。我们继续再往下走看一下，在接入这里，接入的话就是初始化这里。呃，我们提供两种初始化的方式，一种就是输入自定义。自定义输入。类型的一个输入，那这个STEM从哪里来，就需要我们业务自己过去，就比如说。通过浏览器接获。这是需要业务自己自己去实现，然后我们还提供了一个内置相机的方式。就是我们在。个对象，直接camera对象。然后区别在于我们如果使用内置相机这种方式的，就再传个input参。

然后啊。有六八大概。HTTP协议这里我们其实已经用到了3.0版本的一个协议。那这个3.0版本相比我们比较老的1.0版本是在速度上会有很多提。然后还这里们可以看到状是式。

但是这络况避免。比较慢，那么我们SDK也提供了一个。初始化的一个载方，初始化是我们行一个资源的载。然后我们适的时。下面来看一下呃，提到的两种。方案的一个对比。一。

然后我们看一下右边，右边就是刚才提到的一个。初始化的一个过程，初始化的话。可以看到右侧上半部分的话，其实我们是进行一个健全以及资源的加载，那么这里完成之后。能看到右侧下方会有一个等待输入，就是说。我们这个过程是可以业务。真正需要美颜特效之前来做。嗯，就比如说我的这个页面，它可能并不是说我进入页面就要马上去。打开摄像头去去进行一个美颜，那我可能是在某个时机，就比如说。用户点了某些按钮之后再去执行一些。

那么这个时间是可以利用上，然后在用户比如说决定开启美颜的时候，我们再执行下半部分的一些方法，这里看到下半部分。一个流。运行的更加的流畅。因为其实我们是把一些耗时的工作放到放到比较前面的地方去执行。在用的角度来的话，可能就。达到一种效果，就比如说我点一点这个美颜，可能就马上看到这个输出。然后采集这里采集这里就不赘述了，就是还是呃。刚才提到两种方案，一个自定义，一个是内置相机的方式。嗯，然后采集这里话，其实我们采集之后是。

一般来说，使用自定义这种方式的话，需要对这个媒体流需要有一定理解。特效。语特效轨、处理轨。要。然后我们在调试的过程中也可以啊，像我这里贴的图图一样，我们可以把。

比获到的一些输入，以输入里面的一些轨道。打印出来。看一下它具体的一些状态，因为我们呃，在使用SDK的过程中，也也是有一些用户反馈啊，就可能他遇到一些比较的问题，比如说渲染异或是把摄像发亮。很多时候是因为我们这个没有管理。包括我们这流至少两个，一个输入流以及输出流，那有时候你还要切换设备对吧，切换设备之其实是相当于又产生了一个新的，同时也会产生一个输出，可能就是。四个。那如果。我们对这个流。没有行一的轨。

接下来是一个摄像头操作，摄像头的操作的话，这里我就简单列了一，就是我们使用内置相机方式的话，提。参上面提供这个例子调试。的话，需要用户自己理。就相对麻烦一点。然后应用颜特效，应用颜特效的话，其实就非常简单，其实就调用SDK的一个方法就行，这里就不赘述，唯一需要注意的话就是我们需要在SDK的一。然后同时我们SDK还提供了一个内置的播放器，可以比较方便的。一个本地效果的一个预览能力，内置播放器也根据我们那个。后就是推推流端的话，那么其实是用讯快直播的，能具体可到直播推流档地。

啊，这里不再赘述。然后最后我们会有一个完整的一个。最佳时间的代码。大家可以。个官网文档的这个链接里去去下载也可以，如果拿到P的话，你可以在这里去点击这个链接去去查看以及下载。好，最后一部分就是常见问题分析。这里我大概讲一下可能遇到几个问题，第一个，初始化失败。啊，第一次用的时候可能会遇到，那一般来说呃，大部分情况就是域名端口不匹配，然大家就啊，如果遇到这个问题，可以先检查一下控制台配的一个域名端口，己调端口般。还有一种情况是算错了。那这种的话就可以。到具体的置档里一名是的。

那么原因分析的话，这里可能就是。确实有两种情况。一种就是确实。CPU映射量非常大，也有可能是你这环境没有支持GPU加速，有可能就是你确实叠加了很多这种美颜特效，这个效果上去可能的比较多。那这里的建议就是说，第一个就是说。不需要。掉需特另特效。比如是需。

然后就是摄像头相关的，摄像头相关的问题的话。这个像关S灭。那这里其实本质上来说是我们那个视频没有停止，那需要去检测。就用我前面提过的那个，比如说把这个流程的轨道打印出来，看一下到底是不是所有的轨道都关闭。基本上你能确保每个轨道的关闭之后，那这个设备灯自然就会灭掉了。然后呃，下面是也是常见的一个问题，就是呃，在移动端环境下切摄像头，可能有时候遇到黑屏的情况。呃，这里的原因在于移动端很多机型它没法没办法同时呃去呃在一个摄像头上获取两个输入有，那我们的解决思路就是说我们要一定要把先把旧的那个摄像头流停掉，然后我们再去获取新的流，然后我们再来更新呃SDK。

就是通过一个SDK使用的方法去更新输入。好的啊，那么强烈问题将来，嗯，今天的这个呃，分享就结束了啊，谢谢大家。