Preface

Today, I was bored and suddenly thought of building an old game emulator on the web, so I searched on hub.docker and found the linuxserver/emulatorjs project. The official explanation is: "Browser-based network simulation, portable to almost any device, used for many retro game consoles." In fact, this is to implement the RetroArch emulator in a web way.

The supported architectures are:

My main docker environment is m1 mac-mini (arm64), and the backup docker environment is based on inter 13th generation i5 mini host (x86-64). Both are fine. This time I will deploy it in the backup docker environment.

Deploy emulatorjs

Create the directories you will use in advance

Create a configuration file directory:

mkdir -p /docker/emulatorjs/config

Create a game rom directory:

mkdir -p /docker/emulatorjs/data

Since I have existing NES and GBA ROMs, I created two additional folders and copied the corresponding ROMs into them:

mkdir -p /docker/emulatorjs/data/nes/roms mkdir -p /docker/emulatorjs/data/gba/roms

---

important:
Emulatorjs supports emulators for a variety of game consoles, the types are as follows:

• 3do
• arcade
• atari2600
• atari7800
• colecovision
• doom
• gb
• gba
• gbc
• jaguar
• lynx
• msx
• n64
• nds
• nes
• ngp
• odyssey2
• pce
• psx
• sega32x
• segaCD
• segaGG
• segaMD
• segaMS
• sega saturn
• segaSG
• snes
• vb
• vectrex
• ws

The ROMs of these game consoles are distinguished in the data folder by the folder /roms named after the game console type. For example, the storage path of the ROM of NES is:/data/nes/roms, the storage path of gba's rom is:/data/gba/romsSo if you already have the rom for the corresponding game console, you can create the corresponding folder in advance and copy the rom into it, and then bind it with the -v method when creating the docker, which saves the trouble of uploading the rom separately later.

---

Deploy emulatorjs

The command is as follows:

docker run --name=emulatorjs -d --restart=always --network=public-net \ -e PUID=0 \ #Optional function. The specific values of PUID and PGID are determined by the id command. For example, for my root account, the output of "id root" is "uid=0(root) gid=0(root) groups=0(root)". If you encounter permission problems, you can try this parameter -e PGID=0 \ #Same as above -e TZ=Asia/Shanghai \ #Specify time zone -e SUBFOLDER=/ \ #Optional function. If the reverse proxy uses the proxy directory function, this parameter must be used in conjunction with it (for example, the container is deployed on a cloud host, and the management console and the emulator front end need to be accessed through a domain name at the same time). -p 3500:3000 \ #Map the host port 3500 to the container port 3000. This is the management console port. Please modify it according to the actual situation. -p 9600:80 \ #Map the host port 9600 to the container port 80. This is the emulator front-end access port for browsing and starting games. Please modify it according to the actual situation. -p 4001:4001 \ #Optional function, IPFS peer port. If you want to participate in the P2P network distribution of front-end works, please map this port on the export device. -v /docker/emulatorjs/config:/config \ #Configuration file mount directory -v /docker/emulatorjs/data:/data \ #Game data file mount directory -v /docker/emulatorjs/data/nes/roms:/data/nes/roms \ #Optional operation, specify the nes game rom directory -v /docker/emulatorjs/data/gba/roms:/data/gba/roms \ # Optional operation, specify gba game rom linuxserver/emulatorjs:latest

When using the above commands, please delete the comments after #.

Access emulatorjs through the management console for management

Initialization File

Use http://host IP:3500 to access emulatorjs, and the following interface appears:

Click download in the red box above to automatically start initializing the download file:

When Downloaded All Files is displayed in the red box in the upper left corner of the above picture, it means the download is complete. At this time, click the black square button in the red box in the upper right corner to close the interface.

Rom Management

The following figure shows the content of Rom Management:

In the picture above, you can see that the ROMs in the gba and nes folders that I mapped in advance have actually been recognized, but you still need to click scan to scan:

Click on the gba in the red box below to enter:

Then click Add All Roms to Config in the red box below to add the scanned games on the right to the configuration:

Do the same with nes.

After updating the corresponding roms folder content, you need to use Scan here to rescan. Default DL/Update is to automatically update other system files, which are the files downloaded during the previous initialization.

Config Management

The following figure shows the content of Config Management:

Here are the key parameters for modifying each type of simulation. We just need to take a look at them and don’t touch them.

File management

The following figure shows the content of File Management:

Here you can directly manage the contents of the data folder mounted by the container using the -v parameter. Subsequent ROM uploads are implemented here (of course, you can also operate directly on the host machine). For example, to upload the gba ROM:

If you did not use the -v parameter to specify the directory containing the specific game ROMs as I did before, you need to enter the ROM folder of the corresponding game type here (for example, /gba/roms/ in the figure above), upload the ROM with upload, and then return to the Rom Management interface to run the corresponding game type and re-run scan:

Profile Management

The following figure shows the contents of Profile Management:

