.

lib/index.html

@@ -7,9 +7,59 @@
     <link rel="stylesheet" href="/lib/simple-keyboard-3.7.2.css" />
     <link rel="stylesheet" href="/lib/keyboard.css" />
     <script src="lib/vconsole.js"></script>
+    <script src="lib/vconsole-stat-plugin.min.js"></script>
     <script>
         // VConsole will be exported to `window.VConsole` by default.
         var vConsole = new window.VConsole();
+        var parsecPlugin = new VConsole.VConsolePlugin('parsec', 'Parsec')
+
+        parsecPlugin.on('renderTab', function (callback) {
+            var html = '<div id="vconsole-parsec"></div>';
+            callback(html);
+            setInterval(() => {
+                $('#vconsole-parsec').html('frameInterval=' + (window.frameInterval || 0));
+            }, 1000);
+        });
+        var type;
+        parsecPlugin.on('addTool', function (callback) {
+            var button = {
+                name: 'Reload',
+                onClick: function (event) {
+                    location.reload();
+                }
+            };
+            function add(i) {
+                window.frameInterval = (window.frameInterval || 40) + i;
+                $('#vconsole-parsec').html('frameInterval=' + (window.frameInterval || 0));
+                localStorage.setItem('frameInterval', window.frameInterval);
+            }
+            var button1 = {
+                name: '-5',
+                onClick: function (event) {
+                    add(-5)
+                }
+            };
+            var button2 = {
+                name: '-1',
+                onClick: function (event) {
+                    add(-1)
+                }
+            };
+            var button3 = {
+                name: '+1',
+                onClick: function (event) {
+                    add(1)
+                }
+            };
+            var button4 = {
+                name: '+5',
+                onClick: function (event) {
+                    add(5)
+                }
+            };
+            callback([button, button1, button2, button3, button4]);
+        });
+        vConsole.addPlugin(parsecPlugin);
     </script>
     <script src='lib/matoya.js'></script>
     <script src='lib/weblib.js'></script>

lib/parsec.js

