需求

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

分析

通过网上查看各方资料，以及自己的多次尝试，最终发现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端人脸识别的一些新得，时间关系写的比较粗略，见谅。