BrowserBox VS satori

This is great. I want to add WebWebView to the list and show 100% compatibility, because we run Chrome on the server and open a portal to it via an iframe. You can see it running here: https://browse.cloudtabs.net/signupless_sessions and code here: https://github.com/BrowserBox/BrowserBox - But we have yet to release a developer API. Seeing this, we will double our efforts!

Is that right? Could be a recent acquire if it's DOM mirroring.

I heard CF acquired S2 a few years ago, and what S2 did is they created a WebAssembly binary that composited the browser SKIA draw instructions on the client, and streamed the SKIA draw instructions from the server. Not without its issues, but certainly useful.

What we do is just stream pixels to the client. Yes it's expensive in terms of bandwidth, relatively. But the advantage is simplicity. And with a close server and bandwidth trending faster and cheaper, with the increasing drive to video consumption across media, I don't see bandwidth as an issue.

If you're interested, our code is on GitHub: https://github.com/BrowserBox/BrowserBox

Click through for a version on a server close to you that you can play with now.

Source code here: https://github.com/BrowserBox/BrowserBox

This demo is probably not really ready for a widespread audience, but luck it I’m just posting it anyway

> Edit: parent commenter seems to be promoting their product. Looks like a random remote browser, perhaps avoid entering important credentials there.

True. Maybe I should have put a full disclosure? I thought it was obvious, but I get if it wasn't. I'm sorry for not being more clear!

It's a good point to advise people to avoid entering important credentials in something that probably looks untrusted. I'd also advise that at this stage as we have no SLAs for now, and are just testing this SaaS-to-be demo of this source-available product:

https://github.com/BrowserBox/BrowserBox

Thank you for pointing out the reasonable and important security concerns. Although I should have probably done that myself, I was just so eager to help!

Aside: I am surprised tho that you were unable to even login on your VPN. I would think that the IP blocks we run the browser form and those of a VPN would be in the same category of 'cloud IPs', so why should it work on CloudTabs but fail for you directly on a VPN? Who knows?

These are difficult problems and perhaps the modern web has developed at a pace that older tech like RDP has not kept pace with. But Guacamole bucks that trend. The video shows how far it has come.

Guacamole is good, and I love that it's clientles and works in the browsers, but VNC lacks sound so you need to do that separately. Also the input lag when remote frames increase in frequency is challenging.

If you're looking for something lighter weight and possibly smoother and faster (albeit non-free software with a non-commercial option), check out BrowserBox: https://github.com/BrowserBox/BrowserBox

Solving input lag, and maintaining responsiveness across a range of bandwidth situations has been one of our priorities and I think we've mostly achieved.

We've accomplished this through a combination of sensible heuristics for congestion control, and using WebRTC with a fallback to WebSockets when faster. We also have audio out of the box, no set up required!

However there's always room to improve, which is why it makes it so exciting to work on. Depending on how close you are to a server you may encounter lag issues, too. Check out a free live demo of it working here (sorry, signup is not supported yet!):

https://browse.cloudtabs.net/signupless_session

Some other problems we solve that are not always so easy to configure with Guacamole (and are harder to do with an RDP layer in general), but much easier for us as we virtualize the browser itself are first class mobile support.

Obviously that's an issue with remoting desktops from small form devices in general, but if a browser is all you need remotely then we got your back! :)

Same time, BrowserBox will not be for everyone. It all depends on what you need. Get on touch if you are interested!

Run your browser on a remote machine? Using say BrowserBox: https://github.com/BrowserBox/BrowserBox

Full disclaimer: my company develops it.

to "repoint", or reorient an active RDP session to instead targe the "console", a sort of persistent virtual terminal session that the computer always has. From the days of when people actually sat in front of the machines they were using. Physically, like.

I thought that if I could send my RDP session to console then it would live. It would be alive!

And it was. But the audio still died.

