首先项目结构如下：

项目结构

这个项目是用之前Flask+opencv那个项目改的，所以请无视main.py，server.py，upload.html，upload_ok.html，以及images文件夹

需要调用的包如下：

需要调用的包

我将原main.py里面的主程序写到了一个thread里面，到时候在开启Flask的同时一并启动这个thread，开启摄像头。

原main.py主程序

剩下的几个函数直接从main.py中复制过来即可

这几个都是原main.py中的函数

然后我们再来看看接口函数和主函数：

接口函数和主函数

先说接口函数，一开始接到get请求之后给前端返回index.html，index.html里面有一个开始按钮，点击之后post一个请求，请求中包含一个hmessage=start，接到该请求之后，后端会返回index2.html，并开始将摄像头中接收到的人脸中心位置存入到hori_box和vert_box中（间隔0.1s），index2.html中同样有一个停止按钮，点击之后发送post请求，这次hmessage=stop，接收到该请求之后后端会停止存入中心位置，向前端返回index3.html，并将hori_box和vert_box返回给前端。

最后我们来看看index.html，index2.html，index3.html：

index.html

index2.html

index3.html

其实index3.html下面还有一段<script>用d3绘制折线图</script>的代码没有放上来，相信大家肯定都知道怎么写对吧

（运行结果已经发到群里面啦，大家感兴趣的话可以点开看看）