<button onclick="load()">Load Game</button>
<div id="game"></div>
<script type="text/javascript">
    EJS_player = '#game';
    EJS_gameUrl = '/your/game/rom.zip';
    EJS_core = 'snes9x';
    function load() {
      var script = document.createElement('script');
      script.src = 'js/libretro.js'
      document.getElementsByTagName('head')[0].appendChild(script);
    }
</script>

Simply extract the release into the root of your webserver and try this test page for the snes9x emulator.

Supported emulators

81- https://github.com/libretro/81-libretro
bluemsx- https://github.com/libretro/blueMSX-libretro
fceumm- https://github.com/libretro/libretro-fceumm
fuse- https://github.com/libretro/fuse-libretro
gambatte- https://github.com/libretro/gambatte-libretro
gearboy- https://github.com/libretro/Gearboy
genesis_plus_gx- https://github.com/libretro/Genesis-Plus-GX
gw- https://github.com/libretro/gw-libretro
handy- https://github.com/libretro/libretro-handy
mame2003_plus- https://github.com/libretro/mame2003-plus-libretro
mednafen_ngp- https://github.com/libretro/beetle-ngp-libretro
mednafen_pce_fast- https://github.com/libretro/beetle-pce-fast-libretro
mednafen_psx- https://github.com/libretro/beetle-psx-libretro
mednafen_vb- https://github.com/libretro/beetle-vb-libretro
mednafen_wswan- https://github.com/libretro/beetle-wswan-libretro
melonds- https://github.com/libretro/melonDS
melonds_threaded- https://github.com/libretro/melonDS
o2em- https://github.com/libretro/libretro-o2em
prboom- https://github.com/libretro/libretro-prboom
prosystem- https://github.com/libretro/prosystem-libretro
snes9x- https://github.com/libretro/snes9x
stella2014- https://github.com/libretro/stella2014-libretro
tyrquake- https://github.com/libretro/libretro-tyrquake
vba_next- https://github.com/libretro/vba-next
vecx- https://github.com/libretro/libretro-vecx
virtualjaguar- https://github.com/libretro/virtualjaguar-libretro
yabause- https://github.com/libretro/yabause
yabause_threaded- https://github.com/libretro/yabause

Variables and usage

Supported variables

EJS_player- The id of the div you want the libretro canvas to render into.
EJS_gameUrl- The full URL to the game to load.
EJS_core- The libretro core to use.
EJS_biosUrl- Bios URL will be loaded into libretro's system directory, a zip file will be unzipped into this directory.
EJS_onGameStart- Run a custom function after the game is started.

Basic setup

The user of the game can bring up the libretro menu by pressing F1 on a keyboard or start+select+L+R on a controller. You can define scripts to run after startup by using the onGameStart option, IE to go fullscreen on load:

EJS_onGameStart = function() {
  Module.requestFullscreen(false);
}

The core can be interacted with while running using the Module as seen above to go fullscreen, there are other commands that can be sent also one of the most important being Module._cmd_savefiles() this will force an sram dump of the users save data on supported games/cores. You will want to tie this to an unload or hashchange event on your webpage to ensure the user does not need to go into the menu and manually trigger this action. Some other commands are:

_cmd_load_state()
_cmd_save_state()
_cmd_savefiles()
_cmd_take_screenshot()

Everything is stored in browser storage using an indexDB there is no integrated logic for downloading the files from the browser, but this can easily be built by interacting with the fs directly in the browser. All of the code is open, feel free to modify it to your needs, but do not come here for support, none will be provided. These repositories are simply for development participation only.

Bios files for cores

These can be loaded as is no need to extract or modify them, they will be unzipped to the system directory before core load.

MAME roms with chds

mame_2003_plus roms need to be full non-merged roms in order to function. These are the zips that contain everything from the bios, to parent, to clones. In order to get games with chd files to load we have a custom file format that can be loaded by the extension ".multizip". To create this file simply zip the rom zip and the chd file (no folders) into a single file. IE if you had the file kinst.zip and the folder kinst/kinst.chd simply move the kinst.zip file into the kinst folder and create the archive using zip kinst.multizip kinst.zip kinst.chd. This multizip file will be unpacked before the emulator is loaded into the directory it is looking for the files.

Threaded emulators

Some emulators might have a threaded option, in order for these to function on the client they need to have specific security headers set on the actual web host of the files so SharedArrayBuffer can be used in the clientside browser. They also need to be served from an HTTPS endpoint as these are the sandboxing requirements for modern browsers.

In Nodejs:

app.use(function(req, res, next) {
  res.header("Cross-Origin-Embedder-Policy", "require-corp");
  res.header("Cross-Origin-Opener-Policy", "same-origin");
  next();
});

In NGINX:

  add_header Cross-Origin-Opener-Policy same-origin;
  add_header Cross-Origin-Embedder-Policy require-corp;

Code Reference

The source code these cores are build against is located HERE.