<!DOCTYPE html>
<html>
  <head>  
    <title>HHH</title>
  </head>
  <body>
    <div class="header" id="demo">
      <div class="title"><h2>CTRL</h2></div>
      
       <form action="/video" method="post" enctype="multipart/form-data">
        <img src="{
   
   {videourl}}"> 
        <br>                                   
       </form>
            
      </div>
    
  </body>
</html>

It is a simple operation to obtain video encoding, the video streaming Motion JPEG that comes with flask.

The second is the app.py file

code show as below:

# coding: utf-8
from flask import Flask,render_template,Response,request,url_for
import cv2
import numpy as np
import time
import os


app = Flask(__name__)      

    
@app.route('/video', methods=['GET', 'POST'])
def videoshow():                
        return render_template('index.html',videourl=url_for('video_feed'))
           

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



     
def gen():
    cap = cv2.VideoCapture(0)
    cap.set(3,600)
    cap.set(4,480)
    cap.set(5,40) 
    
    while True:
        ret, img  = cap.read()                             
        ret, jpeg = cv2.imencode('.jpg',img)  # 对图像进行编码输出 jpeg     
        yield(b'--frame\r\n'+b'Content-Type: image/jpeg\r\n\r\n' + jpeg.tobytes() + b'\r\n\r\n')
  
                  
if __name__ == '__main__':
    app.run(host='192.168.137.99', port=5008, debug=True)

To explain briefly:

@app.route('A',methods=['B']) This form is routing, which can be considered as an interactive tool between flask and Raspberry Pi, jumping from the web page address to the web page, or from the web page The data on the jump to the function.

A is the suffix of the webpage address, B is a GET or POST request, when the webpage gets the video, it is a GET request, and when the form is pressed, it is a POST request (the Raspberry Pi receives the webpage button data)

(1) Enter python3 app.py in the raspberry pie terminal flask folder to run the code

python3 app.py

It will return to get a web page address as shown in the figure: http://192.168.137.100:5008/

(2) We open the webpage and enter http://192.168.137.100:5008/video

video is the previous A, which is the name of a route

(3) After inputting, we can get the webpage that is being monitored in real time.

This simply completes the video surveillance function.

Briefly talk about the process of running the code

app.run runs the current ip address and port → runs the first route video, returns the web page index.html → runs videourl, returns the function gen() to encode and transmit the video.

3. Use the ajax form to simulate keystrokes, and transfer data from flask to raspberry pie.

What problem is ajax used to solve?

When the form is pressed, the video on the current page will disappear or the surveillance video cannot be played normally due to encoding errors, or the current page will be refreshed repeatedly, causing the camera to be reopened, and an error will be reported that the camera is already occupied. Ajax can only refresh the form page without refreshing the camera monitoring video.

Below is my full version of index.html and app.py code

I forgot to save it in the computer. I am not in the laboratory. I will make it up next time.

Use flask to get Raspberry Pi camera surveillance video

1. Install the flask library

2. Use flask to open the webpage to transmit video

2.1 On the Raspberry Pi terminal desktop, create a new flask folder

2.2 In the flask folder, create a new template folder and app.py file

2.3 In the template folder, create a new index.html file

2.4 Use flask to run code to upload surveillance video

3. Use the ajax form to simulate keystrokes, and transfer data from flask to raspberry pie.

Guess you like