在Flask中动态更改图像源

Question

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

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

在Flask部分，我收到图像并使用此函数处理它们：

@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在客户端执行面部检测以避免同步。