search

miroslavpejic85 / mirotalk

🚀 WebRTC - P2P - Simple, Secure, Fast Real-Time Video Conferences Up to 8k and 60fps, compatible with all browsers and platforms.
https://p2p.mirotalk.com
GNU Affero General Public License v3.0
3.03k stars 558 forks source link

Feature request: Screen draw/annotation while screen sharing #128

Open HarisHashim opened 1 year ago

HarisHashim commented 1 year ago

This feature is similar to Slack screen draw feature. Where presenter (the one who share screen) and audience can draw on screen.

I am tired waiting for this feature on MS Team.

It is much needed for meeting between software developers and for the purpose of online learning.

Thanks!

miroslavpejic85 commented 1 year ago

Hello @HarisHashim,

That would be an interesting implementation to have. I don't think it's possible with the WebRTC APIs and being a PWA. However, Any suggestions/ideas/contributions to make it happen are very welcome. Thanks and have a good weekend.

Ange-Cesari commented 1 year ago

Hello @miroslavpejic85

Some insights regarding this issue, There is a repository named tldraw that did a library than can be used and integrated to achieve that

https://github.com/tldraw

(you must look at the repositories to see where is the library tho...)

Best, Ange

miroslavpejic85 commented 1 year ago

Dear @Ange-Cesari,

I appreciate your information about the tldraw repository and its library. While tldraw seems suitable for collaborative whiteboarding, I'd like to clarify that it might not support drawing on participants' screens. MiroTalk, for instance, employs fabricjs for collaborative whiteboard functionality.

Thank you for your input, and if you have any further insights or suggestions, please feel free to share.

Best regards, Miroslav

Ange-Cesari commented 1 year ago

Hey @miroslavpejic85 ,

I understand your point, i'm pretty comfident that it's possible to have this kinda of app integrated. In order to solve this problem, i think that having the opacity to 0 might solve your problem.

Best, Ange

miroslavpejic85 commented 1 year ago

Hi @Ange-Cesari,

In theory it can already be done by using the current collaborative whiteboard with a transparent background (opacity 0), but it would be a hack :)

wb

Ange-Cesari commented 1 year ago

Maybe I didn't understand the issue correctly, what behaviour is expected then ? Thanks

miroslavpejic85 commented 1 year ago

Perhaps @HarisHashim wanted to write on the native screen of the device, in my opinion using the current whiteboard with the transparent background would achieve more or less the same result. If so I might as well close this task :)

rossigee commented 1 year ago

Please don't close this task :pray: Maybe I can help clarify...

I am trying to remotely mentor a student via a screenshare. They share their screen and show me their problems. I often need them to click on a particular field or button, and as I try to tell them what I want them to click on I watch them moving their mouse around vaguely and I find myself saying 'up a bit', 'no down a bit' a lot and it becomes very frustrating and time-consuming for both parties. Because of this, sessions are often less productive than they could have been.

The solution, as per the title of this feature request, should allow us to circle, underline or generally annotate and draw on areas of the shared screen - temporarily.

The Slack implementation works very well for this purpose, because the annotation fades after a few seconds. It lasts long enough for the student to go straight to the widget or field I have drawn an arrow to, or circled, or underlined etc.

I think trying to overlay a whiteboard, which is designed more for more long-term collaborative sketching, is not going to be a working solution to my problem. However, and I haven't had time to dig into the code yet, but maybe parts of the whiteboard code could be re-used for this?

Ange-Cesari commented 1 year ago

Hey @rossigee ,

Thabk you for clarifying, I wasn't there at all !

Pretty sure that having a transparent mask with a big part of the collaboration tool @miroslavpejic85 already made can be done, However there as some implémentation that has to be made. The Workflow should be as follow :

In the call interface, next to screen sharing, you should have either a dedicated button for that purpose, or during a screen share, having a button that pops that allows to do this collaboration mode.

The sharer should have the possibility to control Who in the conversation can draw on his screen, how much time the draws stay at screen,

And most important he should be able to deactivate the drawing without deactivating the screen (if we go by the 2nd option, which I think is the most user friendly)

Maybe it should be better to have a complete list of features request to be able to have a plan to architecte this feature ?