WingNews logo WingNews
top | item 32598062

Show HN: Browse HN Together in Three.js

268 points| declan_g | 3 years ago |threejs-example.hyperbeam.com

Hey HN,

We’re Philip, Amby, and Declan, and we made “multiplayer virtual computers” that you can embed anywhere, including 3D spaces. We decided to build this because we noticed that embedding third-party apps and websites can be a nightmare due to incompatible platforms, security issues, and poor UX. Adding multiplayer functionality to these embeds makes this problem exponentially more difficult.

On the backend, we’re spinning up a VM and running a resource-optimized fork of Chromium which we then stream to participants via WebRTC. Since we’re hosting the servers running the applications, multiple users can connect and control the virtual computer seamlessly, and their client just needs to handle a video stream.

If you want to add multiplayer virtual computers to your own app, you can sign up on https://hyperbeam.com/?ch=hn&cm=hn1, grab a free API key, and throw the provided embed URL in an iframe in your app.

You can also play around more with the Three.js demo in our interactive sandbox: https://app.sideguide.dev/hyperbeam/threejs/

If you have any questions or feedback, feel free to comment or shoot me an email at declan@hyperbeam.com.

Thanks!

Docs: https://docs.hyperbeam.com Discord: https://discord.gg/D78RsGfQjq

132 comments

order

crazygringo|3 years ago

Maybe I'm missing something but I don't understand the multiplayer aspect -- I'm in the interactive Chrome browser I can play with, but there's nobody else here. I'm not browsing together with anybody.

If it matters, the HN link redirects for me to:

https://threejs-example.hyperbeam.com/672b6071

and the ID at the end stays the same even in incognito.

Since this is on the front page and I've been waiting around for 5 minutes there must be other people using it. How is it supposed to be multiplayer?

EDIT: once I posted this comment somebody else joined, I see how it works now. Very cool. I guess it depends on winding up with a shared ID or something?

declan_g|3 years ago

Right now when you click the link we create a new "room" based on your IP. If you share the generated URL (like you did above) then people can join in and cobrowse with you

mgdlbp|3 years ago

It seems a bit of a community has formed here, with a couple of places for chat without the need of backoff algorithms:

https://pad.riseup.net/p/1_prWgNWMqs-Hu_bIi3I

https://app.kosmi.io/room/m4gsd4

“users, uh, find a way”

There's a couple ways of opening multiple windows, which enables title bar controls on every window. Minimizing and closing them softlocks to a black screen until the instance resets.

batch12|3 years ago

People seem to be trying really hard to get porn in the browser. There's a battle going on...

pookeh|3 years ago

Someone is already doing nmap online on the host

Moosdijk|3 years ago

The first thing another user did was go to 4chan. I think the concept is really cool but maybe it needs a little more thought.

jonas-w|3 years ago

It's so funny looking at this room and seeing people tryna exploit it. And talk to each other via the search bar.

tauwauwau|3 years ago

What sorcery is this? Youtube videos are opening without any delay (within half a second) and there's no frame lag even with 1080 quality setting. How does this work?

MuffinFlavored|3 years ago

I'm surprised Widevine DRM allows this but I guess you can't really detect "I'm in a VM and being streamed visually by the host".

You can't even take a screenshot of YouTube TV if you don't run it in a VM. Goes to the clipboard as all black.

How does HyperBeam not get abused (and consequentially shut down) for people wanting to share a stream of a pay-per-view / YouTube TV style subscription with their friends?

philipscott|3 years ago

After you visit the link, copy-paste it into a new window. The content will be synchronized ;)

brabel|3 years ago

It does open without delay, but for me, the sound and video are quite laggy.

I shared my link with my wife but she saw something entirely different... wasn't she supposed to be the same thing as me with the same "room" link?

bhedgeoser|3 years ago

You just have a really good internet connection. Lags a lot on my mobile internet.

warpech|3 years ago

I can browse the Web like I'm in a data center. Speedtest.net shows 776 Mb downloads, 928 Mb uploads. That's way better than the Internet access where I live.

owow123|3 years ago

I write a open source desktop environment, supported by spice-html5, and I'm impressed (its survived the NH "hug of death") - this is true sourcey.

Amazing job OP :)

ambyjkl|3 years ago

Thanks! I'm intrigued by what you built (long-time Linux user here), can you share a link?

ceasesurthinko|3 years ago

This is the most random funnest thing i've done in days. I tried to inception it by pasting the hyperbeam link into the VC, didn't work though heh.

coldblues|3 years ago