All the while, I was context switching out of RDP back to my macOS desktop, to check my BrowserBox connection open in a regular browser tab. Every time, no matter what weird configurations, registry settings, or supposed ways to change various settings related to RDP, nothing worked. Every time audio still died.

This was quite possible the biggest, craziest bug I ever worked on. (Interestingly enough the second biggest, craziest bug I ever worked on was also audio related).

But maybe it wasn't a bug. Maybe it just wasn't to be. Perhaps the gods willed it to be not so. None shall ever, from now until the ashes fall upon the ghost of the world, and time stands finally still, stream audio from Windows Server without a real RDP connection.

It was during this period I also discovered the idea of a Windows Session Host server with Client Access Licenses. Turns out, you need to purchase a RDP license from Windows if you want more than 2 RDP sessions (approximately) to the same OS instance/VM.

Turns out, too, that this notion was not related at all to getting audio to work.

It really seemed like I'd never get there. I was starting to think: Cut my losses, abandon it. It was a nice dream, shame it didn't work out, but that's what happens sometimes.

One day, I woke up with a hunch, that if I could someone use VNC at the same time as RDP, perhaps I could trick the repointed console session into staying alive. I didn't know how or why this should happen, but it just seemed like: it should, somehow. As if through all my intense working with Windows, it was somehow whispering to me, telling me how it wanted to be treated. As if Windows itself wanted this to occur, and somehow through all the interacting with it, I'd absorbed that message. And figured it out. I knew I was onto something with this. Momentum, and optimism, returned. I felt re-energized. I began to feel like this was possible. But still, I had no idea how to do it.

Turns out, I eventually figured it out. And made it repeatable. And further that it worked on: Windows Server 2022, Windows Server 2019. It also, IIRC, worked on Windows 10 and Windows 11.

