es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo utilizar Flask para transmitir un video de una cámara web (paz) en la misma pantalla que la aplicación web?

Cómo utilizar Flask para transmitir un video de una cámara web (paz) en la misma pantalla que la aplicación web?

06 Aug, 2023 Programación

Hola, he estado trabajando en algunos modelos de aprendizaje automático (ML) y ahora necesito implementarlos en una aplicación web para que sean fácilmente visibles para el cliente. Estaba trabajando en Paz para la detección emocional y para Paz mi código funciona perfectamente. Pero cuando intento implementarlo en Flask, se muestra en una nueva ventana. Quiero que el resultado de la cámara web se muestre en la misma pantalla.
Aquí está mi código para Paz:

import argparse
from paz.backend.camera import VideoPlayer
from paz.backend.camera import Camera
from paz.pipelines import DetectMiniXceptionFER


if __name__ == "__main__":
    parser = argparse.ArgumentParser(description='Real-time face classifier')
    parser.add_argument('-c', '--camera_id', type=int, default=0,
                                    help='ID del dispositivo de la cámara')
    parser.add_argument('-o', '--offset', type=float, default=0.1,
                                    help='Desplazamiento escalado que se agregará a las cajas delimitadoras')
    args = parser.parse_args()

    pipeline = DetectMiniXceptionFER([args.offset, args.offset])
    camera = Camera(args.camera_id)
    player = VideoPlayer((640, 480), pipeline, camera)
    player.run()
    player.stop()
Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para mostrar el resultado de la webcam en la misma pantalla utilizando Flask, es necesario integrar el código de paz con la aplicación web de Flask. Aquí tienes los pasos que puedes seguir:

    1. En tu aplicación Flask, crea una ruta que renderice la página donde deseas mostrar el resultado de la webcam.
    from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')
    1. En la función home, utiliza la función render_template para renderizar el archivo index.html. Puedes crear este archivo en la carpeta templates de tu directorio del proyecto Flask.

    2. En el archivo index.html, agrega un elemento canvas donde se mostrará el resultado de la webcam.

    <!DOCTYPE html>
<html>
<head>
    <title>Resultado de la webcam</title>
</head>
<body>
    <canvas id="result_canvas"></canvas>
    <script>
        // Código JavaScript para mostrar el resultado de la webcam en el elemento canvas
    </script>
</body>
</html>
    1. En la función run del código de paz, en lugar de utilizar el objeto VideoPlayer, modifica el código para capturar los fotogramas de la cámara y enviarlos a la página web utilizando websockets.
    import asyncio
import websockets
import cv2

async def send_frames(websocket):
    pipeline = DetectMiniXceptionFER([args.offset, args.offset])
    camera = Camera(args.camera_id)

    while True:
        frame = camera.read()
        result = pipeline(frame)
        # dibujar el resultado en el fotograma utilizando OpenCV
        cv2.imshow('Resultado', result)
        # enviar el resultado a la página web utilizando websockets
        await websocket.send(result.tobytes())
        if cv2.waitKey(1) == ord('q'):
            break

async def handler(websocket, path):
    task = asyncio.ensure_future(send_frames(websocket))
    done, pending = await asyncio.wait([task], return_when=asyncio.FIRST_COMPLETED)
    for task in pending:
        task.cancel()

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/stream')
async def stream():
    return await websockets.serve(handler, 'localhost', 8765)

if __name__ == '__main__':
    asyncio.get_event_loop().run_until_complete(app.run(debug=True))

    1. En la función send_frames, utiliza cv2.imshow para mostrar el resultado en el fotograma utilizando OpenCV.

    2. Crea una nueva ruta en la aplicación Flask que transmita los fotogramas al cliente utilizando websockets.

    3. En el archivo index.html, agrega código JavaScript para conectarse al websocket y mostrar los fotogramas en el elemento canvas.

    <!DOCTYPE html>
<html>
<head>
    <title>Resultado de la webcam</title>
</head>
<body>
    <canvas id="result_canvas"></canvas>
    <script>
        var canvas = document.getElementById('result_canvas');
        var ctx = canvas.getContext('2d');
        var ws = new WebSocket('ws://localhost:8765/stream');

        ws.onmessage = function(e) {
            var arrayBuffer = e.data.buffer || e.data;
            var imageData = new ImageData(new Uint8ClampedArray(arrayBuffer), 640, 480);
            ctx.putImageData(imageData, 0, 0);
        };
    </script>
</body>
</html>
    1. En el código JavaScript, crea un objeto web socket y conéctate a la ruta que transmite los fotogramas desde el servidor. Cuando se reciba un mensaje, crea un objeto ImageData a partir de los datos binarios y muéstralo en el canvas utilizando ctx.putImageData.

    Con estas modificaciones al código de Flask y paz, deberías poder mostrar el resultado de la webcam en la misma pantalla de tu aplicación web Flask.

Comments are closed.