javascript - 使用 Web 套接字将 Canvas 内容从客户端传递给管理员

Question

该应用程序旨在使用网络套接字尽​​可能顺利地将绘图从客户端 Canvas 传输到管理 Canvas 。在每个 mousemove 事件中，客户端 Canvas 都会被压缩为 png 并通过 websocket 发送到服务器，最终到达管理窗口，图像被绘制到管理 Canvas 中。

实际上，管理窗口中的代码有点滞后。看来瓶颈是 ctx.drawImage() ，但我不确定。

我想知道是否有一种方法可以首先找到瓶颈，然后通过去抖动或网络工作人员或其他方式来优化传输。

客户端:

<canvas id="clientCanvas" style="position: absolute; top: 0px; left: 0px;" width="1563" height="528">

function onMouseMove(e) {
    var canvas = document.getElementById('clientCanvas');
    var ctx = canvas.getContext("2d");
    var imageData = canvas.toDataURL("image/png");

    socket.emit('SS_onMouseMove', {imageData: imageData});
};

管理端:

<canvas id="adminCanvas" style="position: absolute; top: 0px; left: 0px;" width="1563" height="528">

var canvas = document.getElementById("adminCanvas");
var ctx = canvas.getContext("2d");
var image = new Image();
image.onload = function() {
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.drawImage(image, 0, 0);
};

socket.on("SS_onMouseMove", function(response) { onClientMouseMove(response); });

function onClientMouseMove(response) {
    image.src = response.imageData;
}

Answer 1

问题是您每秒多次传递整个图像，这对生成图像的客户端和每秒传递大约 2 mb(图像作为 dataUrl)的连接来说都是沉重的负载。

解决方案是:

• 连接建立后发送一次原始图像
• 当客户端上发生鼠标事件时，仅将这些鼠标事件发送到管理员，并使用客户端上使用的相同功能在管理员上呈现鼠标事件的更改。

这将显着减少连接负载，并且需要更少的客户端处理，因为它不必每秒多次生成 png -> dataUrl