10 ms·

WebAssembly in my browser desktop environment

318 points by DustinBrett 5y ago

chaosprint 5y ago
Looks great! For SharedArrayBuffer and CORS, I have some experience and it's not difficult to deal with. You can check my project for music live coding in browsers: https://glicol.org https://glicol.org All the audio library and langauge parser are written in Rust and compiled to WebAssembly, running in AudioWorklet thread. The control parameter is constantly shared from main thread to AudioWorklet thread with my customised ringbuf.js to avoid GC from JS in real-time audio: https://github.com/chaosprint/glicol https://github.com/chaosprint/glicol I use vite.js for development; for local dev server CORS, check: https://github.com/vitejs/vite/issues/3909 https://github.com/vitejs/vite/issues/3909 For deployment CORS, e.g. Netlify, just edit the '_header' file as: /* Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp in the 'public' folder.
- ensiferum 5y ago
  Your first GitHub Link is 404
  - chaosprint 5y ago
    Now it should be fine. Thanks. :)
- chaosprint 5y ago
  Wow, I checked your website/desktop (https://dustinbrett.com/ https://dustinbrett.com/) again and tried to open your browser to make some music there. Apparently for Glicol you need to enable CORS. I think that's the only thing that stops the website to make sound now. But my another project QuaverSeries, the precursor of Glicol, works like a charm in your browser: https://quaverseries.web.app https://quaverseries.web.app
- DustinBrett 5y ago
  Thanks! Glicol looks very cool. Ya I am familiar with those headers and I've actually tested it with this, the issue was that I rely on iframes for a few of my apps (Browser & Video Player w/YouTube), and those headers break it. I had some hope with `COEP: credentialless` (https://github.com/WICG/credentiallessness/blob/main/explainer.md https://github.com/WICG/credentiallessness/blob/main/explain...) but it still didn't solve my issue, so I am waiting now for anonymous iframes (https://github.com/camillelamy/explainers/blob/main/anonymous_iframes.md https://github.com/camillelamy/explainers/blob/main/anonymou...).
  - chaosprint 5y ago
    Cool. Really look forward to your update.
baq 5y ago
https://dustinbrett.com/?url=%2FUsers%2FPublic%2FDocuments%2FFlash+Files%2Fbadger.swf https://dustinbrett.com/?url=%2FUsers%2FPublic%2FDocuments%2... feels like i'm young again
- chrisbuc 5y ago
  lol, haven't seen that for years, although I was expecting a rickroll :)
  - DustinBrett 5y ago
    Haha nope, we Badger roll here.
moron4hire 5y ago
I love these things. I was hoping this would render to Canvas instead of HTML elements so I could throw it into my WebXR environment.
- DustinBrett 5y ago
  Ya I think v3 or v4 of my project will eventually go more into this realm and recreating things at a deeper level. Then maybe it could really escape the browser one day.
  - moron4hire 5y ago
    Would you mind sharing how you abstract the applications? I looked in your repo but I'm not fluent in React. I ask because I have a very barebones Application concept in my WebXR environment and am curious what sort of issues you ran into supporting many different types of apps. My current system is kind of like a Entity-Component system, once you start considering 3D elements and dependency resolution. My hope is to one day be able to allow users to upload script bundles as apps into their environment, with the environment being just a minimum viable VR desktop metaphor. At this point, I only have a teleconferencing system and an "annotated Google StreetView exploration app" as Applications. I recently added support for YouTube video streaming that I did not do in my App abstraction, but now think should probably be done that way.
black7375 5y ago
It's amazing that ffmpeg is working on browser
- DustinBrett 5y ago
  Ya it's very cool, although performance will need some work. My hope for this project is as a POC currently.
syrusakbary 5y ago
This is one of the most impressive things I've seen lately built on top of WebAssembly. I remember some years ago (10ish?) there was a push of Operating Systems in the browser, but they all mostly became unused long-term because the browser APIs where not as powerful then as they are now. I think those new APIs along with Wasm support changes completely that assumption. Good work!
- DustinBrett 5y ago
  Thanks! I have been inspired by Web Desktops of the past. It was indeed more popular about a decade ago. I am hoping it's having a resurgence.
- epolanski 5y ago
  But wasm doesn't provide those kind of APIs, anything we see here should be available on JS too.
  - tehlike 5y ago
    wasm comes into play for things like dos emulator.
  - syrusakbary 5y ago
    You are completely right. Let me rephrase things a bit so it's more clear!
tehlike 5y ago
Similar project: https://www.os-js.org/ https://www.os-js.org/ Both look amazing.
- DustinBrett 5y ago
  Ya that is a well done one that was inspiration for me, cause it was taken very seriously. This site has a good list of Web Desktops. https://github.com/syxanash/awesome-web-desktops https://github.com/syxanash/awesome-web-desktops
  - tehlike 5y ago
    What's your vision for this? Is it a hobby for you or you want to commercialize it?
    - DustinBrett 5y ago
      It's just a hobby for me. An outlet to learn tech. Maybe one day it could lead to something, but I prefer to focus on the fun stuff about it for now.
      - tehlike 5y ago
        I would like to reach out to tell you (not yet showable) what i am doing as a hobby too. It's a learning exercise for me.
klabb3 5y ago
I'd be curious about the overhead if the browser was running in kernel space. This would be surprisingly secure since browsers provide some of the most hardened sandboxing out there. Obligatory: https://www.destroyallsoftware.com/talks/the-birth-and-death-of-javascript https://www.destroyallsoftware.com/talks/the-birth-and-death...
- 10000truths 5y ago
  You've got it the wrong way around - the browsers' sandboxing is good because they make use of resource isolation features provided by your kernel.
  - klabb3 5y ago
    Is that so? I thought even different contexts within the same browser context were well isolated. For instance, isn't the reason arbitrary web pages can't access my Lastpass credentials is due to this sandboxing?
    - ale42 5y ago
      You can't enforce real isolation in user mode, you need the kernel to do it.
    - kevingadd 5y ago
      The browser security model relies heavily on protection from things like process isolation, ASLR, etc though at this point browsers also implement their own defense in depth mechanisms on top. for example, jsc maintains separate heaps for each data type - referred to as cages, i think - so that it's hard to perform type confusion attacks. but there are entire classes of attacks that would be viable against browsers if not for the tools they get from the kernel like ACLs, page protections, ASLR, control flow guard, etc. When one part of the stack of protections fails, you can see things like persistent root on chromebooks where that one hole is used as a springboard to attack other vulnerabilities: https://news.ycombinator.com/item?id=15713103 https://news.ycombinator.com/item?id=15713103
- 5y ago
jeffbee 5y ago
How does this all compare to the old and dead idea that you'd just run java applets from your browser? Is it believed that browsers are harder targets than JVMs?
- Sammi 5y ago
  Steve Klabnik had a really great blog post about this: https://steveklabnik.com/writing/webassembly-is-more-than-just-the-web https://steveklabnik.com/writing/webassembly-is-more-than-ju... Basically webassembly is the same core idea as jvm, but redone with all the lessons from the last three decades. A modern cross platform runtime for anything anywhere.
  - AnIdiotOnTheNet 5y ago
    Having read the spec and partially implemented my own WASM VM, if it's goal was to be universal then it wasn't designed very well IMO. Off the top of my head, it presumes that only 32 and 64 bit types exist, that everything is little-endian, and has parametric instructions[0] for some reason. Pretty sure WASM was designed only for web browsers with any seriousness and any other usecases are just enthusiastic people trying to shoehorn it into other places because you can technically do it and it's the new exciting hotness. [0] from memory I think it is only DROP, which makes the decision even more maddeningly silly.
- fizx 5y ago
  All of the old Java (and ActiveX, ewww) was operating under the principle that you'd grant the applet more permissions than javascript, whereas WASM grants the same or fewer permissions!
  - jeffbee 5y ago
    But for a program like ImageMagic or 7Zip to have any utility, it must be reading and writing files somewhere. I'm just trying to figure out why I would download and run a wasm program to handle these tasks. Why would I trust it?
coder543 5y ago
When I saw "Browser" in the list with a Chromium icon (while I'm running Firefox), one of the sillier (yet fun) thoughts that crossed my mind is that you had somehow compiled Chromium to WASM, and you would be running a full-fledged Chromium instance inside Firefox. I'm sure there are limitations with WASM that make this impractical to implement for the foreseeable future without a ton of work, but it would be fun to try out if it did exist.
- steveklabnik 5y ago
  How about Netscape Navigator running inside Windows 3.11 running inside Firefox? This was 2017: https://twitter.com/mozhacks/status/936752824150577153 https://twitter.com/mozhacks/status/936752824150577153
  - vbezhenar 5y ago
    You can run win2000 with jslinux and it got old Firefox inside. You can actually browse some modern websites.
  - chii 5y ago
    Some parts of that parody prezzo has come true. One would hope that the nuclear wars isn't also gonna come true...
  - DustinBrett 5y ago
    Ya that Win 3.11 setup is quite wild. I need to add it perhaps... http://assets.metacade.com/emulators/win311vr.html http://assets.metacade.com/emulators/win311vr.html
- samwillis 5y ago
  Someone has got WebKit compiled to wasm (no js support though): https://github.com/trevorlinton/webkit.js https://github.com/trevorlinton/webkit.js https://trevorlinton.github.io/ https://trevorlinton.github.io/ And another has JavaScriptCore compiled to wasm: https://mbbill.github.io/JSC.js/ https://mbbill.github.io/JSC.js/ Combine the two and you have a full browser engine!
- 5y ago
murt 5y ago
I've always liked projects like this but for me personally this one takes the crown just for sheer responsiveness - I expect to see a few "Working on it" because it's a browser but you've built a really solid foundation here, great stuff mate.
- samtheDamned 5y ago
  In my experience most of these are responsive but don't have much "software". This one took the crown for being so feature rich, even including a browser. The only other project I can remember that does this is FriendOS.
  - DustinBrett 5y ago
    Thanks! That was indeed a goal of mine to throw in the kitchen sink. I hope to keep adding things as I discover cool things and learn new tricks.
- DustinBrett 5y ago
  Thank you very much! I am always trying to tighten up performance and use tricks I learn to make the UX better. I hope to keep growing it over a long time.

318 points by DustinBrett 5y ago

Looks great! For SharedArrayBuffer and CORS, I have some experience and it's not difficult to deal with. You can check my project for music live coding in browsers: https://glicol.org https://glicol.org All the audio library and langauge parser are written in Rust and compiled to WebAssembly, running in AudioWorklet thread. The control parameter is constantly shared from main thread to AudioWorklet thread with my customised ringbuf.js to avoid GC from JS in real-time audio: https://github.com/chaosprint/glicol https://github.com/chaosprint/glicol I use vite.js for development; for local dev server CORS, check: https://github.com/vitejs/vite/issues/3909 https://github.com/vitejs/vite/issues/3909 For deployment CORS, e.g. Netlify, just edit the '_header' file as: /* Cross-Origin-Opener-Policy: same-origin Cross-Origin-Embedder-Policy: require-corp in the 'public' folder.

ensiferum 5y ago
Your first GitHub Link is 404
- chaosprint 5y ago
  Now it should be fine. Thanks. :)
chaosprint 5y ago
Wow, I checked your website/desktop (https://dustinbrett.com/ https://dustinbrett.com/) again and tried to open your browser to make some music there. Apparently for Glicol you need to enable CORS. I think that's the only thing that stops the website to make sound now. But my another project QuaverSeries, the precursor of Glicol, works like a charm in your browser: https://quaverseries.web.app https://quaverseries.web.app
DustinBrett 5y ago
Thanks! Glicol looks very cool. Ya I am familiar with those headers and I've actually tested it with this, the issue was that I rely on iframes for a few of my apps (Browser & Video Player w/YouTube), and those headers break it. I had some hope with `COEP: credentialless` (https://github.com/WICG/credentiallessness/blob/main/explainer.md https://github.com/WICG/credentiallessness/blob/main/explain...) but it still didn't solve my issue, so I am waiting now for anonymous iframes (https://github.com/camillelamy/explainers/blob/main/anonymous_iframes.md https://github.com/camillelamy/explainers/blob/main/anonymou...).
- chaosprint 5y ago
  Cool. Really look forward to your update.

baq 5y ago

https://dustinbrett.com/?url=%2FUsers%2FPublic%2FDocuments%2FFlash+Files%2Fbadger.swf https://dustinbrett.com/?url=%2FUsers%2FPublic%2FDocuments%2... feels like i'm young again

chrisbuc 5y ago
lol, haven't seen that for years, although I was expecting a rickroll :)
- DustinBrett 5y ago
  Haha nope, we Badger roll here.

moron4hire 5y ago

I love these things. I was hoping this would render to Canvas instead of HTML elements so I could throw it into my WebXR environment.

DustinBrett 5y ago
Ya I think v3 or v4 of my project will eventually go more into this realm and recreating things at a deeper level. Then maybe it could really escape the browser one day.
- moron4hire 5y ago
  Would you mind sharing how you abstract the applications? I looked in your repo but I'm not fluent in React. I ask because I have a very barebones Application concept in my WebXR environment and am curious what sort of issues you ran into supporting many different types of apps. My current system is kind of like a Entity-Component system, once you start considering 3D elements and dependency resolution. My hope is to one day be able to allow users to upload script bundles as apps into their environment, with the environment being just a minimum viable VR desktop metaphor. At this point, I only have a teleconferencing system and an "annotated Google StreetView exploration app" as Applications. I recently added support for YouTube video streaming that I did not do in my App abstraction, but now think should probably be done that way.

black7375 5y ago

It's amazing that ffmpeg is working on browser

DustinBrett 5y ago
Ya it's very cool, although performance will need some work. My hope for this project is as a POC currently.

syrusakbary 5y ago

This is one of the most impressive things I've seen lately built on top of WebAssembly. I remember some years ago (10ish?) there was a push of Operating Systems in the browser, but they all mostly became unused long-term because the browser APIs where not as powerful then as they are now. I think those new APIs along with Wasm support changes completely that assumption. Good work!

DustinBrett 5y ago
Thanks! I have been inspired by Web Desktops of the past. It was indeed more popular about a decade ago. I am hoping it's having a resurgence.
epolanski 5y ago
But wasm doesn't provide those kind of APIs, anything we see here should be available on JS too.
- tehlike 5y ago
  wasm comes into play for things like dos emulator.
- syrusakbary 5y ago
  You are completely right. Let me rephrase things a bit so it's more clear!

tehlike 5y ago

Similar project: https://www.os-js.org/ https://www.os-js.org/ Both look amazing.

DustinBrett 5y ago
Ya that is a well done one that was inspiration for me, cause it was taken very seriously. This site has a good list of Web Desktops. https://github.com/syxanash/awesome-web-desktops https://github.com/syxanash/awesome-web-desktops
- tehlike 5y ago
  What's your vision for this? Is it a hobby for you or you want to commercialize it?
  - DustinBrett 5y ago
    It's just a hobby for me. An outlet to learn tech. Maybe one day it could lead to something, but I prefer to focus on the fun stuff about it for now.
    - tehlike 5y ago
      I would like to reach out to tell you (not yet showable) what i am doing as a hobby too. It's a learning exercise for me.

klabb3 5y ago

I'd be curious about the overhead if the browser was running in kernel space. This would be surprisingly secure since browsers provide some of the most hardened sandboxing out there. Obligatory: https://www.destroyallsoftware.com/talks/the-birth-and-death-of-javascript https://www.destroyallsoftware.com/talks/the-birth-and-death...

10000truths 5y ago
You've got it the wrong way around - the browsers' sandboxing is good because they make use of resource isolation features provided by your kernel.
- klabb3 5y ago
  Is that so? I thought even different contexts within the same browser context were well isolated. For instance, isn't the reason arbitrary web pages can't access my Lastpass credentials is due to this sandboxing?
  - ale42 5y ago
    You can't enforce real isolation in user mode, you need the kernel to do it.
  - kevingadd 5y ago
    The browser security model relies heavily on protection from things like process isolation, ASLR, etc though at this point browsers also implement their own defense in depth mechanisms on top. for example, jsc maintains separate heaps for each data type - referred to as cages, i think - so that it's hard to perform type confusion attacks. but there are entire classes of attacks that would be viable against browsers if not for the tools they get from the kernel like ACLs, page protections, ASLR, control flow guard, etc. When one part of the stack of protections fails, you can see things like persistent root on chromebooks where that one hole is used as a springboard to attack other vulnerabilities: https://news.ycombinator.com/item?id=15713103 https://news.ycombinator.com/item?id=15713103
5y ago

jeffbee 5y ago

How does this all compare to the old and dead idea that you'd just run java applets from your browser? Is it believed that browsers are harder targets than JVMs?

Sammi 5y ago
Steve Klabnik had a really great blog post about this: https://steveklabnik.com/writing/webassembly-is-more-than-just-the-web https://steveklabnik.com/writing/webassembly-is-more-than-ju... Basically webassembly is the same core idea as jvm, but redone with all the lessons from the last three decades. A modern cross platform runtime for anything anywhere.
- AnIdiotOnTheNet 5y ago
  Having read the spec and partially implemented my own WASM VM, if it's goal was to be universal then it wasn't designed very well IMO. Off the top of my head, it presumes that only 32 and 64 bit types exist, that everything is little-endian, and has parametric instructions[0] for some reason. Pretty sure WASM was designed only for web browsers with any seriousness and any other usecases are just enthusiastic people trying to shoehorn it into other places because you can technically do it and it's the new exciting hotness. [0] from memory I think it is only DROP, which makes the decision even more maddeningly silly.
fizx 5y ago
All of the old Java (and ActiveX, ewww) was operating under the principle that you'd grant the applet more permissions than javascript, whereas WASM grants the same or fewer permissions!
- jeffbee 5y ago
  But for a program like ImageMagic or 7Zip to have any utility, it must be reading and writing files somewhere. I'm just trying to figure out why I would download and run a wasm program to handle these tasks. Why would I trust it?

coder543 5y ago

When I saw "Browser" in the list with a Chromium icon (while I'm running Firefox), one of the sillier (yet fun) thoughts that crossed my mind is that you had somehow compiled Chromium to WASM, and you would be running a full-fledged Chromium instance inside Firefox. I'm sure there are limitations with WASM that make this impractical to implement for the foreseeable future without a ton of work, but it would be fun to try out if it did exist.

steveklabnik 5y ago
How about Netscape Navigator running inside Windows 3.11 running inside Firefox? This was 2017: https://twitter.com/mozhacks/status/936752824150577153 https://twitter.com/mozhacks/status/936752824150577153
- vbezhenar 5y ago
  You can run win2000 with jslinux and it got old Firefox inside. You can actually browse some modern websites.
- chii 5y ago
  Some parts of that parody prezzo has come true. One would hope that the nuclear wars isn't also gonna come true...
- DustinBrett 5y ago
  Ya that Win 3.11 setup is quite wild. I need to add it perhaps... http://assets.metacade.com/emulators/win311vr.html http://assets.metacade.com/emulators/win311vr.html
samwillis 5y ago
Someone has got WebKit compiled to wasm (no js support though): https://github.com/trevorlinton/webkit.js https://github.com/trevorlinton/webkit.js https://trevorlinton.github.io/ https://trevorlinton.github.io/ And another has JavaScriptCore compiled to wasm: https://mbbill.github.io/JSC.js/ https://mbbill.github.io/JSC.js/ Combine the two and you have a full browser engine!
5y ago

murt 5y ago

I've always liked projects like this but for me personally this one takes the crown just for sheer responsiveness - I expect to see a few "Working on it" because it's a browser but you've built a really solid foundation here, great stuff mate.

samtheDamned 5y ago
In my experience most of these are responsive but don't have much "software". This one took the crown for being so feature rich, even including a browser. The only other project I can remember that does this is FriendOS.
- DustinBrett 5y ago
  Thanks! That was indeed a goal of mine to throw in the kitchen sink. I hope to keep adding things as I discover cool things and learn new tricks.
DustinBrett 5y ago
Thank you very much! I am always trying to tighten up performance and use tricks I learn to make the UX better. I hope to keep growing it over a long time.