This isn't websockets! fun multi-window demo

[@beeenthere]

Someone should make a game where it takes the users, WebCam video and splits it into 1000 windows so you could reassemble it like a puzzle

[@WesBos]

I actually did that probably 8 years ago at a conference...

[@kevinkelche8478]

This will boil your cpu.

[@LaughingOrange]

​@@kevinkelche8478 Make it 20 pieces or whatever.

[@notyarrs]

You could solve it easily by putting a small green paper square in the spot that you want to find the puzzle piece and looking at which window is green

[@phyl568]

2023 Web devs discovering threads and forks

[@codingvio7383]

Bro knows how to center a div

[@shanujha7245]

This is neat, we could make a game like you have to use a browser window as a torch to find things in the night, you can create as many windows you want, and that game would play, for you to take advantage of this system

[@notnanook]

kzbin.info/www/bejne/h4Wweop6abaipacsi=IgimnxFXnJCiMO9h

[@hexakon]

Not quite the same thing, but Windowkill is a game based on movable windows

[@danielradosa]

This with three.js would be amazing. Id like to see a full detailed tutorial even if it will be about connecting 2 dots on 2 windows.

[@Sandeep-zu7gd]

Someone actually did something like that on twitter. No tutorial but he did share the github repo.

[@Lukas-qy2on]

tbf this wouldn't require a server, or unique code for any of the windows. for the webcam bit you just send the entire stream to every window, and then in javascript crop the stream

[@luioskattusch3497]

@@Lukas-qy2on Code it down quickly if its so easy :P

[@Lukas-qy2on]

@@luioskattusch3497 I literally did after watching the video lmao, but i think my comment gets removed if i post a link to the pastebin. the code is vcreT3cW though

[@mtfreytag]

This project is shared above @@Sandeep-zu7gd

[@oliverz321]

as far as I can tell, the windows only need to communicate because we want the lines drawn between them right? If it was just the video then they could each be individual. I say this because each window knows it's location, width and height so you could probably also do this same but include a exe window as well plus a command prompt representation of that section of the window. Very interesting

[@MrTurbo_]

I would have use a broadcast channel, it's way more suitable for this

[@dailyfunnytv358]

watching code like this helps me realize I actually write pretty decent code

[@Skorupa9]

It is actualy pretty decend code, but earlier noone has used LocalStorage in that way :)

[@rc0d3]

I pay attention to code and... I can't disagree with you

[@PlayerMathinson]

Could you elaborate on that? Why is his code bad?

[@dailyfunnytv358]

@@PlayerMathinson Just for starters, take a look at all the dismissed warnings/errors he is simply ignoring. Excessive use of optional chaining operator (?) which could easily be dealt with through a single assignment or type narrowing. I don't feel like working for free right now though so I'll just leave it there.

[@qic]

@unnytv358 It's just a quick little demo of a thing that he thought was fun. There's no point in perfecting the code for something that you want to try out, look at for 3 minutes and then never look at again.

[@GegoXaren]

That would not work on Wayland as wayland clients do not know their position on the screen. That is something only the compositor (or the surface one level up) knows.

[@VaibhavShewale]

nice, i was confused at start when it was circulating one day randomly!

[@mootytootyfrooty]

This lib has been recommended for a week straight on github

[@tinmank]

reminds me of early 2000’s that you would shake browser windows, make the clock follow the cursor :D

[@Ebiko]

interesting demo, i wouldve used shared worker instead of local storage though. the local storage solutions with timers looks kinda sluggish. - well technically shared worker are almost websockets, but locally in your browser

[@DragoNate]

now the fun part would be the ability to lock a position of the screen to a particular window so you could rearrange them and mess up your face :D

[@fotnite_]

RIP to all the Wayland users who can't have apps do something like this

[@thekwoka4707]

Why local storage when SharedWorker would do?

[@JeetPaul]

Umm, I think broadcastchannels are more suitable

[@jeremylondon47]

This + broadcast api? Seems like state management across multiple windows might get tricky

[@budgetpact]

This is fun! Unrelated question, what plugin are you using that shows the errors to the right of the lines? That looks nifty!

[@redcrafterlppa303]

Error Lens vscode addon

[@budgetpact]

​@@redcrafterlppa303thank you!

[@kiocode]

Full screen translating the x and y by the screenx and screeny

[@-0-__-0-]

Eyyy I've seen an orb version of this. Really cool stuff.

[@aminnairidev]

Wouldn't using a Broadcast Channel be faster than using a local storage?

[@thehibbi]

I didn't know about that feature, thanks for sharing!

[@heegj]

Now try this in wayland ...

[@justpatrick_]

Just came from twitter wondering how they are doing it 😅 Thanks Wes

[@arber10]

Can you share a link? Would like to see other examples.

[@The-Untitled-One]

Who is the twitter user.

[@marcusrehn6915]

Do the windows need to communicate at all? Wouldn't if be possible to just have the tabs display the camera with the offset of where they are? Is the communication just for the svg?

[@WesBos]

yep - the communication is just for the SVG because it needs to know where to draw the next line

[@marcusrehn6915]

@@WesBos Aha, I see. That makes sense. Super cool project! Thanks for letting me know!

[@hidrogenario]

Nice content! What is the nome of that font you're using on the IDE? I loved it

[@nilsgoeke7494]

This is really cool, ty for the explanation

[@rogo7330]

The concerning thing about this demo is that some random javascript from internet can know where window is located, how big it is, etc. and you can't limit it like you do with sound and webcam.