@@ -736,6 +736,10 @@ function Parsec(a) {
     );
 }
 function na(a) {
+    var last = performance.now();
+    window.frameInterval = parseInt(
+        localStorage.getItem("frameInterval") || "40"
+    );
     a.g ||
         (a.g = new AudioDecoder({
             output: function (b) {
@@ -763,14 +767,14 @@ function na(a) {
                     a.f.decodeLatency =
                         0.9 * a.f.decodeLatency +
                         0.1 * (performance.now() - b.timestamp / 1e3);
-                    if (resizeFlag) {
+                    if (window.resizeFlag) {
                         a.c.width = Math.round(
                             document.body.clientWidth * window.devicePixelRatio
                         );
                         a.c.height = Math.round(
                             document.body.clientHeight * window.devicePixelRatio
                         );
-                        resizeFlag = false;
+                        window.resizeFlag = false;
                     }
 
                     var d = b.displayWidth / b.displayHeight,
@@ -784,8 +788,8 @@ function na(a) {
                         d = a.c.height;
                         f = (a.c.width - l) / 2;
                     } else (l = a.c.width), (d = a.c.width / d), (g = (a.c.height - d) / 2);
-                    if (counter === 0) {
-                        console.log(a);
+                    var now = performance.now();
+                    if (now - last > window.frameInterval) {
                         a.l.drawImage(
                             b,
                             0,
@@ -797,8 +801,8 @@ function na(a) {
                             l,
                             d
                         );
+                        last = now;
                     }
-                    counter = (counter + 1) % 10;
                     b.close();
                 });
             },

lib/weblib.js

@@ -1,195 +1,229 @@
 let PARSEC;
 
 function float_to_int(fval) {
-	let ival = fval < 0 ? fval * 32768 : fval * 32767;
+    let ival = fval < 0 ? fval * 32768 : fval * 32767;
 
-	if (ival < -32768) {
-		ival = -32768;
+    if (ival < -32768) {
+        ival = -32768;
+    } else if (ival > 32767) {
+        ival = 32767;
+    }
 
-	} else if (ival > 32767) {
-		ival = 32767;
-	}
-
-	return ival;
+    return ival;
 }
 
 const PARSEC_ENV = {
-	// user.bin
-	bin_user_bin_get: function (asset_dir_c, session_id_c, size) {
-		try {
-			const cookies = document.cookie.split(';');
-
-			for (let x = 0; x < cookies.length; x++) {
-				const cookie = cookies[x].trim();
-				const name = 'parsec_login=';
-
-				if (cookie.indexOf(name) == 0) {
-					const auth = JSON.parse(cookie.substring(name.length, cookie.length));
-					mty_str_to_c(auth['token'], session_id_c, size);
-
-					return 0;
-				}
-			}
-		} catch (e) {
-			console.error(e);
-		}
-
-		return -1;
-	},
-	bin_user_bin_set: function (asset_dir_c, session_id_c) {
-		const session_id = mty_str_to_js(session_id_c);
-
-		const value = JSON.stringify({
-			'token': session_id,
-			'userId': 0,
-		});
-
-		const hostname = window.location.hostname.replace(/.*?\./, '');
-		const secure = window.location.protocol == 'https:';
-		document.cookie = 'parsec_login=' + value + ';domain=' + hostname + ';path=/;' +
-			(secure ? 'secure' : '') + ';max-age=31536000;samesite=strict;';
-	},
-	bin_user_bin_delete: function (asset_dir_c) {
-		const hostname = window.location.hostname.replace(/.*?\./, '');
-		document.cookie = 'parsec_login=;domain=' + hostname + ';path=/;expires=Thu, 01 Jan 1970 00:00:00 GMT;';
-	},
-
-	// Parsec protocol
-	web_parsec_protocol: function (peer_id) {
-		window.location.assign('parsec://peer_id=' + mty_str_to_js(peer_id));
-	},
-
-	// parsec SDK
-	parsec_web_init: function () {
-		if (PARSEC)
-			return;
-
-		const container = document.createElement('div');
-		container.style.zIndex = -1;
-		container.style.background = 'black';
-		container.style.position = 'fixed';
-		container.style.top = 0;
-		container.style.right = 0;
-		container.style.bottom = 0;
-		container.style.left = 0;
-		document.body.appendChild(container);
-
-		const canvas = document.createElement('canvas');
-		canvas.style.width = '100%';
-		canvas.style.height = '100%';
-		container.appendChild(canvas);
-
-		const updateCanvas = (ev) => {
-			const rect = canvas.getBoundingClientRect();
-			canvas.width = rect.width;
-			canvas.height = rect.height;
-		};
-
-		updateCanvas(null);
-		window.addEventListener('resize', updateCanvas);
-
-		PARSEC = new Parsec(canvas);
-	},
-	parsec_web_destroy: function () {
-		if (!PARSEC)
-			return;
-
-		PARSEC.destroy();
-		PARSEC = undefined;
-	},
-	parsec_web_disconnect: function (e) {
-		PARSEC.clientDisconnect(e);
-	},
-	parsec_web_get_status: function () {
-		return PARSEC.clientGetStatus();
-	},
-	parsec_web_send_user_data: function (id, msg_c) {
-		PARSEC.clientSendUserData(id, mty_str_to_js(msg_c));
-	},
-	parsec_web_get_guests: function (jstr_c, len) {
-		mty_str_to_c(JSON.stringify(PARSEC.clientGetGuests()), jstr_c, len);
-	},
-	parsec_web_poll_events: function (event_str_c, len) {
-		const evt = PARSEC.clientPollEvents();
-
-		if (evt) {
-			mty_str_to_c(JSON.stringify(evt), event_str_c, len);
-			return true;
-		}
-
-		return false;
-	},
-	parsec_web_get_buffer_size: function (key) {
-		return PARSEC.getBufferSize(key);
-	},
-	parsec_web_get_buffer: function (key, ptr) {
-		const buffer = PARSEC.getBuffer(key);
-
-		if (buffer)
-			mty_memcpy(ptr, buffer);
-	},
-	parsec_web_send_message: function (msg_c) {
-		PARSEC.clientSendMessage(JSON.parse(mty_str_to_js(msg_c)));
-	},
-	parsec_web_get_metrics: function (frame_w, frame_h, color444, full_range, decode, encode, network) {
-		const metrics = PARSEC.clientGetMetrics();
-
-		mty_set_float(decode, metrics['decodeLatency']);
-		mty_set_float(encode, metrics['encodeLatency']);
-		mty_set_float(network, metrics['networkLatency']);
-
-		mty_set_uint32(frame_w, metrics['frameWidth']);
-		mty_set_uint32(frame_h, metrics['frameHeight']);
-
-		mty_set_int8(color444, metrics['444']);
-		mty_set_int8(full_range, metrics['fullRange']);
-	},
-	parsec_web_get_network_failure: function () {
-		return PARSEC.clientNetworkFailure();
-	},
-	parsec_web_get_self: function (owner_ptr, id_ptr) {
-		const me = PARSEC.clientGetSelf();
-
-		mty_set_int8(owner_ptr, me['owner']);
-		mty_set_uint32(id_ptr, me['id']);
-	},
-	parsec_web_get_host_mode: function () {
-		return PARSEC.clientGetHostMode();
-	},
-	parsec_web_new_attempt: async function (attempt_id, ufrag_c, pwd_c, fingerprint_c, buf_size, csync, err_c) {
-		const creds = await PARSEC.clientNewAttempt(mty_str_to_js(attempt_id));
-
-		if (creds) {
-			mty_set_uint32(err_c, 0);
-			mty_str_to_c(creds['ice_ufrag'], ufrag_c, buf_size);
-			mty_str_to_c(creds['ice_pwd'], pwd_c, buf_size);
-			mty_str_to_c(creds['fingerprint'], fingerprint_c, buf_size);
-
-		} else {
-			mty_set_uint32(err_c, 1);
-		}
-
-		MTY_SignalPtr(csync);
-	},
-	parsec_web_begin_p2p: function (attempt_id, port, ufrag, pwd, fingerprint) {
-		PARSEC.clientBeginP2P(mty_str_to_js(attempt_id), port, mty_str_to_js(ufrag),
-			mty_str_to_js(pwd), mty_str_to_js(fingerprint));
-	},
-	parsec_web_add_candidate: function (attempt_id, ip, port, sync, from_stun) {
-		PARSEC.clientAddCandidate(mty_str_to_js(attempt_id), mty_str_to_js(ip), port, sync, from_stun);
-	},
-	parsec_web_poll_audio: function (cbuf, len) {
-		const fbuf = PARSEC.clientPollAudio();
-
-		if (fbuf) {
-			const buf = new Int16Array(MTY_MEMORY.buffer, cbuf, len);
-
-			for (let x = 0; x < fbuf.length; x++)
-				buf[x] = float_to_int(fbuf[x]);
-
-			return fbuf.length / 2;
-		}
-
-		return 0;
-	},
+    // user.bin
+    bin_user_bin_get: function (asset_dir_c, session_id_c, size) {
+        try {
+            const cookies = document.cookie.split(";");
+
+            for (let x = 0; x < cookies.length; x++) {
+                const cookie = cookies[x].trim();
+                const name = "parsec_login=";
+
+                if (cookie.indexOf(name) == 0) {
+                    const auth = JSON.parse(
+                        cookie.substring(name.length, cookie.length)
+                    );
+                    mty_str_to_c(auth["token"], session_id_c, size);
+
+                    return 0;
+                }
+            }
+        } catch (e) {
+            console.error(e);
+        }
+
+        return -1;
+    },
+    bin_user_bin_set: function (asset_dir_c, session_id_c) {
+        const session_id = mty_str_to_js(session_id_c);
+
+        const value = JSON.stringify({
+            token: session_id,
+            userId: 0,
+        });
+
+        const hostname = window.location.hostname.replace(/.*?\./, "");
+        const secure = window.location.protocol == "https:";
+        document.cookie =
+            "parsec_login=" +
+            value +
+            ";domain=" +
+            hostname +
+            ";path=/;" +
+            (secure ? "secure" : "") +
+            ";max-age=31536000;samesite=strict;";
+    },
+    bin_user_bin_delete: function (asset_dir_c) {
+        const hostname = window.location.hostname.replace(/.*?\./, "");
+        document.cookie =
+            "parsec_login=;domain=" +
+            hostname +
+            ";path=/;expires=Thu, 01 Jan 1970 00:00:00 GMT;";
+    },
+
+    // Parsec protocol
+    web_parsec_protocol: function (peer_id) {
+        window.location.assign("parsec://peer_id=" + mty_str_to_js(peer_id));
+    },
+
+    // parsec SDK
+    parsec_web_init: function () {
+        if (PARSEC) return;
+
+        const container = document.createElement("div");
+        container.style.zIndex = -1;
+        container.style.background = "black";
+        container.style.position = "fixed";
+        container.style.top = 0;
+        container.style.right = 0;
+        container.style.bottom = 0;
+        container.style.left = 0;
+        document.body.appendChild(container);
+
+        const canvas = document.createElement("canvas");
+        canvas.style.width = "100%";
+        canvas.style.height = "100%";
+        container.appendChild(canvas);
+
+        const updateCanvas = (ev) => {
+            const rect = canvas.getBoundingClientRect();
+            canvas.width = rect.width;
+            canvas.height = rect.height;
+            window.resizeFlag = true;
+        };
+
+        updateCanvas(null);
+        window.addEventListener("resize", updateCanvas);
+
+        PARSEC = new Parsec(canvas);
+    },
+    parsec_web_destroy: function () {
+        if (!PARSEC) return;
+
+        PARSEC.destroy();
+        PARSEC = undefined;
+    },
+    parsec_web_disconnect: function (e) {
+        PARSEC.clientDisconnect(e);
+    },
+    parsec_web_get_status: function () {
+        return PARSEC.clientGetStatus();
+    },
+    parsec_web_send_user_data: function (id, msg_c) {
+        PARSEC.clientSendUserData(id, mty_str_to_js(msg_c));
+    },
+    parsec_web_get_guests: function (jstr_c, len) {
+        mty_str_to_c(JSON.stringify(PARSEC.clientGetGuests()), jstr_c, len);
+    },
+    parsec_web_poll_events: function (event_str_c, len) {
+        const evt = PARSEC.clientPollEvents();
+
+        if (evt) {
+            mty_str_to_c(JSON.stringify(evt), event_str_c, len);
+            return true;
+        }
+
+        return false;
+    },
+    parsec_web_get_buffer_size: function (key) {
+        return PARSEC.getBufferSize(key);
+    },
+    parsec_web_get_buffer: function (key, ptr) {
+        const buffer = PARSEC.getBuffer(key);
+
+        if (buffer) mty_memcpy(ptr, buffer);
+    },
+    parsec_web_send_message: function (msg_c) {
+        PARSEC.clientSendMessage(JSON.parse(mty_str_to_js(msg_c)));
+    },
+    parsec_web_get_metrics: function (
+        frame_w,
+        frame_h,
+        color444,
+        full_range,
+        decode,
+        encode,
+        network
+    ) {
+        const metrics = PARSEC.clientGetMetrics();
+
+        mty_set_float(decode, metrics["decodeLatency"]);
+        mty_set_float(encode, metrics["encodeLatency"]);
+        mty_set_float(network, metrics["networkLatency"]);
+
+        mty_set_uint32(frame_w, metrics["frameWidth"]);
+        mty_set_uint32(frame_h, metrics["frameHeight"]);
+
+        mty_set_int8(color444, metrics["444"]);
+        mty_set_int8(full_range, metrics["fullRange"]);
+    },
+    parsec_web_get_network_failure: function () {
+        return PARSEC.clientNetworkFailure();
+    },
+    parsec_web_get_self: function (owner_ptr, id_ptr) {
+        const me = PARSEC.clientGetSelf();
+
+        mty_set_int8(owner_ptr, me["owner"]);
+        mty_set_uint32(id_ptr, me["id"]);
+    },
+    parsec_web_get_host_mode: function () {
+        return PARSEC.clientGetHostMode();
+    },
+    parsec_web_new_attempt: async function (
+        attempt_id,
+        ufrag_c,
+        pwd_c,
+        fingerprint_c,
+        buf_size,
+        csync,
+        err_c
+    ) {
+        const creds = await PARSEC.clientNewAttempt(mty_str_to_js(attempt_id));
+
+        if (creds) {
+            mty_set_uint32(err_c, 0);
+            mty_str_to_c(creds["ice_ufrag"], ufrag_c, buf_size);
+            mty_str_to_c(creds["ice_pwd"], pwd_c, buf_size);
+            mty_str_to_c(creds["fingerprint"], fingerprint_c, buf_size);
+        } else {
+            mty_set_uint32(err_c, 1);
+        }
+
+        MTY_SignalPtr(csync);
+    },
+    parsec_web_begin_p2p: function (attempt_id, port, ufrag, pwd, fingerprint) {
+        PARSEC.clientBeginP2P(
+            mty_str_to_js(attempt_id),
+            port,
+            mty_str_to_js(ufrag),
+            mty_str_to_js(pwd),
+            mty_str_to_js(fingerprint)
+        );
+    },
+    parsec_web_add_candidate: function (attempt_id, ip, port, sync, from_stun) {
+        PARSEC.clientAddCandidate(
+            mty_str_to_js(attempt_id),
+            mty_str_to_js(ip),
+            port,
+            sync,
+            from_stun
+        );
+    },
+    parsec_web_poll_audio: function (cbuf, len) {
+        const fbuf = PARSEC.clientPollAudio();
+
+        if (fbuf) {
+            const buf = new Int16Array(MTY_MEMORY.buffer, cbuf, len);
+
+            for (let x = 0; x < fbuf.length; x++)
+                buf[x] = float_to_int(fbuf[x]);
+
+            return fbuf.length / 2;
+        }
+
+        return 0;
+    },
 };