Site icon AranaCorp

Diffuser une vidéo d’un Raspberry Pi vers un navigateur Web

2.5
(6)

Nous allons voir dans ce tutoriel comment diffuser la vidéo d’un PiCam sur Raspberry Pi vers un navigateur Web. Lorsqu’une caméra est reliée à un Raspberry Pi, l’intérêt est de pouvoir y accéder de n’importe où. Pour cela, il faut mettre en place un serveur et envoyer une capture de la vidéo vers son interface. Ceci permet de diffuser (streaming) une vidéo du Raspberry Pi vers un navigateur Web ou autre application.

Matériel

N.B.: ce tutoriel peut être appliquer à n’importe quel ordinateur muni de Python et équipé d’une webcam.

Configuration du Raspberry Pi

Configurez la PiCamV2 sur votre Raspberry Pi

Nous allons tout d’abord installer Flask qui va nous permettre de mettre en place le serveur et servir la vidéo

sudo apt-get install python3-flask

Ensuite, nous utilisons OpenCV pour capturer les image et les traiter

pip3 install opencv-python

Code de diffusion d’une vidéo sur un serveur

Pour diffuser la vidéo à partir du Raspberry Pi, nous allons mettre en place un répertoire contenant

Créer une page html ./templates/index.html

<!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>

Créer un page de style ./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 pour envoyer la video en streaming PiCamServer.py

#!/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)

N.B.: il est possible de prendre un fichier comme source vidéo. Il suffit de placer le chemin du fichier gen(‘/path/to.file.mp4’)

Dans ce code, nous ouvrons un server flask sur le port 5000 et sur l’adresse locale

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

Nous faisons l’acquisition de la vidéo dans la fonction gen() que nous appelons dans la fonction video_feed().

Lorsque nous faisons une requête vers l’adresse IP du navigateur, le script va appeler la fonction index() sous app.route(‘/’) qui va afficher la page html.

Une fois la page chargée, la balise <img src=”{{ url_for(‘video_feed’) }}”> appelle l’url /video_feed qui lance la fonction du même nom.

Récupérer l’adresse IP de votre Raspberry Pi

Avant de lancer le code, vous devez récupérer l’adresse IP de votre Raspberry Pi à l’aide la commande ifconfig dans le terminal

ifconfig

Résultat

Vous pouvez ensuite lancer le code via Geany ou par ligne de commande en vous plaçant dans le répertoire de travail

python3 PiCamServer.py

Dans votre navigateur, entrez l’adresse IP de votre Raspberry Pi ainsi que le port lié au serveur pour afficher la vidéo (ici: 192.162.1.46:5000).

Sources

How useful was this post?

Click on a star to rate it!

Average rating 2.5 / 5. Vote count: 6

No votes so far! Be the first to rate this post.

Quitter la version mobile