基本上我有三个文件，分别是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中。供您参考的信息，我正在使用flask，python和openCV
我的问题是我如何无需刷新即可实时显示人脸捕获。捕获新面孔后，它会自动显示在gallery.html中吗？
希望有人可以在这件事上考虑。谢谢
答案 0 :(得分：0)
好的。首先要下载此模块：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="< AGAIN" onClick="cancel_preview()">
<input type=button class="btn btn-success btn-squared responsive-width" value="SAVE >" 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，然后将其存储在磁盘上。然后就是您进行干预的地方。您进行面部识别操作，然后将响应返回到页面。