Динамически изменить источник изображения в колбе

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 и затем использовать метаданные на стороне клиента.посмотрите на колбуВам понадобится некоторая функция на стороне js с интервалами для получения json.Это может быть трудно синхронизировать.

Вы также можете использовать tenorflow.js, чтобы выполнить распознавание лица на стороне клиента, чтобы избежать синхронизации.