Проблема передачи видеопотока OpenCV сервера на Python клиенту (html + js)

Question

задача стоит следующая:

Запускается Python-сервер
К серверу подключаются клиенты
Сервер начинает передавать изображение с веб-камеры (используя OpenCV) клиентам.
Клиент "хватает" изображение с помощью js и передает на html-страничку в отельное окно

Как можно "схватить" изображение, используя js? В приведенном ниже коде сервер и клиент соединяются по WebSocket-протоколу, и сервер с помощью OpenCV запускает изображение с вебкамеры в отдельном окне, мне же нужно как-то реализовать работу этой системы так, чтобы сервер отправлял видео с вебки непосредственно на клиент (на html-страничку), как это можно провернуть?

#python код:


#!/usr/bin/env python
# WebSocket сервер

import asyncio
import websockets
import numpy as np
import cv2


async def servo(websocket, path):
    print("Started")

    cap = cv2.VideoCapture(-1)
    # cap.release()
    # cap = cv2.VideoCapture(-1)

    print(cap.isOpened())
    while cap.isOpened():
        ret, frame = cap.read()

        print(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
        print(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))

        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
        cv2.imshow('frame', gray)

        if cv2.waitKey(1) & 0xFF == ord('q'):
            break

    cap.release()
    cv2.destroyAllWindows()


start_server = websockets.serve(servo, "localhost", 8765)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

/*JS-код*/

const ws = new WebSocket("ws://localhost:8765");
        var status = document.querySelector("#status");

        //открытие соединения
        ws.onopen = function() {
            status.innerHTML = "соединение установлено";
        }

        ws.onclose = function() {
            status.innerHTML = "соединение разорвано";
        }

        //получение данных
        ws.onmessage = function() {

        }

        //возникновение ошибки
        ws.onmessage = function(){
            
        }

* {
    margin: 0;
    padding: 0;
    font-family: sans-serif, Arial;
}

.header {
    position: absolute;
    width: 100%;
    height: 50px;
    background-color: #313131;
    font-family: impact, Arial;
    color: white;
    z-index:1;
}

#log {
    padding: 10px;
    
}

a {
    text-decoration: none;
    color: white;
}

.control {
    position: absolute;
    width: 640px;
    height: 250px;
    background-color: #313131;
    text-align: center;
}

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 30px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

<!-- HTML-код-->

<!DOCTYPE html>
<html lang="ru">
 <head>
    <meta charset="utf-8">
    <title>Panel</title>
    <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="styles.css">
 </head>

 <body>
    <div class="header">
        <a href = "index.html">
            <h2 id = "log">Testing Panel</h2>
        </a>
    </div>
    <!--<div id = "camera"></div>-->
    <video autoplay id="vid" style="display:none;"></video>
    <canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;"></canvas>

    <div class = "control">
        <button class="button button1">UP</button>
        <button class="button button2">DOWN</button>
        <button class="button button3">LEFT</button>
        <button class="button button4">RIGHT</button>
    </div>
 
    <script src = "script.js"></script>
 </body> 
</html>

БЛОГ НА HUSL

Проблема передачи видеопотока OpenCV сервера на Python клиенту (html + js)

Ответы (0 шт):