Day: 2022年5月28日

前端使用tensorflow.js模型实现浏览器摄像头视频流人像识别，背景虚化&背景替换

admin 工具 暂无评论 2,699 浏览

背景

实习期间有个需求，需要前端调用算法模型，封装成npm包，供视频会议组去用，从而在视频会议中实现背景虚化，背景替换功能。后续可能会进一步加入一些好玩的功能，如面部特效(胡子，一字眉)，头发颜色替换等。

实现效果应类似于下面这样

腾讯会议界面：

image-20210603181106629

​

为了给需求方演示，先采用google的TensorFlow.js的 BodyPix 模型做了一个小demo，先实现背景虚化和背景替换功能，模型的效果较为满意，显示画面流畅。

TensorFlow.js 是一个 JavaScript 库。 我们可以借助于它，来直接用 JavaScript 去创建新的机器学习模型和部署现有模型。对于前端人员入门机器学习十分友好。

TensorFlow.js 提供了很多开箱即用的预训练模型(见下图):
这里选用了图像处理类别里面的BodyPix模型

image-20210604145627620

这是BodyPix的官方演示demo https://storage.googleapis.co...，

demo里的功能对我们的需求来说有些过于复杂，也没有背景替换功能。因此，我自己写了一个针对于背景虚化，背景替换场景的demo。

介绍

  • 思路： 在浏览器中打开摄像头，获取视频流图片，调用tensorflow.js的 body-pix 模型的方法，来绘制结果。 其中背景虚化比较容易实现，可直接用模型提供的drawBokehEffect方法；模型没有现成的背景替换的接口，用canvas的绘制方法对模型的toMask方法返回的遮罩对象
…
    
Read more

WebTransport 与 WebCodecs 初探

admin 概念 暂无评论 787 浏览

什么是WebTransport？

WebTransport 是WebRTC体系下的一套浏览器API,提供低延迟,client和server之间双向通信的能力。 核心的能力点包括：

  • WebTransport 提供基于QUIC 和 HTTP3实现的API, 自动获得QUIC和HTTP3本身的特性，比如应用层的拥塞，避免队头阻塞。
  • 双向通信的能力，多个传输通道复用一个连接的能力，能够很好的替代WebSocket。
  • 提供发送/接受不可靠UDP的能力，这个是浏览器一直欠缺的能力，

相关的规范如下：

  • WebTransport overview 这个规范介绍了WebTransport整体的情况，
  • WebTransport over QUIC 这个规范介绍WebTransport over QUIC的实现规范， 目前版本(M89)的WebTransport实现是基于QUIC的。
  • WebTransport over HTTP/3 这个规范介绍WebTransport over HTTP/3的实现规范，目前版本(M89)还没有实现这这部分。 按照官方的说法是，WebTransport 最终会完全基于HTTP/3 实现，并移除基于QUIC的实现，这个还需要进一步关注。

在浏览器中可以通过URL 来实例化一个WebTransport 实例，比如:

const url = ‘quic-
…
            
Read more