I formalized it all into a ridiculous PowerShell script where nothing now seemed impossible (so I went so far as to even use crazy C#-in-PowerShell hacks to close windows automatically as part of the install process, just to ensure that all that epic work, 10 hour days, maybe for over two weeks or more, were not wasted. And finally I ended up with a script that actually managed to both install BrowserBox, and set up the required VNC/RDP dance needed to keep the Windows audio drivers active, even when I do not have an RDP connection.

It was kind of complex, and like synchronized swimming, depended crucially on the order of the orchestrated VNC and RDP connections, and what was done in each session, but roughly, the process the enable audio on Windows versions, went like this:

- Create an initial RDP connection to the Windows based server for setup.

- Set up the application by performing a normal install of BrowserBox

- Open up registry key settings enabling: multiple (the maximum allowed for free, which is 2) sessions; and connecting to localhost

- Also set up a login script that will perform "The Magic Task" described below.

- Install VNC, and configure it with a password. From within that RDP session, create a VNC connection from that Windows server to itself, and ensure that VNC window is open and not minimized.

- From within that loopback VNC session just created, execute the logon script (which will happen automatically) to perform the Magic Task. The Magic Task is: use tscon to repoint the current main active RDP connection (from my local computer to this remote Windows machine) to instead point at console, disconnecting me, and creating a ourobouros-double-loopback-VNC-RDP-ying-yang super session that is self-stabilizing and crucially (Crucially! because at that point it had been 3 weeks of effort!), keep the audio streaming

The music might die one day. But not today.

I managed to factor out this code into a relatively reusable-esque script that I called Thunderbird (because I was so in awe of myself at that point haha!)

You can see the code here:

https://github.com/BrowserBox/BrowserBox/blob/boss/windows-s...

Postscript

Turns out tho, despite all that effort, Windows was never a very popular target for BrowserBox. Sure, good to prove that it works there and provide a first blush at support, but in the end, not that many people use Windows to run BrowserBox. As proud as I am of that achievement, I can't even guarantee the method described still works today. The script had so many moving parts, I imagine it would be pretty fragile. Also, I have a suspicion that, as of this post today, Microsoft may hear this and want to lock down this seeming workaround because, even tho I don't think there's a way to use it to get more RDP connections that licensed, it sort of seems like something that shouldn't be possible, so I'm kind of worried they will just stamp it out.

This sucks. Supply chain is such an issue.

Even tho we don't currently target any npm releases, I make use of socket.dev to monitor my project by creating an npm release for it. But my project BrowserBox (lightweight virtualized web browser) only uses ~800 dependencies including all descendents, with only 19 top-level deps (cool your heels non-JavaScript folks, this is comparatively lightweight for a full stack boing).

I'm considering just snapshotting all 800 deps into a @browserbox namespace at npm. And then tracking any vulnerabilities discovered and patching the fixes.

It sounds crazy, but that's where we are. At least that way I "own" all the dependencies and can guarantee (up to company security at least) that we don't have supply chain vulns on the Node/JS side.

https://socket.dev

https://github.com/BrowserBox/BrowserBox

View on GitHub

I've used satori [0] on the backend with TypeScript/Deno to render JSX as an SVG (which is then rendered to a PNG).

Satori is meant for rendering Open Graph images (e.g. the little images that come up when you post a link on Twitter/Slack/Facebook), but I found that it works well for rendering arbitrary images. It supports a subset of modern CSS, including flexbox.

My use case is posting match reports for League of Legends into a Discord text channel, e.g. person X just played a match, here are their stats.

It's quite nice because there are almost zero server-side native dependencies (the one exception is the library to convert svg -> png requires some native libraries).

Here's what a match report looks like: [1]

Here's an example of what the JSX looks like: [2]

[0]: https://github.com/vercel/satori

[1]: https://github.com/shepherdjerred/glitter/blob/main/assets/p...

[2]: https://github.com/shepherdjerred/glitter/blob/main/packages...

Another way is to write HTML/CSS and use satori [0] to convert that to SVG. It's meant for Open Graph images (the images that show up when you link a site in Discord, Slack, Twitter, etc.), but it works quite well for anything.

This is obviously not as flexible as true SVG, but it is familiar to author for anyone who's written a React application. I've used it on the backend to generate match reports for League of Legends [1]

[0]: https://github.com/vercel/satori

[1]: https://github.com/shepherdjerred/glitter-boys

Install the @vercel/og package. This library is designed to convert React code into PNG images. It is built on Satori, a library that converts HTML and CSS into SVGs.

Examples are available in the Vercel OG Playground.

In this version, we no longer use Puppeteer to capture HTML and return images. Instead, we utilize the @vercel/og library, which employs Satori as its core engine. Satori is a library that converts HTML and CSS into SVG.

This is made possible thanks to the Dynamic Open Graph Image Generation feature introduced with Next.js version 13.3, and the new Metadata API. In summary, it involves generating images using code (in our case, TSX, HTML, and CSS) with the help of the libraries @vercel/og (already integrated in the App router) and Satori. Satori converts HTML and CSS to SVG, and then resvg-js converts the SVG to a PNG image. All of this in just a few milliseconds!

Here you are returning an ImageResponse instead of the Response, alternatively you can also extend the request and response web api using 'NextRequest' and 'NextRespone', to do that you can import them using import { NextResponse, NextRequest } from 'next/server';, though for this example it is not required. Now if you refresh your browser you will get an image generated by your 'route.js' at request time. Well we are almost done. You can render whatever dynamic data in your image you want and customize your image using og playground, you can even generate 'SVG' on request as the og image. For this example we will fetch a random number from random.org api, then we will use that number as an id and fetch an image from Lorem Picsum, with the same image url we will fetch the description for the image from the Alt Image Generator and generate an image on request with the image that we fetched and the description we have fetched and use it in a design to create the og image. Kind of like that.

Use Vue files to generate SVG images by Satori. The image can be generated by running ESM script or CLI.

I'm not familiar with it but looks like it's made with nodejs, node uses the same js engine used by chrome, node renders the template and converts it to plain html/css and then they use this library to convert it to png but in the library github page it says that they don't support everything so it's kinda similar to xhtml2pdf or weasyprint