search

ianramzy / decentralized-video-chat

🚀 Zipcall- Acquired @ 250k users 🚀 Peer to peer browser video calling platform with unmatched video quality and latency.
https://zipcall.io
3.3k stars 502 forks source link

Whiteboard/Drawing? #40

Open EddiesTech opened 4 years ago

EddiesTech commented 4 years ago

Hi there, There is this great feature on Zoom where you can set up a whiteboard where members of the meeting/call can draw on it. This is great for learning or just fun (e.g. with games). Would it be possible to add this to Zipcall? It would be great if it could!

Chaphasilor commented 4 years ago

That sounds really interesting but I guess it will require some time to implement that.

Currently we don't have that much time, but if you feel like implementing this, feel free to open a PR!

Or you could try looking for ready-made JavaScript Canvas libraries for that?

EddiesTech commented 4 years ago

I found this: https://github.com/lovasoa/whitebophir It's under GPL so I assume if I can find a way to implement it, it would work?

Chaphasilor commented 4 years ago

It uses socket.io as well, which might be useful. I'm not sure however if this will work nicely with the zipcall server.

Also, this doesn't seem to be decentralized, so implementing this would prevent zipcall from being fully dezentralized as well.

Maybe, depending on the license, we can take the whiteboard code and make the synchronization happen ourselves, peer-to-peer?
We could use WebRTC data streams for that, like the ones we use for live captions and chat and such...

ianramzy commented 4 years ago

Yeah we could send data over a webRTC stream, I also don't love the UI of the repo you linked, I am sure we can find something better

hialvaro commented 4 years ago

Maybe this one can help. It's using WebRTC: https://github.com/feross/whiteboard

Chaphasilor commented 4 years ago

it's not being maintained any more :/

holtwick commented 4 years ago

Maybe you find this example useful: https://github.com/holtwick/peer2school/blob/master/src/components/app-whiteboard.vue

It uses https://yjs.dev/ which is an amazing real time framework which will turn out being useful when tying to implement a whiteboard.

Also take a look at https://bigbluebutton.org/developers/ as an example for a whteboard that is quite mature.

And probably https://miro.com/ as the high-end ;)

Chaphasilor commented 4 years ago

Maybe you find this example useful: https://github.com/holtwick/peer2school/blob/master/src/components/app-whiteboard.vue

It uses https://yjs.dev/ which is an amazing real time framework which will turn out being useful when tying to implement a whiteboard.

Also take a look at https://bigbluebutton.org/developers/ as an example for a whteboard that is quite mature.

And probably https://miro.com/ as the high-end ;)

I think the first two are the most interesting, although I think yjs.dev won't integrate well with Zipcall, because there would be two parallel connection, and I don't know how easy it would be to send yjs.dev's traffic over Zipcall's WebRTC connection. It might be possible though.

The Vue component you've linked also looks promising, it also seems to be relatively dependency-free, so we might be able to reverse-engineer it to use vanilla JS or jQuery. Synching the canvas shouldn't be too problematic either, we could write any changes the user makes into an outgoing buffer that is emptied and transmitted every couple milliseconds. I might play around with this a bit later...