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