Month: 5月 2022

如何在 Ubuntu 上安装和配置 Supervisor

如何在 Ubuntu 上安装和配置 Supervisor

介绍

在许多服务器环境中,通常情况下,您将拥有许多要持久运行的小程序,无论这些程序是小型shell脚本,Node.js应用程序还是任何大型软件包。

通常,外部包随单元文件一起提供,允许它们由 init 系统(如 systemd)管理,或者打包为可由容器引擎管理的 docker 映像。但是,对于未很好地打包的软件,或者对于不希望与服务器上的低级 init 系统交互的用户,拥有轻量级替代方案是有帮助的。

Supervisor是一个进程管理器,它提供了一个单一的界面来管理和监视许多长时间运行的程序。在本教程中,您将在 Linux 服务器上安装 Supervisor,并学习如何管理多个应用程序的 Supervisor 配置。

以下是 Supervisor 的主要优势:

  • 方便:为所有单流程实例编写 rc.d 很不方便。同样,Rc.d 脚本不会自动重新启动崩溃的进程。但是,可以将 Supervisor 配置为在进程崩溃时自动重启进程。
  • 准确性:  在 UNIX 中,通常很难获得进程的准确启动/停止状态。Supervisor 将进程作为子进程启动,因此它知道其子进程的 up/down 状态。这很容易为最终用户查询。

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

背景

实习期间有个需求,需要前端调用算法模型,封装成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方法返回的遮罩对象
    

WebTransport 与 WebCodecs 初探

什么是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-
            

使用OBS-Studio软件推流直播教程,支持RTMP及RTSP两种协议

一、基于RTMP协议的推流直播

首先需要手动搭建RTMP流服务器,搭建过程可以借鉴我的另外一篇文章 传送门 的第章节。
打开OBS软件,新建 场景->新建 来源

image.png

控件位置有个设置,选择服务,填写服务器串流密钥,点击确定

image.png

控件位置,点击开始推流,就OK了
接下来使用VLC软件进行测试下效果
输入网络URL,这块跟上图设置的一致

image.png

看看效果

image.png

搞定!!!

二、基于RTSP协议的推流直播

这个要稍微复杂一点,需要借助OBS的插件去实现该功能。软件地址附上:https://github.com/iamscottxu/obs-rtspserver/releases
另外,OBS还有很多插件,有兴趣的可以去深入学习,具体可以参考

            

Nativefier——快速将网站打包成桌面程序

Nativefier简介

Nativefier是一个命令行工具,仅仅通过一行代码就可以轻松地为任何的网站创建桌面应用程序,应用程序通过Electron打包成系统可执行文件(如.app, .exe等),可以运行在Windows,Mac和Linux系统上。

Github地址:https://github.com/jiahaog/nativefier ,目前有1.8万的Star,是一个非常赞的开源项目。…

Ajax实现页面自动无闪刷新实例解析

下面给大家介绍jQuery实现AJAX定时局部页面刷新

不时,我需要某种机制,不断刷新网页,以提供一个实时的仪表板某种。如果我只能刷新一个特定的页面的一部分,这将是很大的,例如:仪表盘上的交通灯显示系统状态。

这是很容易通过使用jQuery JavaScript库,只刷新页面的一部分。一旦我们纳入我们的页面的jQuery库,我们只需要1行的JavaScript得到它的工作:

<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>

所以我们只要我们的页面放入这个小的JS代码片段刷新里面的内容ID标签的一切,让我们说,每5秒:

setInterval(function() {
  $("#content").load(location.href+" #content>*","");
}, 5000);

这就是它!!因此,这是很容易完成一些实时监控的行为,只是那行代码。没有更奇怪的元刷新标记或iframe一种解决方法,在Web应用程序。

每5秒,我们将刷新内容相同的URL和所有元素,驻留在元素ID为content元素的内容:内容。