[@crescentx3]

I believe window size info has been used for fingerprinting for years, along with tons of other browser info

[@rc0d3]

The only thing that I can imagine is "woow this user has a big screen, let's scam him" Kkkk or something to say if tab is the main at screen, if not, doesn't do some function(like to earn something)

[@airo.pi_]

that's why, on the "dark net", it is recommended to not use your browser in fullscreen, because it can be used to identify you. It is also largely used by big companies to identify you and track you ofc :)

[@rc0d3]

@@airo.pi_ not. It's because javascript can run malicious code. Can execute things, steal cookies, and if have vulnerability can get smth from ur computer. Can automatic download smth etc.

[@airo.pi_]

@@rc0d3 what does this have to do with the screen size ?

[@joserobles3361]

Anyone knows what VS Code theme he uses?

[@НиколайЗаднепровский]

Nice video, concise and informative.

[@Malaphor2501]

I wondered how windowkill did it!

[@anarchoyeasty3908]

That's great. 5 years ago I prototyped a solution for a business application that would use multiple windows and communicate over local storage. The proof of concept worked but the project was scrapped before we got to begin on it. Nice to see my ideas would have worked and it's now a thing.

[@123tobiiboii123]

could you simulate a picture in picture effect where the browser becomes the window and the person you're calling with can control where their PIP is on your screen?

[@f_eg]

very cool! reminds me of windowkill ludum dare game

[@mirjalol_shamsiddinov]

Wesbos did u make it becaure u were inspired by cant remember name, from twitter?

[@ste-fa-no]

The demo is cool, but I don't know if I want websites to know how I arrange my windows on the screen. It might have privacy issues. 👁️

[@ahmedjaber8595]

Thanks for the tricks what are u using for localhost subdomains?

[@WesBos]

Caddy Server. Its really nice because you get proper secure origin locally, which is important when doing things like accessing the webcam

[@ukeshrestha]

What is localhost subdomains?

[@d5hcode]

@@ukeshrestha In the video you can see the page is "tips.localhost"

[@quoccuong1733]

thats insanely cool

[@MATIK000]

most of them are just greenscreen lol, green colored windows and then just video recording added on it in ae :D

[@Szpieg2000]

CONNECT THE MAN TOGHETER

[@undergraduate6050]

Wow, some good video on this please. What's the event listener when browsers are moved?

[@WesBos]

There isn't one :) just a loop or a requestAnimationFrame setting + getting values to localStorage

[@undergraduate6050]

@@WesBos Ohh I got it, set interval thing written function go.

[@OhItIsTom]

cant you take the webcam instance, stretch it out across the entire screen via document info, and cookie cutter out the sections needed using each instances own width, height, and position? why would they need to communicate at all?

[@whaliin]

sure but that wasnt the point of the video i dont think

[@RutsuKun]

@OhItIsTom don't you see that he is further reshaping the lines?

[@tomer4566]

Only one browser window can access the webcam at any time?

[@bernikr]

The webcam works the way you described without communication between the windows. The windows only need to communicate in order to render the lines connecting them.

[@OhItIsTom]

@@bernikr i see that makes sense, the video had more emphasis on the camera trick than the line tying them together so i hadn't noticed....

[@gasparliboreiro4572]

if it was a desktop app you could move the windows and update in real time without delay, like it was just one big video revealed by the windows, code in compiled languages :)

[@gasparliboreiro4572]

not to say that you wouldn't need comunication between windows, because you can have 1 program with multiple windows, each one can be shown, updated and managed by the same program, you could have all the windows you want without any added complexity

[@nuvotion-live]

Good point. But I think you could reduce the latency using WebRTC

[@Ed-gd5ec]

Are you making full tutorial?😂 Love this btw ❤

[@防火长城]

this is the tutorial, there's literally link to the codebase

[@g43s]

Whats the color scheme/theme he's using? it looks nice

[@WesBos]

Cobalt2! I wrote a bit of info here → wesbos.com/uses

[@sidchelios]

I love it!

[@seriouslyWeird]

that's so awesome

[@orestes_io]

Super fun

[@sueltowuelto]

Sorry huge noob, how do you even launch this neat program, i just wanna fiddle with it, and it's not giving me results after downloading node.js :'(

[@Stoney_Eagle]

This is fckn cool!!! 😮

[@anasouardini]

"Wes Bos", more like web bos.

[@K.Huynh.]

So cool

[@dinoscheidt]

Does the api also give back multiple windows and their relative location to another (i.e. knowing that you are on the left monitor, vs right monitor etc)?

[@MarcelRobitaille]

It's a trick he just did html { background-color: green; }

[@nikbivation]

wow!

[@yomajo]

Usecase?

[@budgetarms]

Cool

[@t3ntube357]

This is cool, but what is the actual benefit that we get from it?

[@henriquekirchheck]

It's really fun

[@WesBos]

Lulz and smiles

[@rogo7330]

Spying for people by fingerprinting their browser window properties that you can not disable without blocking the whole JS on the page. Or I missing something and this feature actually needs to be ok'ey when user opens the page?

[@setkyarwalar]

🎉

[@BlendLogDev]

Look like Window kill the game

[@aadras]

I made my version but uploaded from another account kzbin.info/www/bejne/eYjUeqKmipaeq5o

[@iiskyvlogs]

Unoriginal.

[@NoiseLeGGa]

i. love. this. what the heck