Here you can create different usernames, passwords and configuration files (retroarch.cfg) for different accounts. When accessing the simulator front end, you can use the same account to log in and upload and download configurations. This is very useful. Simply put, use one browser to log in to one account and complete the key configuration, then upload the configuration, and log in to the same account in another browser and download the configuration. This will achieve key configuration synchronization. To modify the default configuration directly, you need to use the default account. For details, see the article:emulatorjs simulator modifies the default button configuration

---

In addition, I have also tried to modify the default settings in the source code directly, wanting to change the default configuration once and for all, but it did not work. You can also try it. The specific internal path of the file container is as follows:
/emulatorjs/frontend/data/emu-main.js, you can run the following command on the host machine to open it directly with vi in the container:

docker exec -it emulatorjs vi /emulatorjs/frontend/data/emu-main.js

Use /defaultControllers directly in vi and press Enter to search for the keyword "defaultControllers":

In the above figure, the value after value is the keyboard key, the value after value2 is the handle, and the key definitions of the digital items in front are as follows:

Friends who are interested can study this. After I modified emu-main.js, it didn't take effect. The only post on the Internet that mentioned this only had one sentence, saying that the loader.js file also needed to be modified to allow emulator.js to be loaded before emu-main.js. Because I don't understand programming, I studied loader.js for a long time but didn't understand it (I even went to read the Java Novice Tutorial...), and finally gave up. I hope friends who understand programming can complete this last step.

Note: emu-main.js, emulator.js and loader.js are all in the container/emulatorjs/frontend/data/in the directory.

---

Access emulatorjs through the emulator front end to play games

Use http://host IP:9600 to access the front-end interface:

Click the red box in the upper left corner to enter the username and password login interface:

The username and password in the red box in the above figure are the ones we created earlier in the Profile Management section. You can also log in without logging in, which will correspond to the default user.

Because I only have gba and nes games, there are only 2 options on the interface above. You can use the up and down keys on the numeric keypad or the mouse wheel to select the type, then press enter to enter, and then you can see the specific game:

Use the mouse wheel or the up and down arrows on the keypad to select the corresponding game, and then press Enter to enter:

For games, the default keyboard keys are: up, down, left, and right correspond to 4 small arrows, z and x are B and A, right shift is selection, and enter is confirmation. (I just want to ask, what was the god who set this keyboard default key thinking...?)

If you want to modify the buttons, enter the specific game, press F1, and then modify them in the following order:

Do not directly use the Quick Menu Controls that is called up by F1, as shown below:

You can't change the keys here, you can only select an existing mapping (at least for me).

The final effect is as follows:

Configuring public network access

If you want to publish to the public Internet, you need to choose the most suitable publishing method according to the actual environment and the reverse proxy you use. You can refer to my previous articles:
1,Docker series uses Docker to build its own reverse proxy based on NPM
2,Linux panel series configure reverse proxy and use non-443 port for publishing
3.Home data center series uses domestic cloud hosting to get free cloudflare to achieve fast access to domestic sites from abroad
4.Home Data Center Series: Use cloudflare to build a website quickly with no public IP in your home broadband (general purpose)

The first and second methods are suitable for environments with public IP but no legal 443 port (home broadband, unregistered cloud host). You need to add a non-standard port after the URL (if you use cloudflare to build a website, you don't need to add a port, but you need to customize the source station port. You can refer to:Home data center series uses cloudflare's Origin Rules to solve the problem of having a public IP but no legal ports 80 and 443 when building a websiteThe third method is suitable for cloud hosts with a record, and the fourth method is suitable for all environments (including environments without public IP), which is also the method I recommend (regardless of whether your environment has a public IP or not, because this method does not require running https traffic directly on the public network).

There is another problem here, that is, there are 2 ports, one is the management console port, and the other is the front-end game port. I suggest publishing the front-end game port. If you want to publish 2 ports and want to use only one domain name, you need to use the proxy directory function of the reverse proxy, and you need to deploy the game at the same time.-e SUBFOLDERParameter matching.

Afterword

Finally, I want to say that, in fact, the following configuration will involve another area: the configuration of the RetroArch emulator. To be honest, I am dizzy now. The configuration logic of this emulator is too anti-human. Moreover, since many keys on the keyboard have defined functions by default, but they are not reflected in the configuration options of the emulator, conflicts are found after configuration. For example, the default k and p are both pause. If you set other functions on k and p, the game will be paused at the same time. . I will write an article about this after using it for a while and see if I am in the mood to write another article.

Note: After playing around with it, the default shortcut keys I found are as follows:
H：reset
K and P: Pause
L and space: accelerate (hold L to accelerate, release to stop accelerating, press the space bar once to keep accelerating, press it again to stop accelerating, don't just press the space bar randomly.. The habits I developed in World of Warcraft are very uncomfortable here)
n and m: sharder: "retroarch.glslp" (don't know what it's for)
Numpad + and -: adjust volume