Aujourd’hui, nous allons voir comment intégrer une application OpenCV dans une application Web. En effet, nous allons utiliser le Flask, un framework de développement web. Cet article ne se veut pas être un guide complet de la programmation avec Flask, mais une première brique pour vos futurs développements. Nous allons nous intéresser à un cas d’utilisation simple : lire une vidéo dans un navigateur web, ce qui permettrait de présenter plus simplement les résultats de vos algorithmes.

Intégrer OpenCV dans une application web avec Flask

Pour commencer du bon pied, installons Flask. Pour cela rien de plus simple :

pip3 install flask

Voilà, nous pouvons commencer !

La structure de notre projet sera la suivante :

|--- serveur.py
|--- video.py
|--- video.avi
|    |--- templates
|    |    |--- index.html

Le fichier serveur.py contiendra l’application web et fera le lien entre l’interface et la partie traitement d’image contenue dans le fichier video.py. Afin de pouvoir tester notre application, nous allons lire la vidéo stockée à la racine de notre projet. Il est cependant possible d’afficher le flux vidéo d’une caméra ou encore un flux vidéo http. Enfin, dans le dossier templates, nous stockerons la trame de notre page web.

Commençons par cette dernière.

Interface web

Dans un fichier ‘index.html’, entrez les lignes suivantes :

<html>
  <head>
    <title>Exemple</title>
  </head>
  <body>
    <h1>Visualisation d'une vidéo</h1>
    <img src="video_feed">
  </body>
</html>

Si vous connaissez un peu de html, vous comprendrez aisément ce que nous faisons. Pour ceux ayant peu de connaissances, explicitons un peu ce code. Nous avons deux parties dans ce code: l’en-tête (entre les balises head) et le corps (entre les balises body). Dans l’en-tête, nous déclarons le titre de la page. Comme il s’agit d’un exemple, nous allons l’appeler … Exemple. Original non ? Dans le corps de notre page html, nous définissons un titre entre les balises h1 et nous déclarons une image dont la source proviendra de la fonction video_seed de notre application web.

Application web

Passons maintenant à l’application web : le fichier ‘serveur.py’.

from flask import Flask, render_template, Response
from video import Video

app = Flask(__name__)
vid=Video()

def gen():
    while True:
        frame = vid.get_frame()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

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

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

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

De la librairie flask, nous importons les modules Flask, render_template et Response. Nous importons également la classe Video du fichier video.py que nous verrons à l’étape suivante.

Nous utilisons la classe Flask pour instancier l’objet app ligne 4. Il s’agit de notre application / site web. Nous faisons de même avec l’objet vid de la classe Video ligne 5.

Nous commençons notre application par définir la fonction gen (ligne 7), qui est la fonction de génération de flux vidéos. En d’autres termes, sur toute la durée de l’utilisation de l’application, nous allons récupérer les images en format jpeg grâce à la fonction get_frame de l’objet vid.

Nous définissons ensuite la fonction video  (ligne 14) qui s’occupe d’utiliser le template que nous avons défini précédemment. Cette fonction est décorée par le décorateur @app.route, qui prend en paramètre une route. Cette route est celle par laquelle notre fonction sera accessible.

Lors de la définissions du fichier ‘index.html’, nous avons parlé de la fonction video_seed . Cette fonction (ligne 18) s’occupe de retourner la réponse de la fonction gen.

Enfin, nous lançons notre application ligne 22-23 qui sera disponible à l’adresse 0.0.0.0:5000, C’est-à-dire notre ordinateur.

Il ne nous reste plus qu’à définir notre application OpenCV.

Application OpenCV

import cv2

class Video:
    def __init__(self):
        self.cap=cv2.VideoCapture('test.avi',0)

    def get_frame(self):
        _,self.frame=self.cap.read()
        ret, jpeg = cv2.imencode('.jpg', self.frame)        
        return jpeg.tobytes()

if __name__ == '__main__':
    vid = Video()

L’application ‘video.py’  est une application standard où l’on ouvre une vidéo (l. 5) afin de pouvoir en lire les images (l. 8). Nous remarquons la fonction get_frame  (l. 7) que nous avons appelé dans notre application web. Cette fonction, une fois appelée, récupère une image de la vidéo et la renvoie encodée en JPEG en tableau d’octet.

Test de l’application

Nos fichiers étant prêts, nous pouvons lancer notre application.

python3 serveur.py
Flask running video opencv

L’application est lancée

Nous pouvons donc accéder à l’application à l’adresse http://0.0.0.0:5000

La lecture de la vidéo est bien en cour de lecture. Nous retrouvons les éléments que nous définis dans le fichier ‘index.html’.

Et maintenant ?

Nous avons réussi à afficher une vidéo dans une application web, grâce à Flask. Si vous voulez continuer à approfondir vos connaissances sur Flask, je vous invite à suivre ce cours OpenClassrooms. Et sinon, pourquoi ne pas utiliser la caméra de votre ordinateur et afficher le résultat d’une détection de visage dans votre navigateur ?


0 commentaire

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.