introduction

スクリーンショット 2019-12-04 16.17.55.png Il y a des gens qui font du smash sans travailler dans une certaine activité du club, c'est donc une histoire que j'ai rendu possible de voir l'état de la salle du club à tout moment. Avec OpenCV et WebSocket, je pourrais facilement créer quelque chose qui peut être vu en temps réel. Je vais le poser.

Environnement d'exploitation

CentOS Linux release 7.5.1804 Python 3.6.8 Caméra Web Logicool C270

la mise en oeuvre

Installez ce qui suit

pip install opencv-python
pip install flask
pip install gevent
pip install gevent-websocket

Structure du répertoire

├ main.py
├ templates/
     ├ index.html

Serveur: main.py

Vous pouvez maintenant vous connecter à la caméra. Il semble spécifier la caméra à connecter avec un argument. Si une seule est connectée, 0 devrait être correct.

#Connectez-vous avec une caméra USB
capture = cv2.VideoCapture(0)

Chargez un cadre à partir de la caméra. Le cadre correspond aux données d'image.

et, frame = capture.read() #Lire le cadre de la caméra

Convertir en image jpg. Encimg correspond aux données d'image. 90 est le taux de compression. Spécifiez 1 à 100. Plus la compression est faible, plus la compression est élevée.

#Paramètres lors de l'encodage en jpg
encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), 90]

result, encimg = cv2.imencode('.jpg', frame, encode_param) #Convertir en jpg

Programme complet

import cv2
import base64
from flask import Flask, request, render_template
from gevent import pywsgi
from geventwebsocket.handler import WebSocketHandler

app = Flask(__name__)

#Connectez-vous avec une caméra USB
capture = cv2.VideoCapture(0)

#Paramètres lors de l'encodage en jpg
encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), 90]

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

@app.route('/live')
def live():
    if request.environ.get('wsgi.websocket'):
        ws = request.environ['wsgi.websocket']
        while True:
            ret, frame = capture.read() #Importer l'image de la caméra
            result, encimg = cv2.imencode('.jpg', frame, encode_param) #Convertir en jpg
            ws.send(base64.b64encode(encimg).decode('ascii')) #Envoyer une image jpg convertie en base64 avec webbsocket

　　　
def main():
    app.debug = True
    server = pywsgi.WSGIServer(("", 8080), app, handler_class=WebSocketHandler)
    server.serve_forever()
    
if __name__ == '__main__':
    main()

Recto: index.html

Mettez simplement à jour l'image lorsque vous la recevez.

<html>
    <head>
        <title>●REC</title>
    </head>
    <body>
        <img id="player" src=""/>
        <script>
            const ws = new WebSocket("wss://localhost/live");
            const player = document.getElementById("player");
            #Traitement au moment de la réception
            ws.onmessage = function(e) {
                player.setAttribute("src", "data:image/jpg;base64,"+e.data)
            }
        </script>
    </body>
</html>

Si vous pouvez le faire jusqu'à présent, vous devriez pouvoir voir l'image en accédant à localhost: 8080.

Nginx nginx conf.

server{
    listen 80;
    server_name hostname;
    return 301 https://$host$request_uri;
}

server{
    listen 443 ssl;
    client_max_body_size 500M;
    server_name    hostname;

    ssl_certificate         cert.pem;
    ssl_certificate_key     privkey.pem;

    location / {
        proxy_pass    http://localhost:8080/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forward-Proto http;
        proxy_set_header X-Nginx-Proxy true;
        proxy_redirect off;
    }
}

en conclusion

Des mesures ont été prises ... Image from iOS (1).jpg

référence

Communication en temps réel à l'aide de Flask et WebSocket Exécutez OpenCV3 sur Python3. Préparation à l'introduction à l'analyse des données d'image.

[PYTHON] Je t'ai vu ne pas travailler