A bookmarklet for using phones as impromptu controllers in browser-based "local" multiplayer games.
Save this bookmarklet to your browser:
javascript:{var s=document.createElement("script");s.src="https://zalo.github.io/ctrl.js/bookmarklet.js",document.body.appendChild(s);};void(0);
When you activate the bookmarklet, it adds a QR Code to your current page, which can be scanned with your smartphone's camera app (the default camera app on iOS and Google Lens on Android (touch the bubble)).
Visiting the page on that QR code brings your phone to a page which will form a P2P connection with the bookmarklet. This connection routes button presses from your phone to the webpage, and injects them as KeyboardEvents. Anything on the page that is subscribed to KeyboardEvents will receive button-press events as if they had come from your keyboard.
The current default button mapping is:
- Up ->
w - Left ->
a - Down ->
s - Right ->
d - A ->
Space - B ->
Shift - Start ->
Enter
These keymappings can be changed by clicking on the player's name above the QR Code.
The bookmarklet works on the majority of HTML5 apps. There are two primary situations where it could fail:
- The app is embedded within a cross-origin iframe. ctrl.js can not inject events into cross-origin iframes because browsers prevent access as a security precaution. Usually, ctrl.js will suggest clicking into the iframe's source directly to bypass this issue. However, if the iframe's source was set dynamically, ctrl.js cannot read its current location. If you'd like your dynamically-sourced cross-origin iframe to support ctrl.js, you should implement receiving
KeyEvents through the postMessage API (ctrl.js will send these). - The website's Content Security Policy prevents embedding scripts from bookmarklets. This can be disabled through your browser, but it's not recommended for security.
Alternatively, you can try using the standalone desktop application, which will create KeyboardEvent's at the OS level.
Based on peer.js, qrcode.js, three.js, and Skeleton.css.