Building a Video Streaming Web Server with Raspberry Pi and Flask

MAKER：mjrovai / 译：Cherry

In this project, we will primarily learn two modules.

• Streaming video

• Integrating video into a web server

Materials List

1. Raspberry Pi V3 X1

2. Raspberry Pi 3 B model with NoIR night camera X1

3. DHT22 temperature sensor X1

4. DHT22 relative humidity sensor X1

5. Resistor 4K7 ohm X1

In this project, I used the night camera, but you can also use a regular Raspberry Pi camera (or any USB camera) instead. The DHT22 is optional. In this tutorial, I will demonstrate how to stream video to a web page and use sensors to display historical data.

Installing the Camera

1. Turn off the Raspberry Pi and install the camera on its specific port as shown below:

2. Turn on your Raspberry Pi and go to the main menu of the Raspberry Pi configuration tool, and confirm if the camera interface is enabled: If you need to enable it, press [OK] and restart your Raspberry Pi.

Do a simple test to verify if everything is working:

   raspistill -o /Desktop/image.png 

You will see an image icon appear on your Raspberry Pi desktop. Click to open it. If the image appears, it means you are ready to stream video! If you want more information about the camera, you can click Getting started with picamera.

Installing FLASK

There are several ways to stream video. I think the best (and “easiest”) way is to use Flask developed by Miguel Grinberg. For detailed instructions on how Flask does this, refer to his excellent tutorial: flask-video-streaming-revisited.

In this tutorial: The Python web server will use Flask and Raspberry Pi. We will learn more about how Flask works, how to implement a web server, and how to capture data from sensors and display their status on the web page. The first part of this tutorial is the video stream sent to our frontend.

Create a web server environment:

The first thing to do is install Flask on your Raspberry Pi. If not, go to the terminal and enter:

sudo apt-get install python3-flask

When you start a new project, the best way is to create a folder to keep your files. For example, go back to your home directory:

cd Documents

Create a new folder, for example:

mkdir camWebServer

Following the above command, create a folder named “camWebServer” and save our Python script here: /home/pi/Document/camWebServer

Now, in this folder, we will create two subfolders: static for CSS, and templates for HTML files. Go to your newly created folder:

cd camWebServer

And create 2 new subfolders:

mkdir static

and

mkdir templates

Done! Let’s stream video with the Python web server application in the created environment.

Creating a Video Streaming Server

First, download Miguel Grinberg’s Raspberry Pi camera package: camera_pi.py and save it in the created directory camWebServer. This is the core of our project, and Miguel’s installation package is quite good.

Now, using Flask, let’s adjust the original Miguel’s web server application (app.py), creating a specific Python script to render our video. We can name it appCam.py:

Here is a large chunk of source code

To avoid affecting the reading experience, please click the original text at the end of the article to view

The most important line in index.html is:

<img src="{{ url_for('video_feed') }}" width="50%">

The video will be “fed back” to our webpage here.

You must also include the style.css file in the static directory to achieve the above result.

All files are available for download from my GitHub repository: camWebServer.

Ensure all files are in the correct location, and after all data is updated, check our environment.

Now, run the Python script in the terminal:

sudo python3 appCam.py

Go to any browser on your network and enter http://the IP of the Raspberry Pi/

Note: If you are unsure of your Raspberry Pi’s IP address, run:

ifconfig 

In the wlan0: section, you will find it.

That’s it! From now on, the only question is to have a complex page that embeds your video into another page, etc.

Installing Temperature and Humidity Sensors

Let’s create a page that records real data, such as air temperature and relative humidity data. Therefore, we will use the old, functional DHT22. The ADAFRUIT website will provide a wealth of information about these sensors. You can find relevant information on the web:

Key Points Overview

The low-cost DHT temperature and humidity sensor has general basic functions, is not fast but is very suitable for enthusiasts doing basic data logging. The DHT sensor consists of two parts, a capacitive humidity sensor and a thermistor. Inside, there is also a very basic chip that can perform some analog-to-digital conversion and read the digital signals of temperature and humidity.

Main Features of DHT22:

• Low cost

• 3 to 5V power supply and I/O

• Maximum current during conversion is 2.5mA

• Suitable for 0-100% humidity readings, accuracy of 2-5%

• Suitable for -40 to 125°C temperature readings, accuracy of ±0.5°C

• Sampling rate not exceeding 0.5 Hz (once every 2 seconds)

