This isn't websockets! fun multi-window demo

Рет қаралды 142,297

Wes Bos

7 ай бұрын

pretty fun. Code here: github.com/wesbos/hot-tips/tr...

Пікірлер: 123

@beeenthere 7 ай бұрын

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 7 ай бұрын

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

@kevinkelche8478 7 ай бұрын

This will boil your cpu.

@LaughingOrange 7 ай бұрын

@@kevinkelche8478 Make it 20 pieces or whatever.

@notyarrs 7 ай бұрын

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 7 ай бұрын

2023 Web devs discovering threads and forks

@codingvio7383 6 ай бұрын

Bro knows how to center a div

@user-vx6zk5jj4e 6 ай бұрын

Nice video, concise and informative.

@nilsgoeke7494 7 ай бұрын

This is really cool, ty for the explanation

@Ltpyren 7 ай бұрын

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

@redcrafterlppa303 7 ай бұрын

Error Lens vscode addon

@Ltpyren 7 ай бұрын

@@redcrafterlppa303thank you!

@VaibhavShewale 6 ай бұрын

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

@shanujha7245 7 ай бұрын

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 7 ай бұрын

kzfaq.info/get/bejne/h7p9fLp1mbfTn3k.htmlsi=IgimnxFXnJCiMO9h

@hexakon 6 ай бұрын

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

@oliverz321 6 ай бұрын

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

@mootytootyfrooty 7 ай бұрын

This lib has been recommended for a week straight on github

@fotnite_ 4 ай бұрын

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

@-0-__-0- 6 ай бұрын

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

@MrTurbo_ 6 ай бұрын

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

@DragoNate 7 ай бұрын

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

@mirjalol_shamsiddinov 7 ай бұрын

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

@sidchelios 7 ай бұрын

I love it!

@123tobiiboii123 6 ай бұрын

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?

@hidrogenario 6 ай бұрын

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

@quoccuong1733 7 ай бұрын

thats insanely cool

@jeremylondon47 7 ай бұрын

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

@danielradosa 7 ай бұрын

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 7 ай бұрын

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

@Lukas-qy2on 7 ай бұрын

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 7 ай бұрын

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

@Lukas-qy2on 6 ай бұрын

@@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 6 ай бұрын

This project is shared above @@Sandeep-zu7gd

@tinmank 6 ай бұрын

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

@dailyfunnytv358 7 ай бұрын

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

@Skorupa9 7 ай бұрын

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

@rc0d3 6 ай бұрын

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

@PlayerMathinson 4 ай бұрын

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

@dailyfunnytv358 4 ай бұрын

@@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 3 ай бұрын

@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.

@justpatrick_ 7 ай бұрын

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

@arber10 7 ай бұрын

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

@The-Untitled-One 7 ай бұрын

Who is the twitter user.

@Ebiko 6 ай бұрын

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

@marcusrehn6915 7 ай бұрын

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 7 ай бұрын

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

@marcusrehn6915 7 ай бұрын

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

@f_eg 6 ай бұрын

very cool! reminds me of windowkill ludum dare game

@seriouslyWeird 7 ай бұрын

that's so awesome

@GegoXaren 6 ай бұрын

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.

@heegj 5 ай бұрын

Now try this in wayland ...

@ahmedjaber8595 7 ай бұрын

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

@WesBos 7 ай бұрын

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

@ukeshrestha 7 ай бұрын

What is localhost subdomains?

@d5hcode 5 ай бұрын

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

@Stoney_Eagle 7 ай бұрын

This is fckn cool!!! 😮

@anarchoyeasty3908 6 ай бұрын

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.

@orestes_io 7 ай бұрын

Super fun

@kiocode 6 ай бұрын

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

@Ed-gd5ec 7 ай бұрын

Are you making full tutorial?😂 Love this btw ❤

@aws-china 7 ай бұрын

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

@thekwoka4707 6 ай бұрын

Why local storage when SharedWorker would do?

@K.Huynh. 6 ай бұрын

So cool

@Szpieg2000 6 ай бұрын

CONNECT THE MAN TOGHETER

@dinoscheidt 7 ай бұрын

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)?

@undergraduate6050 7 ай бұрын

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

@WesBos 7 ай бұрын

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

@undergraduate6050 7 ай бұрын

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

@OhItIsTom 7 ай бұрын

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 7 ай бұрын

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

@RutsuKun 6 ай бұрын

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

@tomer4566 6 ай бұрын

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

@bernikr 6 ай бұрын

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 6 ай бұрын

@@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....

@g43s 7 ай бұрын

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

@WesBos 7 ай бұрын

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

@JeetPaul 6 ай бұрын

Umm, I think broadcastchannels are more suitable

@nikbivation 6 ай бұрын

wow!

@aminnairidev 7 ай бұрын

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

@thehibbi 7 ай бұрын

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

@joserobles3361 4 ай бұрын

Anyone knows what VS Code theme he uses?

@Beateau 6 ай бұрын

I wondered how windowkill did it!

@rogo7330 7 ай бұрын

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 6 ай бұрын

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

@rc0d3 6 ай бұрын

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_ 6 ай бұрын

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 6 ай бұрын

@@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_ 6 ай бұрын

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

@anasouardini 7 ай бұрын

"Wes Bos", more like web bos.

@setkyarwalar 7 ай бұрын

🎉

@gasparliboreiro4572 6 ай бұрын

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 6 ай бұрын

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 6 ай бұрын

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

@ste-fa-no 6 ай бұрын

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. 👁️

@budgetarms 7 ай бұрын

Cool

@MATIK000 7 ай бұрын

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

@odd55552 6 ай бұрын

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 :'(

@MarcelRobitaille 5 ай бұрын

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

@t3ntube357 7 ай бұрын

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

@henriquekirchheck 7 ай бұрын

It's really fun

@WesBos 7 ай бұрын

Lulz and smiles

@rogo7330 7 ай бұрын

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?