需求

最近有一个需求，用户打开一个网页查看单位门口的一个海康摄像头，延时不能太大，该网页需要实现人脸识别功能。

分析

通过网上查看各方资料，以及自己的多次尝试，最终发现web端实现监控摄像头人脸识别最适合我们的方法是ffmpeg+websocket+jsmpeg实现视频流实时绘制到canvas上，然后使用TensorFlow.js+face-api.js读取canvas上的图像进行人脸识别。

实现步骤

1、安装配置ffmpeg+websocket+jsmpeg

安装配置ffmpeg+websocket+jsmpeg网上的方法很多，ffmpeg主要用来读取海康监控摄像头的RTSP视频流并转码为二进制流推送到websocket服务上。
我用到的ffmpeg推送代码如下：

ffmpeg -rtsp_transport tcp -i "rtsp://admin:海康摄像头密码@192.168.1.4:554/h264/ch1/main/av_stream" -q 0 -f mpegts -codec:v mpeg1video -s 1000x600 -r 30 http://192.168.1.16:8081/socket密码

启动websocket的代码如下

node websocket-relay.js socket密码 8081 8082

注意socket密码上下统一。通过这个方法可以把RTSP的视频流推送到socket服务器。下面就是绘制视频流。

2、绘制视频流

绘制视频流使用的是jsmpeg，下面是我实现的方法：

<div><canvas id="video-canvas" style="display: block;"></canvas></div>
<script type="text/javascript">var canvasVideo = document.getElementById('video-canvas');var url = 'ws://192.168.1.16:8082/';var player = new JSMpeg.Player(url, {canvas: canvasVideo,audio: false,preserveDrawingBuffer:true});</script>

由于jsmpeg通过显卡进行绘制，因此如果不设置preserveDrawingBuffer:true这个参数会导致face-api.js无法读取canvas中当前的图像。

3、TensorFlow.js+face-api.js实现人脸识别

jsmpeg实时在canvas上重绘除了视频流，下面就看google的前端深度学习框架tensorFlow.js了，它可以调用Python中TensorFlow或keras已训练好的模型,也可以自己训练模型或者在已有模型上继续训练，face-api.js就是基于temsorFlow.js实现的一个人脸识别库。
通过face-api官方demo结合上面绘制好的canvas就可以实现视频中人脸识别了。具体教程还是得看官方教程比较复杂，我从官方demo中获取到的精华就是

        await changeFaceDetector(TINY_FACE_DETECTOR);faceMatcher = await createBbtFaceMatcher(1)

updateResults函数中读取canvas我是这样写的,输入的图像通过canvas中的toDataURL转为base64编码作为输入。

$("#imgUrlInput").attr("src", canvasVideo.toDataURL("image/png"));const inputImgEl = $("#imgUrlInput").get(0);const options = getFaceDetectorOptions()const results = await faceapi.detectAllFaces(inputImgEl, options).withFaceLandmarks().withFaceDescriptors()drawFaceRecognitionResults(results);

run函数中我使用了小脸识别，并且使用一张基图作为比对图。

结果

最终可以通过PC端访问也可以通过手机端访问查看摄像头视频并实现实时人脸识别，识别结果在服务器上存储。因为是实时人脸识别，因此我们还通过drawFaceRecognitionResults函数绘制了被识别人的信息实时显示在这个人的头顶上，如姓名、性别、科室、特长等信息。另外，网页打开的视频流运行一天延时依然能够保持在0.5s以内，这个还是比较满意的，之前试了几种方法延时都很大。

海康摄像头RTSP视频流-Web端人脸识别-ffmpeg+websocket+jsmpeg相关推荐

海康摄像头rtsp视频流html直播展示(适用360浏览器)和转rtmp流的一种配置方式
背景: 因一个项目的需要,现有海康摄像头的rtsp流地址,想在web端进行监控视频直播展示,由于实际环境限制,自行搭建流媒体服务器将其转换为更为通用的rtmp流格式的方案无法落地:故最终仍使用rts ...
网络摄像头RTSP视频流WEB端实时播放实现方案
IPC视频流怎么实时在WEB浏览器播放,视频流格式是RTSP. 下面我整理了自己实现的方案以及网上看到的一些方案一.FFmpeg + nginx 将转 hls 通过 video.js 在支持h5浏览 ...
【每天一个没用的干货】海康摄像头rtsp流不登录即播放
众所周知, 通过VLC播放海康摄像头的视频流, 需要用rtsp://[IP地址]:554 然后输上用户名和密码 By chance 我从海康官网下载了软件VSPlayer(?你是不是对visual s ...
[转载]海康摄像头sdk与web教程
[转载]海康摄像头sdk与web教程原文地址:https://blog.csdn.net/qq_35583089/article/details/80631069 查看原文感谢大佬的分享,以下为原 ...
rtsp_client 拉取海康摄像头的视频流
RTSP的协议我这里就不做过多介绍了,网上随便百度一下,就能搜索到很好的文章.后续再贴上链接.我这里主要先记录一下海康的摘要认证. 海康的摘要认证主要是生成:response response的组成: ...
百度AI实现Web端人脸识别登陆-Springboot-Vue/element-ui
3.8 人脸识别登陆Controller 1.效果图后台获取的数据 {"face_token":"efb5996c1707850f81e884ef190c984b&qu ...
unity通过rtsp协议实现海康摄像头的实时连接（一）
一.前一段时间实现了通过winform调取摄像头的实时监控运行程序,详见源码:https://download.csdn.net/download/lsc_hei/10652399 二.现在需求改变, ...
利用flask解析海康摄像头视频
利用flask解析海康摄像头视频利用flask解析海康摄像头和大华摄像头的视频一.安装依赖包二.获取海康摄像头视频流三.将视频流输出到Web页面四. 创建HTML模板文件利用flask解析 ...
vue webRTC播放海康摄像头实时画面延迟1s内
最终效果主要参考地址,:https://blog.csdn.net/qq_45777115/article/details/118054927?spm=1001.2014.3001.5502 htt ...
使用海康摄像头保存的mp4文件，无法web端预览的问题，现已解决，记录一下
最近在做一个项目,需要用到海康的录像视频,在自己开发的web端能够正常播放,格式是MP4的,本来以为是个简单的需求,没想到遇到了好多坑,特此记录: 首先,由于是联动系统,项目用到的录像文件存到的是另一 ...

海康摄像头RTSP视频流-Web端人脸识别-ffmpeg+websocket+jsmpeg

需求

分析

实现步骤

1、安装配置ffmpeg+websocket+jsmpeg

2、绘制视频流

3、TensorFlow.js+face-api.js实现人脸识别

结果

海康摄像头RTSP视频流-Web端人脸识别-ffmpeg+websocket+jsmpeg相关推荐

最新文章

热门文章

海康摄像头RTSP视频流-Web端人脸识别-ffmpeg+websocket+jsmpeg

需求

分析

实现步骤

1、 安装配置ffmpeg+websocket+jsmpeg

2、绘制视频流

3、TensorFlow.js+face-api.js实现人脸识别

结果

海康摄像头RTSP视频流-Web端人脸识别-ffmpeg+websocket+jsmpeg相关推荐

最新文章

热门文章

1、安装配置ffmpeg+websocket+jsmpeg