Introduction

スクリーンショット 2019-12-04 16.17.55.png There are people who do smashing without working in a certain club activity, so it is a story that I made it possible to see the state of the club room at any time. With OpenCV and WebSocket, I could easily make something that can be seen in real time. I will put it down.

Operating environment

CentOS Linux release 7.5.1804 Python 3.6.8 Logitech Webcam C270

Implementation

Install the following

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

Directory structure

├ main.py
├ templates/
     ├ index.html

Server: main.py

You can now connect to the camera. It seems to specify the camera to be connected with the argument. If only one is connected, 0 should be okay.

#Connect with usbb camera
capture = cv2.VideoCapture(0)

Read the frame from the camera. Frame is the image data.

et, frame = capture.read() #Read frame from camera

Convert to image jpg. Encimg is the image data. 90 is the compression ratio. Specify 1-100. The lower the compression ratio, the higher the compression.

#Parameters when encoding to jpg
encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), 90]

result, encimg = cv2.imencode('.jpg', frame, encode_param) #Convert to jpg

Whole program

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

app = Flask(__name__)

#Connect with usb camera
capture = cv2.VideoCapture(0)

#Parameters when encoding to 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() #Image reading from camera
            result, encimg = cv2.imencode('.jpg', frame, encode_param) #Convert to jpg
            ws.send(base64.b64encode(encimg).decode('ascii')) #Send jpg image converted to base64 with webbsocket

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

Front: index.html

Just update the image when you receive it.

<html>
    <head>
        <title>●REC</title>
    </head>
    <body>
        <img id="player" src=""/>
        <script>
            const ws = new WebSocket("wss://localhost/live");
            const player = document.getElementById("player");
            #Processing at the time of receipt
            ws.onmessage = function(e) {
                player.setAttribute("src", "data:image/jpg;base64,"+e.data)
            }
        </script>
    </body>
</html>

If you can do so far, you should be able to see the image by accessing 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;
    }
}

in conclusion

Measures were taken ... Image from iOS (1).jpg

reference

Real-time communication using Flask and WebSocket Run OpenCV3 on Python3. Preparation for an introduction to image data analysis.

[PYTHON] I saw you not working