Как изменить веб-камеру opencv файла Python с помощью Flask?

Я работаю над проектом распознавания лиц, который отправляет gen_frame() в video_feed для отображения в моем html-файле. Однако я не могу найти правильный способ отправить значение localStorage на сервер Flask. У кого-нибудь есть предложения, как изменить веб-камеру с помощью localStorage?

Вот питон attendance_taker.py, содержащий метод gen_frame:

def gen_frame():
    cap = cv2.VideoCapture(0) # This is what I want to change using localstorage
    face_recognizer = Face_Recognizer()

    while True:
        success, frame = cap.read()
        if not success:
            break

        face_recognizer.process(frame)

        ret, buffer = cv2.imencode('.jpg', frame)
        frame = buffer.tobytes()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')`

Вот код JavaScript:

window.addEventListener("DOMContentLoaded", function () {
    var webcamSelect = document.getElementById("webcamSelect");

    webcamSelect.addEventListener("change", function () {
        var selectedWebcamIndex = webcamSelect.selectedIndex;
        localStorage.setItem("selectedWebcamIndex", selectedWebcamIndex);
    });

    navigator.mediaDevices
        .enumerateDevices()
        .then((devices) => {
            var videoDevices = devices.filter(
                (device) => device.kind === "videoinput",
            );
            videoDevices.forEach((device, index) => {
                var option = document.createElement("option");
                option.value = index;
                option.text = device.label || `Webcam ${index + 1}`;
                webcamSelect.appendChild(option);
            });

            var selectedWebcamIndex = localStorage.getItem(
                "selectedWebcamIndex",
            );
            if (selectedWebcamIndex) {
                webcamSelect.selectedIndex = selectedWebcamIndex;
            }
        })
        .catch((error) => {
            console.error("Error enumerating devices:", error);
        });
});

app.py

@app.route('/video_feed')
def video_feed():
    return Response(gen_frame(), mimetype='multipart/x-mixed-replace; boundary=frame')

Я пробовал использовать ajax из jquery, но не работает.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Относительно: отправка данных обратно в колбу

«Я попробовал AJAX из jQuery, но он не работает», AJAX, возможно, немного устарел, и если он не работает с jQuery, возможно, используйте обычный JavaScript.

Помимо этого: вы можете сделать это из почтового запроса непосредственно в файле вашего сервера Flask, например:

from flask import Flask, render_template, request
import cv2


app = Flask(__name__)


def gen_frame(webcam_val):
  cap = cv2.VideoCapture(webcam_val)
  # ...

@app.route('/your/route', methods=["GET", "POST"])
def get_webcam_value():
  if request.method == 'POST': # method on POST (when form is submitted)
    value = request.form['value'] # gets the value of the input field with the attribute `value` (`name = "value"`)
    gen_frame(value) # call your gen_frame function, and pass the value through
    
  return render_template('yourfile.html')
<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>your file</title>
</head>
<body>
  
  <form action = "your/action" method = "POST"> <!-- create form with method `POST` -->
    <label>
      <input type = "number" name = "value" placeholder = "camera" /> <!-- created an html input with type `number` and name `value` (to be accessed by our flask) -->
    </label>

    <input type = "submit" value = "change camera" /> <!-- to submit the form when the user is ready -->
  </form>

</body>
</html>

не знаю, как настроена ваша файловая структура и код вашего сервера, поэтому дайте мне знать, если вам нужно что-то изменить.

*(публикация этого ответа как нового, а не отредактированного)

Другие вопросы по теме