使用flask和python的网页中的网络摄像头

时间:2019-02-20 12:13:18

标签: python flask

我已经使用kerastensorflow创建了人脸识别模型,现在我正尝试使用flask和python将其转换为Web应用程序。我的要求是,我需要在网页上显示一个实时网络摄像头,然后单击一个按钮,它应该拍摄照片并将其保存到指定的目录,然后应用程序应该使用该照片来识别该人。如果在数据集中找不到该人,则应该在网页上显示一条消息,提示已找到未知身份。为了完成这项工作,我已经开始学习烧瓶,此后,对于要求而言,这对我来说非常困难。有人帮我解决这种情况。

2 个答案:

答案 0 :(得分:0)

您要做的是通过使用网络摄像头流使用Flask进行流传输,并通过机器学习进行处理。 flask中Web服务器的主要脚本将允许您加载index.html文件,然后通过/ video_feed路径流式传输每个帧:

from flask import Flask, render_template, Response, jsonify
from camera import VideoCamera
import cv2

app = Flask(__name__)

video_stream = VideoCamera()

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

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(video_stream),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':
    app.run(host='127.0.0.1', debug=True,port="5000")

然后,您将需要VideoCamera类,您将处理每个帧,并在其中可以对帧进行所需的每个预测或处理。 camera.py 文件:

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

    def __del__(self):
        self.video.release()        

    def get_frame(self):
        ret, frame = self.video.read()

        # DO WHAT YOU WANT WITH TENSORFLOW / KERAS AND OPENCV

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

        return jpeg.tobytes()

最后是在html文件 index.html (在 templates 文件夹中)中显示视频流的页面:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Video Stream</title>
  </head>
  <body>
  <img src="{{ url_for('video_feed') }}" />
  </body>
</html>

答案 1 :(得分:0)

from flask import Flask,request,jsonify
import numpy as np
import cv2
import tensorflow as tf
import base64

app = Flask(__name__)
graph = tf.get_default_graph()


@app.route('/')
def hello_world():
    return """
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <video id="video" width="640" height="480" autoplay></video>
    <button id="snap">Snap Photo</button>
    <canvas id="canvas" width="640" height="480"></canvas>
    </body>
    <script>

    var video = document.getElementById('video');
    if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
            //video.src = window.URL.createObjectURL(stream);
            video.srcObject = stream;
            video.play();
        });
    }

    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var video = document.getElementById('video');

    // Trigger photo take
    document.getElementById("snap").addEventListener("click", function() {
        context.drawImage(video, 0, 0, 640, 480);
    var request = new XMLHttpRequest();
    request.open('POST', '/submit?image=' + video.toString('base64'), true);
    request.send();
    });



</script>
</html>
    """

# HtmlVideoElement

@app.route('/test',methods=['GET'])
def test():
    return "hello world!"

@app.route('/submit',methods=['POST'])
def submit():
    image = request.args.get('image')

    print(type(image))
    return ""`

我已经这样做了,但是问题是,当在装饰器中调用API / submit时,我在打印图像变量类型时将图像存储为HTMLVideoElement,我不知道如何将其转换为Jpeg格式,将其用于其他目的。