Use requestAnimationFrame in place of setInterval for tab mirroring

This commit is contained in:
hensm
2020-01-20 03:43:29 +00:00
parent 058b40b3cd
commit 7ce91cd80f

View File

@@ -90,25 +90,31 @@ async function onRequestSessionSuccess (newSession: cast.Session) {
const drawFlags = const drawFlags =
ctx.DRAWWINDOW_DRAW_CARET ctx.DRAWWINDOW_DRAW_CARET
| ctx.DRAWWINDOW_DRAW_VIEW | ctx.DRAWWINDOW_DRAW_VIEW
| ctx.DRAWWINDOW_ASYNC_DECODE_IMAGES; | ctx.DRAWWINDOW_ASYNC_DECODE_IMAGES
| ctx.DRAWWINDOW_USE_WIDGET_LAYERS;
/** let lastFrame: DOMHighResTimeStamp;
* Clears the canvas and draws the window. Called repeatedly, window.requestAnimationFrame(
* currently at 30FPS rate because performance is quite poor. function draw (now: DOMHighResTimeStamp) {
*/
function drawWindow () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawWindow(
window // window
, 0, 0 // x, y
, canvas.width // w
, canvas.height // h
, "white" // bgColor
, drawFlags); // flags
}
if (!lastFrame) {
lastFrame = now;
}
window.setInterval(drawWindow, 1000 / 30); if ((now - lastFrame) > (1000 / 30)) {
ctx.drawWindow(
window // window
, 0, 0 // x, y
, canvas.width // w
, canvas.height // h
, "white" // bgColor
, drawFlags); // flags
lastFrame = now;
}
window.requestAnimationFrame(draw);
});
/** /**
* Capture video stream from canvas and feed into the RTC * Capture video stream from canvas and feed into the RTC