Site icon AranaCorp

Stream video from a Raspberry Pi to a web browser

Xukyo

, , ,

In this tutorial, we’ll look at how to stream video from a PiCam on a Raspberry Pi to a web browser. When a camera is connected to a Raspberry Pi, it’s important to be able to access it from anywhere. To do this, you need to set up a server and send a capture of the video to its interface. This makes it possible to stream video from the Raspberry Pi to a web browser or other application.

Hardware

N.B.: this tutorial can be applied to any computer running Python and equipped with a webcam.

Raspberry Pi configuration

Configure PiCamV2 on your Raspberry Pi

First of all, we’re going to install Flask, which will enable us to set up the server and serve the video.

sudo apt-get install python3-flask

Next, we use OpenCV to capture and process the images.

pip3 install opencv-python

Code for broadcasting a video on a server

To broadcast the video from the Raspberry Pi, we’ll set up a directory containing

Creating an html page .

<!DOCTYPE html>

<head>
    <title>PiCam Server</title>
    <link rel="stylesheet" href='../static/style.css'/>
</head>

<body>
    
        <h1>PiCam Live Streaming</h1>
        
        <div class="img-container">
            <img src="{{ url_for('video_feed') }}">
        </div>
        <footer>AranaCorp All right reserved &#169;</footer>
        
</body>

</html>

Creating a style page ./static/style.css

body{
background-color:#70706F;
}

h1{
	color:#3AAA35;
	text-align:center;
}


.img-container{
  	width:50%;
	border: 3px solid #3AAA35;
	border-radius: 6px;
	overflow: hidden; 
	text-align:center;
	margin-left: auto;
	margin-right: auto;
	padding:20px;
}
img{
  width:100%;
}
footer{
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

Code to stream video PiCamServer.py

#111!/usr/bin/env python
# -*- coding: utf-8 -*

#sudo apt-get install python3-flask
#pip3 install opencv-python

from flask import Flask, render_template, Response
import cv2

app = Flask(__name__)
#app.config["CACHE_TYPE"] = "null"

@app.route('/')
def index():
	"""Video streaming home page."""
	return render_template('index.html')

def gen():
	"""Video streaming generator function."""
	vs = cv2.VideoCapture(0)
	while True:
		ret,frame=vs.read()
		ret, jpeg = cv2.imencode('.jpg', frame)
		frame=jpeg.tobytes()
		yield (b'--frame\r\n'
		b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
		
	vs.release()
	cv2.destroyAllWindows() 

@app.route('/video_feed')
def video_feed():
	"""Video streaming route. Put this in the src attribute of an img tag."""
	return Response(gen(),mimetype='multipart/x-mixed-replace; boundary=frame')

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

In this code, we open a server flask on port 5000 and on the local address

app.run(host='0.0.0.0', port =5000, debug=True, threaded=True)

We acquire the video in the gen() function, which we call in the video_feed() function.

When we make a request to the browser’s IP address, the script will call the index() function under app.route(‘

Once the page has loaded, the tag calls the /video_feed url, which launches the function of the same name.

Recover the IP address of your Raspberry Pi

Before running the code, you need to retrieve the IP address of your Raspberry Pi using the ifconfig command in the terminal.

ifconfig

Results

You can then run the code via Geany or the command line in the working directory

python3 PiCamServer.py

In your browser, enter the IP address of your Raspberry Pi and the port linked to the server to display the video (here: 192.162.1.46:5000).

Sources

Exit mobile version