主页 / 问题 / 1099410
Accepted
BERTOLDO
Asked:2020-03-25 05:16:00 +0000 UTC2020-03-25 05:16:00 +0000 UTC

如何在画布中显示从 websocket 服务器接收到的图像？

  • 772

有这样一种情况：服务器从网络摄像头发送 jpg 图像，客户端使用下面的 js 脚本抓取它们，但图像只是放在“列中”，而不是“视频”。我如何将图像放在画布上，以便图像在同一个地方更新（这样我们最终会得到一种视频广播）？

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

1 个回答

  1. Best Answer

    这不可能不工作，问题是多快：

    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);
    }
    • 2

相关问题