npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

remotegamepad

v0.5.2

Published

Mobile HTML5 web gamepad for the smartphone directly mapping to the native gamepad API communicating through WebRTC.

Downloads

30

Readme

npm version

WebRTC Remote Gamepad

The Remote Gamepad project brings a Gamepad on the smartphone and maps directly on the native gamepad API. Thus, projects and games that already support gamepads only need to include the project and show the connection code. The system utilizes the WebRTC technology for direct client to client communication among browsers!

I created this project from a personal motivation, as there was no properly working solution out there. As a broadcasting server would require additional hosting I decided to leverage WebRTC. I'm happy to hear about your experiences with RemoteGamepad.

Get Started

To try out the library follow these steps:

  1. Include the library in your project
  2. On start, the console prints a unique pairing code
  3. Go to https://marcoklein.github.io/remotegamepad to access the mobile user interface
  4. Input the pairing code
  5. Play with the gamepad

Usage

Custom Remote Gamepad User Interface

Users access the remote gamepad on their smartphones. You may want to customize the layout and design of the gamepad.

First, install the project via:

npm install remotegamepad

Then import the client module:

import { RemoteGamepadClient } from 'remotegamepad/client';

Architectural Design

The solution addresses three primary concerns:

  1. The smartphone gamepad user interface
  2. The connection through WebRTC
  3. The server side API to use RemoteGamepad

The gamepad UI offers one standard layout but future releases might customize it. As WebRTC is still an emerging technology, there are browser to browser differences. For the connection handling, the project leverages the power of PeerJS, a JavaScript implementation of WebRTC. As you include the library into your project, it naturally maps around the native gamepad API. Thus, if you support gamepads already there is not further need for change.

Gamepad User Interface

In the present, the user interface supports one standard layout with one analog pad on the left side, two action buttons on the right side, and a menu button in the center. Additionally, a button in the upper right corner switches to fullscreen mode.

For rendering, the front end uses a HTML5 canvas that always resizes to fill the full screen. A pad and button class provide the logic. They offer an easy way to enhance the interface.

Connection States and Screens

The UI has three connection states:

  1. Disconnected
    1. Enter Connection Code -> Connecting
  2. Connecting
    1. Failure -> Disconnected
    2. Success -> Connected
  3. Connected
    1. Lost Connection -> Disconnected

Each state switches the appropriate screen.

Connection Handling through WebRTC

The project uses PeerJS for connection handling. The library provides a JavaScript implementation of the technology. Dedicated client and server classes handle the connection to fulfill special requirements of the gamepad application. In particular, client and server regularly send keep alive and ping messages. This is due to different browser implementations and some browser put a connection to sleep if the traffic is low.

RemoteGamepad API

On the server-side, the RemoteGamepad API maps directly onto the native Gamepad API. Controlled gamepads have the property remote with the associated RemoteGamepad object. Additionally, the global object RemoteGamepadAPI provides direct access to further API elements.