? Videostreaming con Flask y OpenCV | Python

Administrador

hace 4 años

En este post podrás encontrar los programas realizados en el videotutorial: ? Videostreaming con Flask y OpenCV | Python en el que construimos una pequeña aplicación Web con ayuda de Flask y OpenCV. ?‍? Esta aplicación consta de un videostreaming/video en directo, en el cual hemos aplicado detección facial. ¡Anímate a probarlo!.

¡Vamos con la programación!

Para una explicación más detallada del programa que veremos a continuación, por favor dirígete al videotutorial de mi canal.

Aplicación web con Flask y OpenCV

from flask import Flask
from flask import render_template
from flask import Response
import cv2

app = Flask(__name__)
cap = cv2.VideoCapture(0, cv2.CAP_DSHOW)
face_detector = cv2.CascadeClassifier(cv2.data.haarcascades +
     "haarcascade_frontalface_default.xml")

def generate():
     while True:
          ret, frame = cap.read()
          if ret:
               gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
               faces = face_detector.detectMultiScale(gray, 1.3, 5)
               for (x, y, w, h) in faces:
                    cv2.rectangle(frame, (x, y), (x + w, y + h), (0, 255, 0), 2)
               (flag, encodedImage) = cv2.imencode(".jpg", frame)
               if not flag:
                    continue
               yield(b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' +
                    bytearray(encodedImage) + b'\r\n')

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

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

if __name__ == "__main__":
     app.run(debug=False)

cap.release()

Plantilla HTML

<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Videostreaming</title>
     <style>
          .container{
               margin: 0;
               padding: 0;
               width: 100%;
               height: 100vh;
               background-color: #E2D8F8;
               color: black;
               text-align: center;
          }
     </style>
</head>
<body class = "container">
     <h1>Video en directo</h1>
     <img src="{{ url_for('video_feed') }}">
</body>
</html>

¡Vamos con la programación!

Aplicación web con Flask y OpenCV

Plantilla HTML

Referencias

Documentación y recursos FLASK:

Documentación y recursos HTML: