在Flask中动态更改图像源

Question

我正在使用Flask制作一个小型人脸检测应用程序。 我想实现当检测到面部时，它们将在HTML页面中更新。

在javascript部分中，我正在使用getUserMedia将摄像头图像从客户端流式传输到服务器。

在烧瓶部分，我接收图像并使用以下功能对其进行处理：

@app.route('/image.jpeg', methods=['POST'])
def on_image_captured():
    data = request.data
    image_file = request.files['image']
    image = Image.open(image_file)
    image = np.array(image)
    image = image[..., :3]
    # faces is a list of detected faces (a list of numpy array)
    faces = system.detect_faces(image)
    return ''

我的HTML有两件事要呈现：第一件事是流式视频，另一件事是检测到的面孔。 我的问题是，如何将检测到的人脸（ faces变量）发送到HTML，以便它将动态呈现页面上可变数量的人脸？

Answer 1

您可以通过多种方式执行此操作。 可能最简单的方法（但滞后时间最多）是将图像以脸部周围的正方形发送回去。 您可以使用opencv绘图功能在python中轻松做到这一点。

或者，您可以发送回json对象，然后在客户端使用元数据。 看看烧瓶jsonify。 您将需要在js端带有一些间隔的函数来获取json。 这可能很难同步。

您也可以使用tensorflow.js在客户端执行人脸检测以避免同步。