Data transfer without increasing delay

Hi,

I have a WebSockets Professional.
Based on the Snapshots demo.
I trying to create a stable transfer of the image from the desktop and text messages.
Everything works fine at startup, but the lag is increasing with each second.


Some of my code:
In html:

 img.onload = function() {
    ws.send('c=i;');
    canvas.setAttribute("width", img.width);
    canvas.setAttribute("height", img.height);
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(this, 0, 0);
    };
    
  canvas.addEventListener('click', function(event) {
    var x = event.x - elemLeft,
        y = event.y - elemTop;
if (ws.state() === "open") {
	 ws.send('c=c;x='+event.offsetX+ ';y=' + event.offsetY + ';w=' + canvas.getBoundingClientRect().width + ';h=' + canvas.getBoundingClientRect().height);
	};
	}, false);  


  ws.on('stream', function(evt)
    {     
      a =  URL.createObjectURL(evt.stream);
      var canvas = document.getElementById("canvas");
      img.src = a;
    }

In pas:

procedure TfrmServerSnapshots.WSServerMessage(Connection: TsgcWSConnection; const
    Text: string);
begin

...
    
if p.Values['c'] = 'c' then
  begin
   x := SInt(p.Values['x']);
   y := SInt(p.Values['y']);
   w := SInt(p.Values['w']);
   h := SInt(p.Values['h']);
   rw := SS.Bitmap.Width;
   rh := SS.Bitmap.Height;
   rx := Trunc(rw / w * x);
   ry := Trunc(rh / h * y);
   SetCursorPos(rx, ry);
   Mouse_Event(MOUSEEVENTF_ABSOLUTE or MOUSEEVENTF_LEFTDOWN, rx, ry , 0, 0);
   Mouse_Event(MOUSEEVENTF_ABSOLUTE or MOUSEEVENTF_LEFTUP, rx, ry, 0, 0);

  end else
if p.Values['c'] = 'i' then
  begin
   DoBroadcastStream;
   Label4.Caption := IntToStr(MilliSecondsBetween(now, tm)) + ' ms';
   tm := now;
  end;
end;

It is worse if I use original Snapshots demo a timer with 50ms to send image.
I tried different settings with WSServer component.

How to do it. Maybe I missed something?


Best Regards
Piotr