Как отображать полученные изображения с websocket-сервера в canvas?

Question

есть такая ситуация: сервер посылает jpg-изображния с веб камеры, клиент хватает их с помощью нижеприведенного js-скрипта, но изображения просто размещаются "в столбик", а не как, скажем, "видео". Как поместить изображения в canvas, чтобы изображения обновлялись и были на одном месте (чтобы в итоге получалось подобие видео-трансляции)?

JS:

        var input = document.getElementById("input");

        let ws = new WebSocket("ws://localhost:8001");  

        ws.onmessage = m => {
            let image = new Image();
            image.src = URL.createObjectURL(m.data);
            document.body.append(image);
        }

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">
 </head>

 <body>
    <div class="header">
        <a href = "index.html">
            <h2 id = "log">Control Panel</h2>
        </a>
    </div>

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

Answer 1

Это не имеет шансов на не работать, вопрос как быстро:

let ws = new WebSocket("ws://somewhere.ru/ws");
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ws.onmessage = m => {
    let img = new Image();
    img.src = URL.createObjectURL(m.data);
    img.onload = function() { // Не уверен, что надо ждать загрузки, проверяйте и без нее
        ctx.drawImage(image, 0, 0, w, h, 0, 0, 640, 480); // w,h - ширина и высота транслируемого видео
        }
}

Либо так:

let ws = new WebSocket("ws://somewhere.ru/ws");
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

ws.onmessage = m => {
    let img = new Image();
    img.src = URL.createObjectURL(m.data);
    ctx.drawImage(image, 0, 0, w, h, 0, 0, 640, 480); // w,h - ширина и высота транслируемого видео

}

Если проблема только в столбике, то так:

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">
 </head>

 <body>
    <div class="header">
        <a href = "index.html">
            <h2 id = "log">Control Panel</h2>
        </a>
    </div>

    <img id="screen" width="640" height="480" src="">

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

JS:

let ws = new WebSocket("ws://localhost:8001");
let image = document.getElementById('screen');

    ws.onmessage = m => {
        image.src = URL.createObjectURL(m.data);
    }

БЛОГ НА HUSL

Как отображать полученные изображения с websocket-сервера в canvas?

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