Как в JS поймать jpg с WebSocket сервера?

Question

Сервер посылает jpg-изображения. Как в JS реализовать механизм "хватания" изображений и отобразить на 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>
    <script src = "script.js"></script>

    <div class="header">
        <a href = "index.html">
            <h2 id = "log">Testing Panel</h2>
        </a>
    </div>
    <!--<div id = "camera"></div>-->

    <canvas id="canvas" width="640" height="480" style="border:1px solid #d3d3d3;">
        <img src=""></img>
    </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>

    <input value = "set..." id = "input" />

 </body> 
</html>

JS

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

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

        //открытие соединения
        ws.onopen = function(event) {
            status.innerHTML = "соединение установлено";
            window.alert("online");
            while (true){
                status.innerHTML = "kk";

            }
        }

        //закрытие соединения
        ws.onclose = function(event) {
            status.innerHTML = "соединение разорвано";
            window.alert("offline");
        }

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

        }

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

        }

Answer 1

let ws = new WebSocket("ws://somewhere.ru/ws");

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

Если есть определенный img в html и надо менять его данные, то:

let ws = new WebSocket("ws://somewhere.ru/ws");
let image = document.getElementById('my_img');

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

Если canvas, то надо пробовать, надеюсь, вы подключитесь и скажете, правильно или нет:

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

ws.onmessage = m => {
    // ctx.putImageData(new ImageData(m.data, w, h), 0, 0); // w: ширина транслируемого видео, h: высота транслируемого видео
    ctx.putImageData(m.data, 0,0);
}

Опосредованный способ (возможно медленный, надо проверять):

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 - ширина и высота транслируемого видео
        }
}

БЛОГ НА HUSL

Как в JS поймать jpg с WebSocket сервера?

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