8 ms·
Show HN: I built a fun video meeting app with 2D physics and proximity chat
Hi HN!
https://flat.social https://flat.social is a web video meeting app for organising fun online meetings & social events. Each participant can move around and talk with others in their proximity.
Here is a quick demo if you wanna see it in action: https://youtu.be/Y2yH3twjrx4 https://youtu.be/Y2yH3twjrx4
I’ve been on it solo for around a year right now. Tech used is Next.js, Typescript, PIXI.js on the front-end and Node, Mediasoup, Socket.io and Matter.js (physics engine) on the backend.
Feel free to jump in into the demo room (https://flat.social/f/Flat.Social-Demo https://flat.social/f/Flat.Social-Demo) to say hi, I’ll be hanging out there throughout today.
Would love to hear your thoughts on it!
- seabea 4y agoI'm surprised so many people are allowed to use video conferencing platforms that aren't Zoom/Slack/Teams.
- brk 4y agoI'm surprised so many people are allowed to use Zoom, it's had a ton of security issues.
- mcelearr 4y agoLove the way that you interact with the space. Feels very intuitive. Nice job!
- herschel113 4y agoAlso see https://workadventu.re/ https://workadventu.re/ . Already seen it working well for 1000+ visitors congress meeting hub. Plus it has some well matured Web 1.0 capabilities: Everyone can host space by a simple file server and link with other existing spaces. As the rooms / spaces do not need to be hosted on the same server the application is served by.
- apineda 4y agoWonder if you could make using a camera optional?
- pawelwentpawel 4y agoIt can be optional! When you're joining a flat, select "I have no camera" in the audio video settings.
- KMag070 4y agoThis looks fun. Well done on making super responsive and interactive. I can already see challenging this with my team XD
- dmje 4y agoI started off thinking ...man, ANOTHER damn video calling app / virtual workspace / etc... ...and then I started scrolling through some of the fun stuff, like using avatars in games..and as I scrolled I thought more and more "this is fun...I could use this". Haven't actually dug in and tried it, and don't know if it'll stick - but getting over the hump of my cynicism is definitely an achievement worth celebrating - well done :-)
- l7l 4y agoLooks like a wonder.me copycat
- deleted 4y ago[deleted]
- WoodenChair 4y agoHow is it different from InSpace? https://inspace.chat/ https://inspace.chat/ What’s the future revenue model? How expensive are the servers?
- pawelwentpawel 4y agoIt seems from the website that InSpace is a proximity based chat app too so this aspect might be similar. I don't really see a demo there so hard for me to assess the exact differences! I'm experimenting with the revenue model right now, would be happy to hear any input on the current pricing I set out. As per the servers cost - it's directly correlated to the usage. It runs audio, video and physics on the backend so high CPU instances are needed to run it smoothly. It's quite optimised for now though and a couple droplets are enough.
- jhugo 4y agoAny reason for doing audio and video work on the backend rather than adopting the (much easier to scale) SFU model and just forwarding packets? Similarly for the physics, seems like doing that work frontend would scale much better.
- jupp0r 4y agoEven if you use stream forwarding only, network will be a major O(n) cost factor when using cloud providers, at least for video. There is also some super interesting middle ground between full video forwarding and selective reencoding by using SVC for cheap video resizing on the backend.
- jhugo 4y agoSFUs aren't forwarding everything. Using either discrete simulcast layers or SVC they're forwarding one size out of several (usually 3) to each other participant. Bandwidth will be a high cost no matter what (and anyone planning to scale up real-time video better be prepared to move off the cloud at some point) but needing compute resources for encode/decode on the backend makes large scale realtime video infeasible for any reasonable cost. The only successful large scale deployments push most compute work to the clients. An extra decode/encode step also adds latency and the total latency budget before UX is impacted is small.
- firatcan 4y agoHey there, Great work! I loved how responsive it's. There is fun to play with animations. The flying emojis, and animations!!! Love the backgrounds but needs some improvements as well :)
- korm 4y agoVery creative. Is this HRTF-like spatial audio or are you just modulating volume based on proximity/walls?
- pawelwentpawel 4y agoHey, thank you! It's the latter - the audio is based on the distance and walls.
- krm01 4y agoLooks fantastic. I'm tinkering with a better way to communicate with text (Slack just doesn't work), but this seems to be really great for video meetings.
- puranjay 4y agoThis looks amazing! Congrats The games look particularly interesting - I've been in meetings where everyone uses awkward verbal games to break the ice, but this would be so much more fun
- CodeBeater 4y agoThis seems to be a take on Gather.town with more realistic graphics. My team has been using Gather for almost a year now, so I'll give it a shot.
- fooblat 4y agoHow does your team use it and how would you rate it? My CEO wanted to introduce Gather with the idea that everyone would be in it working all day. He wanted to be able to "stroll by" whenever to see what people are up to. The team unanimous voted against this so we didn't get it.
- CodeBeater 4y agoAll in all it was all a very incidental experience. Our CTO came out of the blue showing this thing, he spent an afternoon designing a floor flor the developers that mimics the IRL office. At the beginning it all felt gimmicky and felt like the novelty factor would wear off quite quickly, but there was this one specific instance that made it "click" in everyone's head, and it happened right at the end of a regular meeting. We finished the discussion and most attendants quickly dispersed, some people were still at the table trying to fix a bug, and we needed some input from this one specific person to do so. So someone just strolled to where that person was, and asked him to come to the table. It all felt very natural, and the way we were able to quickly get the information we needed without having to awkwardly drag a bunch of people into a Google Meet was just magical. Today we use it everyday, full time, it all feels very natural and we don't really think about it, because it works so well. Recently the CTO also opened a "floor" (I.E another Gather instance entirely) for the sales and marketing team (whose headcount in the hundreds) and linked both "floors" using their "portal" feature. Awesome!
- ge96 4y agoNot who you asked but as a data point. I worked at an org ($30B) and it was used for happy hours (as in drinking if you wanted) in the couple of related teams. Since we've been working from home since 2020. It worked alright, some groups would form but it's like real life, if you're more social more 'gather' around you.
- brumm 4y agoThis really surprised me! It's super polished already and works great! Gonna try to do our company's virtual happy hour here. Great job!
- sophrocyne 4y agoReminded me of https://www.around.co/ https://www.around.co/ , but they’ve clearly grown beyond the simple “fun video calls” value prop since I last saw them and raised venture. Fun idea!
- fredguth 4y agoI was going to write the same. Around.co seems to have been able to monetize well and secure funding. Well done OP, I wish you lots of success. I know from experience that as a solo dev this flat.social is an amazing outcome.
- pawelwentpawel 4y agoThank you fredguth!
- hkon 4y agoWow, looks great.
- weh 4y agoAh, Memories of hours using the Palace Chat come up again. Hours of editing Avatars and hanging out with old friends. https://en.wikipedia.org/wiki/The_Palace_(computer_program) https://en.wikipedia.org/wiki/The_Palace_(computer_program)
- severak_cz 4y agoStrange. I wanted to show app formerly called Caala to which I contributed but it disappeared from github. I wonder if this is because it became this. Also - which JS library do you use to voice chat and video calls? I wanted to implement voice chat myself. EDIT: it was just archived - https://github.com/capnmidnight/Calla https://github.com/capnmidnight/Calla
- pawelwentpawel 4y agoAh yes, flat.social has nothing to do with Calla but thanks for mentioning it, I'll have a look! As per the JS library for audio/video - I have used Mediasoup.
- moron4hire 4y agoAs the creator of Calla, I would say that there is not much to be learned from Calla specifically. The WebRTC portion was all implemented through Jitsi Meet, and I eventually grew to regret that direction. My current work uses just a CoTURN instance with a fully custom backend for managing multiplayer. The user interface was only ever intended to be a demo, I didn't have any interest in running it as a FOSS project in its own right, and it while I would say it was certainly a competent implementation, it also wasn't anything ground-breaking in any way. That basically leaves just the core audio graph management as anything that was valuable in the project. That part still lives on in my project at work, but considering I basically gave up on trying to run FOSS projects after some deep introspection on my experiences with running FOSS projects, I don't put much effort into documenting my code anymore. But if you want to see the audio graph management stuff, the latest version is here: https://github.com/capnmidnight/Juniper/tree/master/src/Juniper.TypeScript/%40juniper-lib/audio https://github.com/capnmidnight/Juniper/tree/master/src/Juni.... The WebRTC system that I now use is largely this on the client (https://github.com/capnmidnight/Juniper/blob/master/src/Juniper.TypeScript/%40juniper-lib/webrtc/TeleconferenceManager.ts https://github.com/capnmidnight/Juniper/blob/master/src/Juni...) plus this on the server (https://github.com/capnmidnight/Juniper/tree/master/src/Juniper.Server/WebRTC https://github.com/capnmidnight/Juniper/tree/master/src/Juni..., which is a SignalR hub in an ASP.NET Core app, but should make the signaling flow clear). And then this code uses the client (https://github.com/capnmidnight/Juniper/blob/master/src/Juniper.TypeScript/%40juniper-lib/threejs/Tele.ts https://github.com/capnmidnight/Juniper/blob/master/src/Juni...)
- ab_testing 4y agoWow, very interesting. What tech stack did you use to build this. Also the video chat components, is that an open source plugin that was customized for your app or was that also coded from scratch. I am just surprised that a solo developer or a small team can build something so interesting and fun. I would'nt even know where to start.
- midenginedcoupe 4y agoOne thing these types of tools also need to consider is online safety. I've seen others implement things like personal boundaries, hiding from others, and avoiding being boxed in by others. Just to name a few. I couldn't see anythig on your website that addresses any of these sorts of concerns?
- generalizations 4y agoProbably best to outline a specific threat model. What is the danger, which the tools you mentioned would make safer?
- midenginedcoupe 4y agoI could outline one for me, that I'd look for, but I was asking more about what the authors of the tool had thought about and catered for. The dangers are all too real with online social spaces; douchebaggery, perving and harassment. The examples I gave are common mitigations (e.g. movement algos that prevent someone being boxed in to a corner can provide a way for somone to escape an uncomfortable interaction - without it, they can be stuck) already implemented by similar platforms. Look up any metaverse review and they're full of this shitty behaviour. If spaces don't think about this aspect, then those that are targetted will just not come back. If there's one thing builders of social platforms should have learned from the last decade it's that they can't ignore the downsides of how their tools are going to be used.
- dymk 4y agoJust close the tab… This looks like it was built for team social events. If you’re getting harassed and bullied on your team, you have bigger problems you need to take care of.
- midenginedcoupe 4y agoWhich could be fine, as long as the tool is only ever used for social events within existing teams with an out-of-band channel for dealing with harassment or bullying. But we all know that this won't be the case. So let's not pretend these problems can't exist, or can just be hand-waved away with "well you can just leave". That's not how real social interactions work, especially those with employee/employer externalities attached.
- smrtinsert 4y agoLooks like a very fun stack!
- rhythmofrest 4y agoSee also https://sprout.place https://sprout.place
- sgt 4y agoReally cool - just spoke to Pawel for a bit, then I teleported into space.
- pawelwentpawel 4y agoRemember you can always teleport back with the home button! :)
- sgt 4y agoI tried that, but the button didn't do anything. Maybe I should have just waited a few secs more.
- failTide 4y agoLove your UI - nice work. Edit - no way for me to delete my account though Just as a note - the reason I decided to stop using it was it was too hard for me to find anyone else on there, just kind of gave up and left.
- deleted 4y ago[deleted]
- mentos 4y agoHey amazing work. I attempted a 3D version of this in 2020 using playcanvas and Agora.io but ran into the realization that navigating a 3D world is not intuitive for non-gamers. Also, 2D is great because it lets you author new content 10x faster and be more performant than 3D. Really love how you implemented a physics engine to make it all that much more playful. Curious to know what your pipeline is to create the environments? I agree with some other comments on here about trying to offload more processing on the client but for now I think you have a viable product to first find your market and then you can work to optimize later. No idea if its technically possible but I wonder if you could create a slack plugin to make it as few clicks as possible for remote teams to spin one of these up? Ideally you could render it in the slack channel but that's probably not feasible (unless you're able to pitch Slack/Discord on it?). Great work, good luck!
- pawelwentpawel 4y agoFirstly - thank you! I recently introduced a "floor builder" which allows you to select different tiles that you would like to use in your flat. This might be something more serious with professional looking meeting rooms or more fun with a dinosaur and a swimming pool. Elements pipeline - I render most of the elements in blender. I also need to tell the physics engine where the walls are for the new elements for blocking audio, video and movement. As per offloading more work to the client - that's what I'm trying to avoid. I'd like to make flat.social as tech-inclusive as possible and make sure that it works on weaker devices. Processing audio, video and the game itself is already enough so when possible, I try to offload the work to the backend. Also, Slack integration is pretty much ready but still in testing :) While I do not think that it's possible to render the app itself within a Slack channel, there are couple shortcuts that might be useful for teams/communities who want to organise recurring events with Slack notifications.
- mentos 4y agoAwesome thank you for sharing sounds great! I think you have enough features so to me the challenge is finding how to make it feel like it already lives inside the applications people are already using for work (like Slack). Imagine a trailer that demonstrates how one command can launch this amazing adventure. Something like "Your next /happyhour awaits"
- gsempe 4y agoThe video / virtual env seems very well integrated. I have to admit the demo video made me smile
- aklarfeld 4y agoThis is absolutely awesome. As someone who has used Gather a bit, this blows it out of the water. Incredibly intuitive and fun way to move around and talk to your friends and coworkers. Once you realize that you don't need, nor want, the 8-bit paradigm to interact with folks, Flat.social clearly becomes the superior way to interact virtually.
- jrm4 4y agoThis seems a kazillion times smarter then literally every goofy metaverse thing I've seen lately. Well done.
- mattanimation 4y agolooks eerily similar to https://dotdot.social/ https://dotdot.social/