记录－交流－Web开发知识分享
极简化，也称为最小化，是从JavaScript源代码中删除所有不必要的字符而不改变其功能的过程。这包括删除空格、注释和分号，以及使用较短的变量名和函数。JavaScript代码极简化可缩小文件大小。
例如，这是极简化前后的代码块：…
npm（node pakage manage） 第三方包的管理器,并且是 Node.js 平台的默认包管理工具。
通过 npm 可以安装、共享、分发代码,管理项目依赖关系。
例子：
随着前端由多页面到单页面，由零散的文件到模块化开发，在一个完整的项目中，package.json 文件无处不在。首先，在项目根目录会有，其次在 node_modules 中也频现。那么这个文件到底是干嘛的，又有什么作用，今天给大家揭晓。
package.json 文件其实就是对项目或者模块包的描述，里面包含许多元信息。比如项目名称，项目版本，项目执行入口文件，项目贡献者等等。npm install 命令会根据这个文件下载所有依赖模块。
package.json 文件创建有两种方式，手动创建或者自动创建。
据报道，如今已安装数亿台视频监控 IP 摄像机。当然，并非所有这些都需要低延迟视频播放。视频监控通常是静态的——流记录到存储中并被分析以检测运动。有很多软件和硬件视频监控解决方案可以很好地完成它们的工作。
在本文中，我们将介绍IP 摄像机的稍微不同的用法，即 -需要低延迟通信的应用程序中的在线广播。
首先，让我们来解决关于网络摄像头和 IP 摄像头的常见术语误解。
网络摄像头是一种没有自己的 CPU 和网络接口的视频捕获设备。网络摄像头需要连接到计算机、智能手机或任何其他设备才能使用其网络功能和 CPU。
IP 摄像机是一个独立的设备，具有自己的网络接口和一个 CPU，用于压缩捕获的视频并将其发送到网络。因此，IP 摄像机是一台独立的微型计算机，可以连接到网络，不需要任何其他设备。也就是说，它直接向 Internet 广播。
低延迟是 IP 摄像机和在线广播的罕见要求。当视频信号源与该流的观众交互时，就会出现对低延迟连接的需求。
低延迟通常是各种游戏使用场景的要求。例如：实时视频拍卖、真人荷官视频赌场、带主播的交互式在线电视节目、远程四轴飞行器控制等。
现场赌场经销商在工作。
在本文中，我们展示了 7 种不同的技术方法，用于在浏览器的网页上显示来自支持 RTSP 的 IP 摄像机的视频流。
通常，浏览器不支持 RTSP，因此使用中间服务器为浏览器转换视频流。
浏览器不支持 RTMP 协议，但猜猜谁支持？忠实的老版Flash Player，虽然不支持所有浏览器，但运行良好，因此可以显示视频流。
播放器的代码基于 Action Script 3 构建，如下所示：
|
1
2
3
|
var nc:NetConnection = nc.connect("rtmp://192.168.88.59/live",obj);var subscribeStream:NetStream = |
参考:https://socket.io/docs/v4/troubleshooting-connection-issues/#a-proxy-in-front-of-your-servers-does-not-accept-the-WebSocket-connection
可能的解释：
请在此处查看文档。
在Nginx代理上,修改nginx配置
如下.
http {
server {
listen 80;
server_name example.com;
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
… 使用Advanced Installer打包安装包-制作windows安装程序
1.下载AdvancedInstaller 19 下载地址
2.下载AdvancedInstaller 19 解压后 双击 AdvancedInstallerPortable.exe，选择Generic 为 Enterprise,language :Chiness Simplified(PRC),点击Create Project。
3.在“Product Details”页面中填写Name、Version、Publisher。设置Control Panel ioc。设置完成后ctrl+s 保存 xxx.aip
4.接下来添加需要打包的文件内容。选择“Files and Folders”->Target Computer->Application Folder->右键->Add Folder,(添加安装目录下的文件夹) Add Files是添加安装目录下的文件（可多选）。 注意：如果是在 ->Add Folder 添加安装目录的外层文件夹的话，安装好的目录会多一层文件夹。
5.添加桌面快捷 ，选中Desktop->右侧空白处右键->New Shortcut To ->Installed File->选择.exe文件->点击Ok…
在许多服务器环境中，通常情况下，您将拥有许多要持久运行的小程序，无论这些程序是小型shell脚本，Node.js应用程序还是任何大型软件包。
通常，外部包随单元文件一起提供，允许它们由 init 系统（如 systemd）管理，或者打包为可由容器引擎管理的 docker 映像。但是，对于未很好地打包的软件，或者对于不希望与服务器上的低级 init 系统交互的用户，拥有轻量级替代方案是有帮助的。
Supervisor是一个进程管理器，它提供了一个单一的界面来管理和监视许多长时间运行的程序。在本教程中，您将在 Linux 服务器上安装 Supervisor，并学习如何管理多个应用程序的 Supervisor 配置。
以下是 Supervisor 的主要优势：
实习期间有个需求，需要前端调用算法模型，封装成npm包，供视频会议组去用，从而在视频会议中实现背景虚化，背景替换功能。后续可能会进一步加入一些好玩的功能，如面部特效(胡子，一字眉)，头发颜色替换等。
实现效果应类似于下面这样
腾讯会议界面：
为了给需求方演示，先采用google的TensorFlow.js的 BodyPix 模型做了一个小demo，先实现背景虚化和背景替换功能，模型的效果较为满意，显示画面流畅。
TensorFlow.js 是一个 JavaScript 库。 我们可以借助于它，来直接用 JavaScript 去创建新的机器学习模型和部署现有模型。对于前端人员入门机器学习十分友好。
TensorFlow.js 提供了很多开箱即用的预训练模型(见下图):
这里选用了图像处理类别里面的BodyPix模型
这是BodyPix的官方演示demo https://storage.googleapis.co...，
demo里的功能对我们的需求来说有些过于复杂，也没有背景替换功能。因此，我自己写了一个针对于背景虚化，背景替换场景的demo。
drawBokehEffect方法；模型没有现成的背景替换的接口，用canvas的绘制方法对模型的toMask方法返回的遮罩对象 WebTransport 是WebRTC体系下的一套浏览器API,提供低延迟,client和server之间双向通信的能力。 核心的能力点包括：
相关的规范如下：
在浏览器中可以通过URL 来实例化一个WebTransport 实例，比如:
const url = ‘quic-
近期评论