Rabb.it (https://en.wikipedia.org/wiki/Rabb.it) did this some years ago. It was an amazing service, but it unfortunately shut down. This is very close to what it was back then.

MuffinFlavored|3 years ago

Looking over the API docs now

https://docs.hyperbeam.com/start-chromium-session

First thing that comes to my mind is... this is kind of like Puppeteer. Even if that is what they are using in the background... would they ever expose it so existing Puppeteer apps could plug and play (like https://www.browserless.io/)?

philipscott|3 years ago

We're not using puppeteer in the background, but people have asked for puppeteer support. Do you use browserless.io? We think they do a great job and don't see a point competing with them.

Would appreciate your thoughts.

stevebmark|3 years ago

Three.js does this out of the box. https://adndevblog.typepad.com/cloud_and_mobile/2015/07/embe... What am I missing?

philipscott|3 years ago

That approach relies on an iframe to load 3rd party sites. Sadly, this won't work for a lot of websites like news.ycombinator.com.

Furthermore, an iframe cannot be synchronized across participants. If you and I load YouTube in an iframe, it's not guaranteed that our videos are sync'd.

With Hyperbeam, you can embed any website and the content is sync'd. Think of it like sitting beside somebody with a computer.

metadat|3 years ago

This is simply amazing. I wish it was open source, but totally understand why that is not realistic or possible.

It's crazy to think this is built off forked chromium yet there is no really good self-hosted cross-platform Remote Desktop app.

Keep up the good work!

philipscott|3 years ago

Several people are curious about the magic behind Hyperbeam. If you ever want to chat here's all our emails + Discord tags:

founders@hyperbeam.com

philip@hyperbeam.com (CEO) - Philip#9001

amby@hyperbeam.com (CTO) - Ambyjkl#4365

declan@hyperbeam.com (CPO) - Dek#7777

chaosprint|3 years ago

wow, this is really cool. star it on gh right away.

I manage to vist https://glicol.org and get some live coding music there

but the audio seems to be compressed a lot and the cpu seems to be overloaded

I cannot open console there so I cannot tell

with that being said, I think it is really promising and look forward to the update

philipscott|3 years ago

Spoke to Amby, he said it might be because we throw away frequencies above 10 kHz. We'll try to fix the bug today, thanks again for catching this.

philipscott|3 years ago

Thanks for pointing that out, we'll dig deeper.

Also thanks for showing me glicol, I love dabbling with audio visualizers and often play around with the web audio API. Really cool that somebody made a DSL, I starred the project :)

coconut_t1|3 years ago

Wow, super cool stuff. Would love to know more about the server-side architecture and how you handle security in your VMs. Also, loved the interactive sandbox demo.

philipscott|3 years ago

Thanks! Is there anything specific you want to learn more about? At a high level we run a fork of Chromium in the cloud, capture the desktop using gstreamer and stream it back to everyone using Mediasoup.

The folks at SideGuide made the interactive demo for us — we love it too.

ambyjkl|3 years ago

Hi HN! I'm the CTO of Hyperbeam, happy to answer all the technical questions :)

aneesv|3 years ago

You mentioned on your website that you have an android emulator, but I couldn't find more details. Do you have a demo URL for the android emulator? I'd love to check it out!

philipscott|3 years ago

We're still building it out. In the meantime, there are alternatives like https://anbox-cloud.io/ which you can try.

Is there any use-case you have in mind? We're struggling to find people that want android emulators.

mertysn|3 years ago

Too many agents (i.e. humans, bots) are trying to load NSFW gifs and even if you want to prevent them from doing so, the shortcuts are on their side to revisit past links. Good luck with content moderation. Even if you implemented a way to vote bad actors out (e.g. you can kick players from game lobbies that don't follow the rules via having a server-wide vote), I believe it would be out-botted.

kaetemi|3 years ago

Wow. That remote view runs surprisingly smooth on my cheap phone. Nice work.

WaffleIronMaker|3 years ago

This is very impressive technology, but I'm not sure what I'd use it for, to be honest. Does this technology have support for VR? Because I could see how this could be the future of doing computationally intensive tasks on under powered devices.

declan_g|3 years ago

Thanks! We began building the tech for a watch party site (watch.hyperbeam.com) and were similarly skeptical of other viable applications. However, it turns out there are a ton of really cool use cases—here are some companies using our API right now:

Remote tutoring: https://www.teachwithkoala.com

VR offices & conferences: https://framevr.io

Watch parties: https://kosmi.io

Online coding lessons: https://www.strivemath.com

VS Code embeds: https://github.com/mintlify/connector

As for improving VR support, we're in the process of building a Unity SDK. Running computationally-expensive tasks in VR sounds really interesting in addition to the social use-case!

graderjs|3 years ago

There's source code on GitHub for a simple version of this tech (without multiplayer or smooth and fast streaming): https://GitHub.com/crisdosyago/BrowserBox

And a closed source version that has multiplayer, audio and much faster streaming (than the GitHub version) that uses webrtc.

I also have a few projects to bring even higher quality streaming, including an xvfb headful version using an extension to enable getDisplayMedia APIs to share the screen.

It's a different approach to Hyperbeam. I love that there are more and more new and young products in this space!

vz8|3 years ago

This is remarkable stuff.

Suggestion: A hotkey (in or out of the virtual computer) that allows you to reset to the default orientation without having to reload the page. On a laptop with only a touchpad, I'm fighting with the controls a bit.

philipscott|3 years ago

Do you have a specific hotkey in mind? Curious if there's a hotkey we could choose which is intuitive, so we don't need to add more text in the 3D space.

throwaway888abc|3 years ago

Tried Youtube and was surprisingly good.

Impressed by Hyperbeam tech behind. Bookmarked for later.

declan_g|3 years ago

Thanks, we've been working hard on it!

can16358p|3 years ago

I have no idea how to use (iPhone, iOS 15.6.1). There is a pink background and a black box saying outside virtual PC, and a few keyboard/mouse shortcuts (which doesn't apply as I'm on mobile)?

me_bx|3 years ago

Same here on linux.

I'm guessing that other visitors get some content instead of the black box...

philipscott|3 years ago

Hi HN! Happy to answer any questions you have about the demo and the tech.

peteforde|3 years ago

1. This is genuinely impressive. It's a solid example of the reason I visit HN. Kudos to your team. 2. I'm genuinely curious how you anticipate folks using this. The watch-party use case is interesting but it's a crowded space and people are not likely lining up to pay. It seems like hilarious overkill for content embedding. I'm wondering what the killer app is? In the most optimistic way possible.

It's almost like it's so far ahead, I worry that people won't know what to do with it. It's like the "what would you do with infinite bandwidth" problem... even smart people tap out creatively depressingly quickly.

tyranitar10|3 years ago

This is cool. Commenting to come back to

jimhi|3 years ago

This is awesome!

Is there a way to get this to work on mobile? Tried on safari and chrome

declan_g|3 years ago

Thanks! Yes, it works on mobile too.

When using the API you can set a specific height and width to resize the virtual computer. Additionally, we track touch events and you can drag-and-drop on devices like iPads.

Happy to chat more about it if you'd like! Feel free to join our Discord: https://discord.gg/D78RsGfQjq

zirror|3 years ago

How do you handle user credentials or general inputs? If I type in my Netflix credentials, don't you and/or my watch party friends get access to them in some way?

declan_g|3 years ago

Great question.

We’re building a “privacy mode” feature to address this exact problem that allows the host to black out the screen when entering sensitive information like credentials.

As for Hyperbeam getting access to credentials—we don’t store any input from users in the virtual computer. The only things we track are the time a particular IP is connected to the VM and the domains that are visited (this is anonymized).

sgt|3 years ago

Beginning of the HN Metaverse

philipscott|3 years ago

If HN had a metaverse, what would people want it to be like?

XCSme|3 years ago

This sounds/looks very interesting, but I am not sure what the use-case is, from what I can tell the quality is pretty low in the demo (and can't full-screen), isn't something like TeamViewer a lot more performant (being p2p)?

declan_g|3 years ago

Hi, thanks for the comment. Just to clarify—this is a demo of the virtual computer tech in 200 lines of code. It's not actually meant to be a functional product in and of itself.

With that said, the virtual computer technology has some big differences when compared to something like TeamViewer.

- First off, Hyperbeam allows many participants to connect to the same virtual computer at once. All audio/video is synchronized, and any participant can control it (although our API has granular control permissions).

- Hyperbeam requires no downloads

- We manage the infrastructure ourselves, meaning you can embed Hyperbeam virtual computers in your app and scale seamlessly

- You can embed Hyperbeam virtual computers in 3D software and VR

- You can programmatically control the web browser

Here are some companies that are currently using our tech:

Remote tutoring: https://www.teachwithkoala.com

VR offices & conferences: https://framevr.io

Watch parties: https://kosmi.io

Online coding lessons: https://www.strivemath.com

Zachsa999|3 years ago

Wild! Browsing the code, I love that it's basically one main.js file.

ambyjkl|3 years ago

Thanks, we vehemently oppose bloat in our JS files ;)

ARRgonaute|3 years ago

This is pretty damn cool...

mupuff1234|3 years ago

It's cool and all, but is there an actual use case for the multiplayer aspect?

Feels slightly like the infamous "hacking" scene when two people are using the same keyboard.

laserlight|3 years ago

After trying to understand for 10 minutes what's supposed to happen, I tried it with Chrome. Doesn't this work with Safari on a Mac?

parksy|3 years ago

The underlying work you guys have done is great as a proof of concept, and after playing with it for a short while there are some obvious flaws and improvements which basically just come down to user experience.

As it stands, everyone's inputs clash.

The main issue is there's a single mouse pointer and keyboard input that all users control. It's quite chaotic as people scroll, click, select, etc. Provide some mechanism to nominate control authority or vote on interaction and it might be usable.

MuffinFlavored|3 years ago

Might want to make your "Sign in with GitHub" not be "allow phillipscott" username/account or whatever.

philipscott|3 years ago

Thank you so much for pointing that out, I'll fix that ASAP.

Also, this is a bit of a tangent but my first name has one "L". My mother named me after the Philippines and I'm of Scottish descent on my father's side.

fire|3 years ago

This is slick, nice job!

tradester|3 years ago

this is really cool

declan_g|3 years ago

Thanks! We think so too :)

chaiv|3 years ago

Cool stuff guys!!!