Wasm Builders 🧱

Cover image for WebAssembly in my Browser Desktop Environment
Dustin Brett
Dustin Brett

Posted on

WebAssembly in my Browser Desktop Environment

For over a year now I've been working on daedalOS, my desktop environment in the browser. At the start of 2022 I published the app as my website for everyone to play with.

Website: dustinbrett.com
Source Code: daedalOS

For the WebAssembly audience I wanted to discuss the many features I've integrated into my desktop environment which use WebAssembly. Here is a list in no particular order:

x86 Emulation via v86

I support dragging .iso & .img files into the app which can be ran on v86. It also comes loaded with Kolibri and Linux. When an app is closed a snapshot of the current state is saved to /Users/Public/Snapshots which is automatically loaded the next time the same image is opened.

V86 running Kolibri

DOS Emulation via js-dos

For this app you can open any .zip or .jsdos file in it. If you don't provide a jsdos config file it will boot to the command prompt. I have some preloaded DOS shareware games such as Doom and Duke Nukem 3D. Like v86 it will save snapshots on close and reload them on reopen, but instead of loading the emulator state it just loads the directory contents such as save games.

JS-DOS running Duke Nukem 3D

WINE (16/32-bit) via Boxedwine

This also supports .zip files and will try and run .exe too. It can run various apps as BoxedWine shows on their Apps and Games page. As an example I downloaded the latest 32-bit x86 Portable (zip) version of Notepad++, shown below.

BoxedWine running Notepad++

Flash Emulation via Ruffle

This app supports .swf and .spl files. I have a few fun demos on my site such as the Badger Badger Badger and Windows RG (Really Good Edition).

Ruffle running Badger

7z/RAR/TAR Extraction via Libarchivejs

I support .zip & .iso mounting through non-WebAssembly methods, so to handle .7z, .rar, .tar & .tar.gz I've added Libarchive.js. Extracting is done from the right click context menu on each file.

Files extracted via Libarchive.js

Audio/Video Conversion via ffmpeg.wasm

Currently only supporting single thread because of the SharedArrayBuffer limitation and my desire to not deal with CORS issues. For video you can convert .avi, .flv, .m4v, .mov, .mp4, .mpeg, .ogv, .webm & .wmv. For audio it supports converting .aac, .aiff, .ape, .flac, .m4a, .mp3, .oga, .ogg .wav & .wma. These conversion options can be access via the context menu on each file.

File converted from MP4 to MKV

Image Conversion via WASM-ImageMagick

Similar to audio/video, I support various formats of images that can be converted. They are .bmp, .gif, .ico, .jpg, .png, .psd, .tiff & .xcf.

File converted from JPG to PNG

Python via Pyodide

I've added support to run .py scripts in the terminal. It's also possible to open the Terminal directly and run a command such as py import sys; sys.version to see the same result as this example script.

Running a Python script

WASI Modules via Wasmer JS

I've added limited support to run wapm.io directly from the Terminal. Examples of commands that work well are wapm cowsay {Text} and wapm uuid.

Running wapm commands in Terminal

Space Cadet via SpaceCadetPinball

Finally for a blast from the past I've added 3D Pinball Space Cadet which has been ported to many platforms including to WebAssembly.

Playing Space Cadet

The Future...

Thanks for checking out my post/app!!! If you'd like to follow my progress as I continue to play with all things web/dev, please check out my YouTube channel. Here is my latest video where I discuss progress on this app:

Top comments (17)

Collapse
dustinbrett profile image
Dustin Brett Author • Edited on

Also I'll be doing a follow-up article pretty soon as I've added a NES/SNES/Sega Genesis emulator via WebAssembly, and I have a few other WASM's planned for the near future!

NES/SNES/Sega Genesis Emulator

Collapse
dustinbrett profile image
Dustin Brett Author

Did a video demo of everything on this list tonight, for anyone interested. :-)

Collapse
adityaace profile image
Aditya Tiwari

Oh God!! Truely unbelievable project.

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks! That's nice of you to say.

Collapse
jmylsamy profile image
Jayanthi

This is incredible Dustin! Looking forward to see how this is going to evolve

Collapse
dustinbrett profile image
Dustin Brett Author

Thank you very much!

Collapse
zstauber profile image
Zachary Stauber

Whoa ...

Collapse
cohix profile image
Connor Hicks

This is fantastic! Thank you for sharing :)

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks! Glad you liked it.

Collapse
holg profile image
Holger Trahe

Really cool Dustin, especially impressed by the nitty gritty details, really awesome.

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks! I have a lot of fun with the details. Still lots of work to do. :-) I'm always adding more things to do or fix.

To Do's

Collapse
saljooq profile image
Sal

I'll be honest. This is the coolest thing I've seen in a long long time. I think this may revolutionize how web applications and teams function. The response rate on this thing is unreal

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks! I hope my proof of concept can inspire others to build on the ideas.

Collapse
quincarter profile image
quincarter

This is really incredible. Fantastic job! WASM is awsm!

Collapse
dustinbrett profile image
Dustin Brett Author

Thank you very much!

Collapse
joepio profile image
Joep Meindertsma

Amazing project! 😁

Collapse
dustinbrett profile image
Dustin Brett Author

Thanks! It's my passion project for the foreseeable future.