web cam in a webpage using flask and python

10,571

Solution 1

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 ""`

i have done like this, but the problem is that, when calling the API /submit in decorator, i get my image stored as HTMLVideoElement when print the type of image variable, I dont know how to convert it into Jpeg format and use it for further purpose.

Solution 2

What you want to do is streaming with Flask by using the webcam Stream and handle it with Machine Learning. Your main script for the web server in flask will allow you to load your index.html file and then Stream each frame through the /video_feed path:

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

Then you need the VideoCamera class in wich you will handle each frame and where you can make every prediction or processing you want on the frames. The camera.py file :

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

And finally the page showing the video Stream in the html file index.html (in the templates/ folder, if not exist generate it) :

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

Related videos on Youtube

Jacob Lawrence
Author by

Jacob Lawrence

Updated on May 26, 2022

Comments

  • Jacob Lawrence
    Jacob Lawrence almost 2 years

    I have created a face recognition model using keras and tensorflow, and now I am trying to convert it as a web application using flask and python. My requirement is that, I need a live webcam displayed on the webpage and by clicking on a button it should take the picture and save it to a specified directory, and using that picture the application should recognize the person. if the person is not found in the dataset then a message should be displayed over the webpage that unknown identity is been found. To do this job I have started learning flask and after that when it comes to the requirement it was very difficult for me. somebody help me out to solve this situation.

    • joppich
      joppich about 5 years
      What have you tried so far? What exactly are the difficulties you encountered? Also, are you sure the machine-learning and artificial intelligence tags apply for this question?
    • Jacob Lawrence
      Jacob Lawrence about 5 years
      This is my first time attempt to build a web application.I tagged for machine-learning and artificial intelligence because i thought they have their experience in deploying their model into production
  • GhostDede
    GhostDede over 4 years
    I do not understand is it possible to send result of tensorflow to web page while camera is open in that application ? If it is possible how it can be done ?
  • F Blanchet
    F Blanchet over 4 years
    If you want to send the result you need to make your prediction based on the frame, store the result (in a db, csv, json, or what you want) and then make an API endpoint on your flask server to request the data.
  • GhostDede
    GhostDede over 4 years
    How can make an API endpoint on my flask server to request data ?
  • F Blanchet
    F Blanchet over 4 years
    @app.route('/api') def api(): #Request_data_stored return jsonify({'result' : output}), 200
  • F Blanchet
    F Blanchet over 4 years
    In client side you can ask the data in javascript with Ajax
  • akzarma
    akzarma over 3 years
    "video.toString('base64')" would return non-usable Object string, you will need to do "canvas.toDataURL()" instead.