Microsoft Teams and screen sharing under Wayland

Screen sharing features in applications under Wayland need support from the devs. Here is how to fix the issue if you've got to use Microsoft Teams.

Microsoft Teams and screen sharing under Wayland

The scenario:

You are a Linux user, and the company you work for imposes you to collaborate with your team via Microsoft Teams. I don't judge, I don't care, I'm in the same situation but still, I'm not a fan of closed-source software (pro-tip for managers: there are tons of open source collaboration projects out there, heh!). You install that software and, at the first meeting, attempting to share something with your buddies, you realize that you've just broadcasted some entertaining pitch-black rectangle.

... just a second, I've got to log out e login again

You close the Wayland session and jump back on the old X.org session, open that software again, join the conversation, share your screen and everybody is happy... but yourself.

The problem:

That software is an application shell. The Application shell pattern is an architectural pattern that provides a web context with minimal UI implementation presented to the user. Once it's rendered, the content is loaded asynchronously and injected into the UI using web technologies (see progressive web applications). Frameworks to implement shell applications (e.g. Electron for desktop applications, Ionic for mobile...) provide also some plugins consisting of OS-related plugins, implemented natively, that interact with the capabilities of the underlying operating system, along with a web-level adapter that exposes plugins' APIs on a higher level of abstraction. In this way, you can invoke plugins' from the application shell. That's it.

Back to the topic, that application is built using Electron, an old version of Electron according to this thread. That version uses some libraries that don't provide full support to the Wayland protocol, therefore we have to hack that.

The solution:

Introducing Nativefier, a command line tool that aims to build standalone shell applications out of websites. We have to use a fork of it, provided by the user joahn12345 who opened a PR that is still unmerged due to reasons. But let's get started, we have to clone, build and install Nativefier from the source:

git clone https://github.com/johan12345/nativefier.git
cd nativefier
npm ci
npm run build
npm link
Build and install Nativefier

Then we can build our application Maicrosoft Deams enabling the experimental feature WebRTCPipeWireCapturer required in order to get the screen sharing thing working as expected:

nativefier https://teams.microsoft.com --name "Maicrosoft Deams" --counter true --darwin-dark-mode-support true --title-bar-style hidden --internal-urls "(.*)" --file-download-options '{"saveAs": true}' --browserwindow-options '{ "webPreferences": { "experimentalFeatures": true }}' --enable-features WebRTCPipeWireCapturer --tray --icon /home/user/some-funny-icon.png
Create the application

Then, move the created folder somewhere:

sudo mv MaicrosoftDeams-linux-x64 /usr/share/

And last but not least, symlink the binary file you will find in the folder and/or create an entry in the application menu of your desktop environment. That's it! Enjoy the screen sharing under that application, no more X.org pain from now on.

Oh, wait!

Are you looking for an application icon? I've used this one (credits: a guy on the bird site):

Maicrosoft Deams

I'm not judging at all. Peace! >_