Как автоматически обновлять приходящую по протоколу WebSocket jpg картинку в окошке html без перезагрузки странички

Question

Написал свой WS сервер, который снимает поток с вебкамеры, покадрово переводит его в jpg и отправляет клиенту. Но я соварешенно не умею во фронт. Помогите пожалуйста изменить этот код, чтоб можно было ловить кадры приходящие по ws и обновлять их в браузере.

<head>
    <title> image</title>
    <meta charset="utf-8">
</head>
<body>
<image src="https://netology.ru/backend/uploads/page_assets/images/file/50/html.svg" alt="image" id= "frame">
</body>



let Arr = ['https://netology.ru/backend/uploads/page_assets/images/file/51/css.svg','https://netology.ru/backend/uploads/page_assets/images/file/52/js.svg','https://netology.ru/backend/uploads/page_assets/images/file/53/canvas-1.svg'];

let i = 0;
function f() {
    if (i<Arr.length) {
        var c = Arr[i];
        var elem = document.getElementById('frame');
        elem.src = c;
        i++;
    }
}
setInterval(f, 500);

Answer 1

<html>
<head>
    <title> image</title>
    <meta charset="utf-8">
</head>
<body>
<image src="https://netology.ru/backend/uploads/page_assets/images/file/50/html.svg" alt="image" id= "frame">
<script>
window.onload = function(){
    let image = document.getElementById('frame');

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

    ws.onmessage = m => {
        image.src = URL.createObjectURL(m.data);
    }
}
</script>
</body> 
</html>

БЛОГ НА HUSL

Как автоматически обновлять приходящую по протоколу WebSocket jpg картинку в окошке html без перезагрузки странички

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