feat: screen sharing

[ShGKme]

☑️ Resolves

• Fix Screensharing #11

🖼️ Screenshots

• With live previews (except on Wayland)
• Supports "All screens with audio". All of the other options don't support audio streaming.
• When there is only one screen, the first option is renamed to "Entire screen with audio"
• On Mac - opens settings to allow screensharing if it is not allowed

Windows / Mac / Linux (xorg)

Windows.mp4

Linux (Wayland)

Wayland with PipeWire has a different workflow:

• Requesting all available sources (screens, windows) - triggers native system dialog to choose what to share
• Showing the stream for the selected source also triggers the system dialog
• So live preview for all options is not possible, each preview triggers the dialog
• Instead, only one static image preview is shown for the selected source
• Starting screensharing also triggers the dialog, and the second selected source is actually streamed
• Unfortunately, this is a known issue with double dialog. There is the same issue in Chromium

Linux-Wayland.mp4

🚧 Tasks

• Add app:getDesktopCaptureSources method to get the list of available sources on backend
• Add DesktopMediaSourceDialog with the list of available sources to share (screens, windows)
• Add OCA.Talk.Desktop.getDesktopMediaSource to invoke the dialog and get the selected source
• On Talk side, use OCA.Talk.Desktop.getDesktopMediaSource instead of unavailable navigator.mediaDevices.getDisplayMedia (desktop: add screen sharing support spreed#12003)
• Polishing

[ShGKme]

Rebased onto main to resolve README conflict

[nickvergessen]

I receive:

Error occurred in handler for 'app:getDesktopCapturerSources': TypeError: systemPreferences.getMediaAccessStatus is not a function
    at /home/nickv/Nextcloud/TalkDesktop/talk-desktop/.webpack/main/index.js:48014:24
    at WebContents.<anonymous> (node:electron/js2c/browser_init:2:78183)
    at WebContents.emit (node:events:514:28)

On linux.

https://www.electronjs.org/docs/latest/api/system-preferences#systempreferencesgetmediaaccessstatusmediatype-windows-macos
Seems expected

[nickvergessen]

Works now, but there is some "stacking issue"

I have to "pick" a screen 3 times. After

1. The "full screen with audio" frame appears
2. The next screen option appears
3. The video in 1. appears

Before 1	Before 2	Before 3	After 3

🗣️ At this moment (After 3) I have a Audio Feedback Loop (is it avoidable to play the shared audio?)

After picking either option I have to accept the screenshare again (but that is also the case with normal Chromium)

After selecting that the screenshare menu is "open" (should be closed)

[ShGKme]

The solution should be different for Wayland 🥲

[nickvergessen]

After selecting that the screenshare menu is "open" (should be closed)

This is still the case, otherwise fine by me

[ShGKme]

After selecting that the screenshare menu is "open" (should be closed)

This is still the case, otherwise fine by me

This part is outside Talk Desktop...

[nickvergessen]

I never noticed it in the browser. But seems you are right

[Antreesy]

Tested with Linux package, don't have any comments or suggestions. Nice work!

[DorraJaouad]

On Windows, I am not sure it is related to the PR or setup 🙈 :

• Icons are not resized
• Call button is not there and after sharing, the sharing button also disappears

and I think there should be a watcher over streams so when a the modal is open and you close a window, the list gets updated. For now, it turns into a black stream but remains there.

[ShGKme]

• Icons are not resized

This is NcDialog feature... Talk Desktop, and even Talk should have no effect on it. Can you check that you have fresh npm ci installed on both talk-desktop and spreed? And if it is, what styles are applied on the button.

Which version of spreed you tested with?

• Call button is not there and after sharing, the sharing button also disappears

Also should not be affected by the Talk Desktop...

and I think there should be a watcher over streams so when a the modal is open and you close a window, the list gets updated. For now, it turns into a black stream but remains there.

Nice catch, checking...

[ShGKme]

I never noticed it in the browser. But seems you are right

I can reproduce in Web:

1. Start a call
2. Start screen sharing
3. Stop the screen sharing
4. Start screen sharing again
5. The menu is open

I have no idea why it happens

[ShGKme]

• Icons are not resized

I cannot reproduce, but after some debugging with @DorraJaouad it seems to be Vue 2.7 + weird v-bind CSS issue. It correctly compiles styles, but it doesn't set CSS variable for "v-bind in css" on the root element of NcIconSvgWrapper.

[ShGKme]

and I think there should be a watcher over streams so when a the modal is open and you close a window, the list gets updated. For now, it turns into a black stream but remains there.

Remove preview when the source is not available anymore and request sources each second to check for new sources.

cc @DorraJaouad

[DorraJaouad]

Tested.
All good 💯 thanks !

[ShGKme]

All good 💯

Even icons? o_O

[DorraJaouad]

Even icons? o_O

No :( , but it's not related to this PR.