mattermost / mattermost-plugin-calls

https://www.mattermost.com
Other
96 stars 49 forks source link

Feature Request: Drawing with screen sharing #396

Open mmospanenko opened 1 year ago

mmospanenko commented 1 year ago

This is an incredible cool feature that Slack has. Participants can draw temporary marks or show cursor on host (sharing) screen. It helps on code review, mentoring sessions (drawing arrows or marks much easier than trying to describe in words), etc.

Pic from Slack blog: image

streamer45 commented 1 year ago

Thanks @mmospanenko, will add this to our to our TODOs & Ideas board to be considered for future developments.

iceman-MG commented 7 months ago

its very useful thing

vlamai commented 1 month ago

As far as I understand, the electron allows you to create transparent windows with a canvas inside. I should give it a try.

streamer45 commented 1 month ago

As far as I understand, the electron allows you to create transparent windows with a canvas inside. I should give it a try.

Possibly, although I am not exactly sure how this would work from a presenter's view, especially in the browser implementation. Haven't played with Slack implementation so maybe there's an easy enough solution. Let us know what you discover :)

vlamai commented 1 month ago

After researching the issue, I have come to a few conclusions:

Viewing Drawings and Screen Sharing in Browser: It appears that it is not currently possible to view what others draw or share their screens directly in the browser without implementing some limitations or additional features.

Transparent Window for Drawing: To enable viewing what others draw, it seems necessary to add a transparent window near the existing implementation in the https://github.com/mattermost/desktop/blob/master/src/main/windows/callsWidgetWindow.ts.

Handling Drawing Events: For the drawing functionality, it would be essential to send all WebSocket events related to drawing to the host. Additionally, there would need to be a mechanism to transform the mouse positions of guests to match the host's resolution.

Additionally, I have realized that my current proficiency in React is not sufficient to implement these features effectively. Learning and applying React to this task would require more time than I initially anticipated.

jmammri commented 2 weeks ago

I understand that it's a complicated one, but it would be a game changer. We always have a hard time to explain by words, where the presenter should look/click, when we are not on slack.

Maybe something like teamViewer does would be sufficient: it doesn't allow to draw, but to highlight a point on the presenters screen for a second. But that's probably almost as much work as the drawing feature...

aolvictim commented 5 days ago

I think this may not be possible with a web-based app (Mattermost app really is just a wrapper). Slack's drawing feature is done through screen recording (they ask for Screen Recording permission on Mac) then overlay the drawing on top.