• Size 15.1mm x 25mm x7.7mm

• 0.1″ pitch with 4 pins

Generally, you will use the sensor at a distance of less than 20 meters, connecting a 4K7 ohm resistor between the data pin and VCC pin. The DHT22 output data pin will connect to GPIO16 on the Raspberry Pi. Check the circuit of the sensor connected to the Raspberry Pi pins as below:

1. Pin 1 – Vcc ==> 3.3V

2. Pin 2 – Data ==> GPIO 16

3. Pin 3 – Not connected

4. Pin 4 – Gnd ==> Gnd

Once the sensor is connected, we must install its library on the Raspberry Pi.

Installing the DHT Library:

On your Raspberry Pi, from /home to /Documents

cd Documents 

Create a directory to install the library and move here:

mkdir DHT22_Sensor
cd DHT22_Sensor

In your browser, go to Adafruit GitHub:

https://github.com/adafruit/Adafruit_Python_DHT

Download the library by downloading the zip link and extract the file in the recently created folder on your Raspberry Pi. Then go to the library’s directory (subfolder created automatically when you extract the file), and execute the following command:

sudo python3 setup.py install

Open a test program (DHT22_test.py) from my GITHUB repository

import Adafruit_DHT
DHT22Sensor = Adafruit_DHT.DHT22
DHTpin = 16
humidity, temperature = Adafruit_DHT.read_retry(DHT22Sensor, DHTpin)

if humidity is not None and temperature is not None:
    print('Temp={0:0.1f}*C  Humidity={1:0.1f}%'.format(temperature, humidity))
else:
    print('Failed to get reading. Try again!')

Run the program with the following command:

python3 DHT22_test.py

The results will be displayed on the terminal print screen.

Creating a Web Server Application for Data and Video Display

Let’s create another Python web server with Flask that will handle data from sensors and video stream capture.

As our code becomes more complex, I recommend using Geany as an integrated development environment where you can handle different types of files (.py, .html, and .css) simultaneously.

The following code is the Python script used on our web server:

Here is a large chunk of source code

To avoid affecting the reading experience, please click the original text at the end of the article to view

You can get the Python script appCam2.py from my GitHub repository

Main content of the above code:

• Whenever someone clicks “clicks” on “/”, which is our web page’s main page (index.html), a request will be generated;

• Through this request, the first thing in the code is to read sensor data from DHT using a function.

• Next, retrieve the actual time from the system

• With the data at hand, our script returns to the web page (index.html): time, temperature, and humidity feedback from the previous request.

Additionally, when a user wants to see the video stream, they can call the page “camera”. In this case, three paths will be displayed in the last step. And render camera.html.

So, let’s take a look at the index.html, camera.html, and style.css files that will be used to build the frontend:

Here is a large chunk of source code

To avoid affecting the reading experience, please click the original text at the end of the article to view

You can get them from my GitHub repository.

camera.html

Basically, this page is the same as the one we created earlier, just that we added a button to return to the main page.

You can get camera.html and style.css from my GitHub repository.

Now, run the Python script in the terminal:

sudo python3 appCam2.py

Optional: Add Video Stream to Previous Projects

Let’s add video streaming to the projects we previously developed

Let’s use the content developed in our previous tutorial: FROM DATA TO GRAPH. A WEB JOURNEY WITH FLASK AND SQLITE.

Remember, in this project, we recorded data (temperature and humidity) in the database and displayed real and historical data on the web page:

We did this using two Python scripts, one for logging data in the database (logDHT.py), and the other for displaying data on the web page through the Flask web server (appDhtWebServer.py):

Create a web server environment:

Sensor_Database is under /Documents in my Raspberry Pi.

These files can be found in my GitHub repository: dhtWebHistCam

The results are as follows:

Conclusion

As always, I hope this project can help others enter the exciting world of electronics!

For more details and final code, please visit my GitHub repository, Video-Streaming-with-Flask.

via instructables.com/id/Video-Streaming-Web-Server/

More Exciting Content

Multi-servo Control Positioning Photography Gimbal based on Raspberry Pi

Implementing a New Type of Bad USB with Raspberry Pi Zero with Backlight

Playing with AR Projection Black Technology with Raspberry Pi and IKEA Lamps

Speed Comparison of Raspberry Pi IO Operations in Different Languages

Pi-Micro: Handheld Computer Made with Raspberry Pi Zero W

Making a Toy Snake with Dad for Father’s Day