Захватите лицо в веб-камеру и покажите ее в реальном времени

Question

В основном у меня есть три файла: app.py camera.py и gallery.html.Я прилагаю свой код для вашей справки.

app.py

from flask import Flask, Response, json, render_template
from werkzeug.utils import secure_filename
from flask import request
from os import path, getcwd
import time
import os

app = Flask(__name__)
import cv2
from camera import VideoCamera


app.config['file_allowed'] = ['image/png', 'image/jpeg']
app.config['train_img'] = path.join(getcwd(), 'train_img')


def gen(camera):
    while True:
        frame = camera.get_frame()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')

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

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/gallery')
def get_gallery():
   images = os.listdir(os.path.join(app.static_folder, "capture_image"))
   return render_template('gallery.html', images=images)
app.run()

camera.py

import cv2
import face_recognition
from PIL import Image
import os
import time



dir_path = "C:/tutorial/face_recognition/venv/src4/capture_image"

class VideoCamera(object):
    def __init__(self):
        self.video = cv2.VideoCapture(0)

    def get_frame(self):
        success, frame = self.video.read()
        small_frame = cv2.resize(frame, (0, 0), fx=0.25, fy=0.25)
        rgb_small_frame = small_frame[:, :, ::-1]
        face_locations = face_recognition.face_locations(rgb_small_frame,number_of_times_to_upsample=2)

        for face_location in face_locations:
            top, right, bottom, left = face_location

            face_image = rgb_small_frame[top:bottom, left:right]
            pil_image = Image.fromarray(face_image)
            File_Formatted = ("%s" % (top)) + ".jpg"
            file_path = os.path.join( dir_path, File_Formatted) 
            pil_image.save(file_path)



        ret, jpeg = cv2.imencode('.jpg', frame)
        return jpeg.tobytes()

gallery.html

<section class="row">
  {% for image in images %}
    <section class="col-md-4 col-sm-6" style="background-color: green;">
      <img src="{{ url_for('static', filename='capture_image/' + image) }}">
    </section>
  {% endfor %}
</section>

Это то, что я сделал до сих пор, веб-камера захватит лицо в веб-камере и сохранит в папке.Затем отправьте изображение в gallery.html.В настоящее время я хочу отображать изображение в режиме реального времени в HTML-шаблоне без обновления при захвате лица, оно будет автоматически отображаться в html gallery.html динамически или в режиме реального времени. Для вашей информации я использую колбу, python и openCV

У меня вопрос, как я могу отобразить захват лица в режиме реального времени без обновления.Когда будет снято новое лицо, оно будет автоматически отображаться в gallery.html?

Надеюсь, что кто-то может ответить на этот вопрос. Спасибо

Answer 1

ХОРОШО.Первым делом скачайте этот модуль: webcamJS .Это модуль javascript, который позволит вам делать фотографии со стороны клиента.Протестируйте его, чтобы ознакомиться с ним (есть много альтернатив, но, на мой взгляд, это одно из самых простых решений).

Но я хорош, я все же поставил минимальный код, чтобы показать вам, как использоватьit:

Вы настраиваете свою HTML-страницу и добавляете следующий div (не вините меня за структуру кода, я знаю, что это не красиво, вся эта мешанина между html и javascript, но она работает):

<div id="my_photo_booth">
    <div id="my_camera"></div>

        <script src="{{url_for('static',filename='js/webcam.min.js')}}"></script>
        <script src="{{url_for('static',filename='audio/shutter.mp3')}}"></script>
        <script src="{{url_for('static',filename='audio/shutter.ogg')}}"></script>

        <!-- Configure a few settings and attach camera -->
        <script language="JavaScript">
            Webcam.set({
                // live preview size
                width: 320,
                height: 240,

                // device capture size
                dest_width: 640,
                dest_height: 480,

                // final cropped size
                crop_width: 480,
                crop_height: 480,

                // format and quality
                image_format: 'jpeg',
                jpeg_quality: 90,

                // flip horizontal (mirror mode)
                flip_horiz: true
            });
            Webcam.attach( '#my_camera' );
        </script>

        <br>
        <div id="results" style="display:none">
            <!-- Your captured image will appear here... -->
        </div>

        <!-- A button for taking snaps -->
        <form>
            <div id="pre_take_buttons">
                <!-- This button is shown before the user takes a snapshot -->
                <input type=button class="btn btn-success btn-squared" value="CAPTURE" onClick="preview_snapshot()">
            </div>

            <div id="post_take_buttons" style="display:none">
                <!-- These buttons are shown after a snapshot is taken -->
                <input type=button class="btn btn-danger btn-squared responsive-width" value="&lt; AGAIN" onClick="cancel_preview()">
                <input type=button class="btn btn-success btn-squared responsive-width" value="SAVE &gt;" onClick="save_photo()" style="font-weight:bold;">
            </div>
        </form>

</div>

Немного javascript для манипулирования захватом фотографии и отправки фотографии на сервер:

<script language="JavaScript">
    // preload shutter audio clip
    var shutter = new Audio();
    shutter.autoplay = false;
    shutter.src = navigator.userAgent.match(/Firefox/) ? '/static/audio/shutter.ogg' : '/static/audio/shutter.mp3';

    function preview_snapshot() {
        // play sound effect
        try { shutter.currentTime = 0; } catch(e) {;} // fails in IE
        shutter.play();

        // freeze camera so user can preview current frame
        Webcam.freeze();

        // swap button sets
        document.getElementById('pre_take_buttons').style.display = 'none';
        document.getElementById('post_take_buttons').style.display = '';
    }

    function cancel_preview() {
        // cancel preview freeze and return to live camera view
        Webcam.unfreeze();

        // swap buttons back to first set
        document.getElementById('pre_take_buttons').style.display = '';
        document.getElementById('post_take_buttons').style.display = 'none';
    }

    function save_photo() {
        // actually snap photo (from preview freeze).
        Webcam.snap( function(data_uri) {
            // display results in page
            console.log(data_uri);

            // shut down camera, stop capturing
            Webcam.reset();

            $.getJSON($SCRIPT_ROOT + '/_photo_cap', {
                photo_cap: data_uri,
            },function(data){
                var response = data.response;
            });

        } );
    }
</script>

Очевидно, этот код вы добавляете в конец HTML-кода.

Я надеюсь, вы справитесь со всем этим.Но интересная часть здесь - это функция save_photo().В этой функции я получаю данные uri из фотографии и отправляю их в колбу через ajax ( Проверьте эту ссылку, чтобы узнать, как использовать jquery / ajax для отправки данных в колбу ).

На стороне колбы:

import base64

@bp.route('/photo')
def photo():
    return render_template('photo.html')


@bp.route('/_photo_cap')
def photo_cap():
    photo_base64 = request.args.get('photo_cap')
    header, encoded = photo_base64.split(",", 1)
    binary_data = base64.b64decode(encoded)
    image_name = "photo.jpeg"

    with open(os.path.join("app/static/images/captures",image_name), "wb") as f:
        f.write(binary_data)
    //facial recognition operations
    response = 'your response'

    return jsonify(response=response)

Здесь есть два маршрута, один для рендеринга страницы захвата фотографий, а другой для получения данных Uri, отправленных через ajax.

В основном, что происходит на втором маршруте, это когда я получаю данные URI, я конвертирую их в base64 и сохраняю их на своем диске.Тогда вот где вы вмешиваетесь.Вы выполняете операции по распознаванию лиц, а затем возвращаете ответ на свою страницу.