Hero Image

Self Hosted Web Based Emulation

docker retro gaming snes nes n64 emulatorjs emscripten libretro xbox edge

Modern web browsers have become powerful cross platform tools for running applications. Recently my interest in running retro emulators in a web browser was fueled by the current and last generation of Xbox consoles getting an update to their Edge browser to be chromium based which opens up the ability to play retro games with no modifications to the system itself. The problem is that in order to do this all of the current solutions are mostly dark places on the internet riddled with ads, not to mention you need to download huge files from remote servers every time you want to play a single game. No real encompassing solution existed to self host your own retro collection without downloading external pages and hacking around with their code.

Enter emulatorjs

EmulatorJS is new container which allows users to scan in their retro game collection and generate a web frontend for browsing/launching/playing games:

https://github.com/linuxserver/docker-emulatorjs/

It is comprised of two parts:

  • NodeJS Backend- For uploading/scanning roms, generating/managing the configuration files needed to point the frontend to them, and downloading the art assets needed.
  • Static web based Frontend- A mix of JSON files for metadata, png images for logos/backgrounds, videos for game previews, and the core logic for launching/running games.

Everything runs in any modern web browser leveraging a mix of emscripten builds of libretro cores and semi de-obfuscated code from https://www.emulatorjs.com/ . We are working to transition everything over to completely open source emulator cores, but as of now for some systems the best functioning code is closed source blobs.

The currently integrated emulators are:

Playing on an Xbox

The frontend uses art assets and copies it's style from other popular frontends like Hyperspin or CoinOPS because the core navigation is based around me testing this on my Xbox with a controller using only up/down/left/right. For the libretro based cores you can pull up a libretro menu using the controller combination in game of start+select+L+R. For emulatorJS based cores settings in general you are SOL, the embedded emulator prevents browser default actions and re-entering the game with your controller after you exit gamepad controls seems impossible with the current code. After you have launched a game press the select button to lock in the controller and ensure the b button does not trigger a fullscreen exit or back action. When you want to leave the current game hold down start for 3 seconds to exit gamepad controls and press B to go back, to hop back in to gamepad controls just press start with your virtual mouse cursor over the running game and select "use gamepad controls". It is a little tricky but once you get get the hang of it controller only navigation is pretty easy. You can also plug in a mouse and keyboard to an Xbox making navigation a bit less cumbersome if you would like. On a keyboard in game menus can be accessed using the F1 key.

By default the Edge browser on Xbox has overscan baked in and renders the window much smaller than the full screen, to disable this go into Settings > Display & Sound > Video Output > Video Fidelity & Overscan > Overscan border, uncheck the box next to Apps.

Art assets and P2P

All of the art assets are hosted out of IPFS and pinned to multiple large providers along with seed servers. I have done what I can to create a decent base set for most emulators/games, but we definitely need community help here.

If you use this container and are able to, please consider forwarding port 4001 of this container to the internet to help with P2P distribution of files.

If you are a graphics wizard the layout for the screen looks something like this:

layout

You can read more about creating and adding assets to the project here: https://github.com/linuxserver/emulatorjs/#for-asset-creators

Previous Post Next Post