In the HTML5 / JS web interface, it is possible to view the webcam and / or client’s desktop. The frame rate is different - for the camera 20 frames per second (50 ms delay), for the desktop 500 ms - 2 frames per second. If you broadcast the camera separately, everything is OK - we have 20 frames, but it is worth including simultaneous broadcasting, so the frame rate of the camera becomes equal to the desktop frame rate, even if the onload functions are different. Here is the code for clarity:

 function RefreshFrame(){ var Delay = (this.name==='Camera')?50:500; var Hold = GetTickCount(); // function GetTickCount(){return new Date().getTime();} while(Hold + Delay > GetTickCount()){continue;} this.src = TargetURN+'?'+this.name+'='+Data+"&time="+Hold; } function SetDevice(Object, Switch){ if (Switch){ Object.onload = RefreshFrame; Object.onerror = RefreshFrame; Object.src = TargetURN+'?'+Object.name+'='+Data+'&time='+GetTickCount(); Object.style.display = 'block'; } else{ Object.onload = null; Object.onerror = null; Object.style.display = 'none'; Object.src = ''; } } // Вызов SetDevice(Camera, true); SetDevice(Screen, true);

Are there any moments that I did not take into account, or is it just browser brakes?

PS: the frame size from the camera is ~ 6 kb, the desktop - ~ 250 kb. It seems that onload for elements should work asynchronously ...

  • while(Hold + Delay > GetTickCount()){continue;} , uh ... is it just js? - Grundy
  • What is the meaning of this line? - Grundy

1 answer 1

Line problem

 while(Hold + Delay > GetTickCount()){continue;}

Apparently, the idea was to wait for the Delay, and update the src pictures.

Since Javascript is executed in one thread, this loop hangs the entire browser, until it quits the loop, so with significant values ​​of Delay this would be especially noticeable.

Instead of this cycle, you need to use the setTimeout function , which is precisely designed to perform the function after a specified timeout.

The function can take the following form:

 function RefreshFrame(){ var Delay = (this.name==='Camera')?50:500; var Hold = GetTickCount(); setTimeout(()=>{ this.src = TargetURN+'?'+this.name+'='+Data+"&time="+Hold; }, Delay); }

In this example, an arrow function is used, so that this inside the timer handler refers to the same picture as inside the RefreshFrame function.

  • Thank you very much! This is what you need! - Iceman