Handling images over a webrtc connection

Hi, I really appreciate the amazing work done by yjs developers.

I’ve been trying to develop a real-time collaborative markdown editor using Yjs, YWebrtc, and YCodemirror.

I got stuck on how to share the images uploaded by a user. As YDoc isn’t being synced with other users if I try to convert the image blob(of size > 150kb) to data URI and add it to a YMap instance. Is there a better way to share image blobs with clients in a room?

Thank you!

you can also try inserting an image of size ~ 1mb in yjs.dev quill editor and the collaborative session just blow ups. I think this is a known issue.

I also understand that Yjs is built for syncing primitive types(not images). But I would really like to hear some ideas on how to make it possible… or are there any plans to handle syncing images in a future version?

In Relm, we use an ExpressJS server in conjunction with y-websocket, so we create a simple file upload service and then embed URLs in the Y.Doc.

Here’s the upload: https://github.com/relm-us/relm-v4/blob/main/server/server_http.js#L118
and download: https://github.com/relm-us/relm-v4/blob/main/server/server_http.js#L97

We use dropzone for the actual drag/drop and upload on the client side: https://github.com/relm-us/relm-v4/blob/main/src/svelte/Upload.svelte#L21

For WebRTC, can you use a datachannel to do something similar?

1 Like