在网络摄像头中捕捉人脸并实时显示到烧瓶中

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()

图库.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 模块。测试它以熟悉它（有很多替代方案，但我认为它是最简单的解决方案之一）。

但我很好，我还是放了一个最小的代码来告诉你如何使用它：

您配置您的 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() 函数。在这个函数中，我从照片中获取data uri 并通过ajax (Check this link to see how to use jquery / ajax to send data to flask) 将其发送到flask。

在烧瓶一侧：

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)

这里有两种路由，一种是渲染拍照页面，另一种是接收通过ajax发送的数据uri。

基本上，第二条路线发生的事情是我获取数据 uri，将其转换为 base64 并将其存储在我的磁盘上。那么这就是你干预的地方。您执行面部识别操作，然后将响应返回到您的页面。