Icono del sitio AranaCorp

Transmisión de vídeo desde una Raspberry Pi a un navegador web

, , ,

En este tutorial, veremos cómo transmitir vídeo desde una PiCam en una Raspberry Pi a un navegador web. Cuando se conecta una cámara a una Raspberry Pi, la idea es poder acceder a ella desde cualquier lugar. Para ello, es necesario configurar un servidor y enviar una captura del vídeo a su interfaz. Esto permite transmitir vídeo desde la Raspberry Pi a un navegador web u otra aplicación.

Hardware

Nota: este tutorial puede aplicarse a cualquier ordenador que ejecute Python y esté equipado con una cámara web.

Configuración de la Raspberry Pi

Configure PiCamV2 en su Raspberry Pi

Primero vamos a instalar Flask, que nos permitirá configurar el servidor y servir el vídeo.

sudo apt-get install python3-flask

A continuación, utilizamos OpenCV para capturar las imágenes y procesarlas.

pip3 install opencv-python

Código para emitir un vídeo en un servidor

Para transmitir el vídeo desde la Raspberry Pi, vamos a crear un directorio que contenga

Crear una página 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>

Creación de una página de estilo ./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;
}

Código para la transmisión de vídeo 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)

En este código, abrimos una petaca de servidor en el puerto 5000 y en la dirección local

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

Adquirimos el vídeo en la función gen(), que llamamos en la función video_feed().

Una vez cargada la página, la etiqueta llama a la url /video_feed, que lanza la función del mismo nombre.

Recuperar la dirección IP de su Raspberry Pi

Antes de ejecutar el código, debe obtener la dirección IP de su Raspberry Pi utilizando el comando ifconfig en el terminal

ifconfig

Resultados

A continuación, puede ejecutar el código a través de Geany o la línea de comandos en el directorio de trabajo

python3 PiCamServer.py

En su navegador, introduzca la dirección IP de su Raspberry Pi y el puerto vinculado al servidor para visualizar el vídeo (aquí: 192.162.1.46:5000).

Fuentes

Salir de la versión móvil