Feat: screenshare audio sharing in Linux (with pipewire) by JoaoCostaIFG · Pull Request #2880 · element-hq/element-desktop

JoaoCostaIFG · 2026-03-14T13:48:34Z

Checklist

Ensure your code works with manual testing.
New or updated public/exported symbols have accurate TSDoc documentation.
Linter and other CI checks pass.
I have licensed the changes to Element by completing the Contributor License Agreement (CLA)

Description

This adds support for streaming application audio during screenshares on Linux systems using PipeWire:
- Mostly Wayland, but works the same on X11 as long as PipeWire is available/in use.
Uses venmic which is a package used by vesktop
- Vesktop is custom 3rd party discord client
- It allows screenshares with audio in Linux
Feature kept as optional:
- Only works when in Linux, with Pipewire.
- If venmic fails to load (outdated glibc, missing PipeWire, etc.), the screen share works normally without audio

Will help implement the feature requested in this issue: element-hq/element-call #3657.

Problems

I've never loaded a prebuilt node module like this, so I'm not too sure I'm doing it right.
I was expecting an easier/better way to load the audio source/channel/node picker dialog window
- Open to suggestions here.
Venmic isn't exactly intended to be used in other apps like this, but it seems fine to me.

Next steps (outside the scope of this PR)

Screenshares currenly lack audio volume controls:
- Need to check that the audio is being sent as a separate stream and add a volume slider for it.
Get something similar working on Windows and on MacOS.

Screenshots

Audio sharing screen:

On Windows, include audio: loopback in the displayMedia callback when the web page requests audio. This enables sharing system audio alongside screen/window video during screen shares. The implementation: - Tracks whether audio was requested via the request parameter in setDisplayMediaRequestHandler - Stores the audioRequested state in displayMediaCallback module - On Windows, when the user selects a source via the custom picker, includes loopback audio in the callback to capture system audio - Captures audio state before async callback to prevent race conditions

…ntegration Add @vencord/venmic as an optional dependency to enable audio sharing during screen shares on Linux via PipeWire virtual microphone. New files: - src/venmic.ts: Main process module that interfaces with venmic's PatchBay to list audio nodes, create/destroy virtual microphones - src/@types/vencord__venmic.d.ts: Type definitions for the venmic module Changes: - src/electron-main.ts: Conditionally import venmic on Linux - src/preload.cts: Expose venmic IPC APIs (list, start, startSystem, stop) - electron-builder.ts: Include venmic .node files in packaged app (Linux only) - package.json: Add @vencord/venmic optional dependency - knip.ts: Acknowledge venmic as a used dependency Also includes: - Stricter GLIBC version check and logging for missing Audio Service - Load native .node file directly using createRequire for packaged apps - Fix unlink() and stop() return types to match actual API

Allow users to choose between sharing entire system audio, per-application audio, or no audio for Linux screen shares. This gives explicit control and avoids always sharing all system sounds, addressing privacy and user intent. It also ensures compatibility with Element Call which may require audio devices in iframes, requiring broad injection of the virtual microphone in web contexts. Implementation details: - Audio picker dialog for selecting audio source - Support for per-app audio via stable properties (application.name or node.name) for reliable matching across app restarts - Properly stop venmic when "No audio" is selected - Virtual microphone injection in web contexts for Element Call

- Add keyboard navigation (arrow keys, Home, End) with proper focus management - Add ARIA attributes (role=radiogroup/radio, aria-checked, aria-live) - Add focus-visible styles for keyboard users - Align colors with Element design system (green accent #0dbd8b) - Use CSS variables for theming and consistent spacing - Improve color contrast for WCAG AA compliance - Add prefers-reduced-motion support - Add loading spinner visual indicator - Style scrollbars to match dark theme - Add double-click protection on submit - Wrap JSON.parse in try-catch for robustness - Disable Share button during loading - Remove console.log debug statements - Add semantic HTML (<main> landmark)

- Copy venmic addon to lib/ during build instead of bundling node_modules - Simplify native module path to match Vesktop's approach - Rename isGlibCxxOutdated to isGlibcOutdated (matches actual detection) - Simplify GLIBC detection using string matching - Parallelize iframe injection for better performance - Fix ReadableStream type error in webcontents-handler - Update copyright headers to 2026

- Show audio picker for Linux X11 path (Wayland already handled in electron-main.ts) - Fix potential crash when audioTrack is undefined before addTrack() - Extract shared AudioSelection and VenmicListResult types to @types/audio-sharing.d.ts - Reduce logging verbosity by using console.debug for operational messages

CLAassistant · 2026-03-14T13:48:40Z

All committers have signed the CLA.

t3chguy · 2026-03-14T16:04:05Z

scripts/copy-res.ts

+
+// Copy venmic native addon for Linux audio sharing
+// Only copy on Linux since venmic is Linux-only
+if (process.platform === "linux") {


This won't work for cross-compiling. You can cross compile for linux from mac or Windows.

I moved it to the hak module build system. Both the development and the packaged build worked on my side. It has handled not having venmic installed.
Hope the change made sense.

I don't have windows or mac machines to test the cross compilation :/

Move venmic native addon handling from copy-res.ts (which checks process.platform) to the HAK build system (which checks target platform). This allows building Linux packages from Windows or macOS hosts. Signed-off-by: JoaoCostaIFG <me@joaocosta.dev>

- Fix import ordering in venmic.ts and webcontents-handler.ts - Replace inline import() type annotation with proper type import - Fix prettier formatting in hak venmic build/check files

t3chguy · 2026-03-20T12:21:16Z

build/audio-picker.html

@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<!--
+Copyright 2025 New Vector Ltd.


Wrong year & Company name, this should be your copyright

I thought that was the company to be placed in all copyright headers. Didn't know I was supposed to use my copyright.

t3chguy · 2026-03-20T12:21:41Z

build/audio-picker.html

+            --color-bg-canvas: #15191e;
+            --color-bg-subtle: #21262d;
+            --color-bg-subtle-hover: #282e36;
+            --color-bg-accent: rgba(13, 189, 139, 0.15);
+            --color-border-accent: #0dbd8b;
+            --color-accent: #0dbd8b;
+            --color-accent-hover: #0aa87c;
+            --color-text-primary: #ffffff;
+            --color-text-secondary: #a9b2bc;
+            --color-text-muted: #8d99a5;
+            --color-border-subtle: #30363d;
+            --color-border-interactive: #6e7681;
+            --color-bg-button-secondary: #30363d;
+            --color-bg-button-secondary-hover: #3d444d;
+            --color-bg-error: rgba(255, 75, 85, 0.15);
+            --color-border-error: rgba(255, 75, 85, 0.4);
+            --color-text-error: #ff4b55;
+            --color-focus-ring: rgba(13, 189, 139, 0.4);


This ought to use actual Compound Design Tokens rather than magic hardcoded values

I'm not sure if this is the best approach, but I added @vector-im/compound-design-tokens as a devDependency to copy the css to the build directory (build/compound). This makes it available to the audio picker window.
It also picks the current theme from the parent window (element itself): light/dark or match system. I haven't tried custom themes.
Changing the theme with the audio picker open does not change its appearance: only on the next run of the picker.

t3chguy · 2026-03-20T12:21:55Z

build/audio-picker.html

+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;


We should be consistent on font, should be using Inter

I'm now using the font family defined by Compound Design Tokens. I think that this window doesn't have access to fonts bundled with element-desktop tho. I.e. it will only use Inter if it installed in the OS. Not sure if there's much we can do about that with this approach.

t3chguy · 2026-03-20T12:22:18Z

build/audio-picker.html

+        <h1>Share Audio</h1>
+        <p class="subtitle">Choose what audio to share with the call</p>
+
+        <div id="content" class="loading" aria-live="polite">
+            <div class="spinner" aria-hidden="true"></div>
+            <span>Loading audio sources...</span>
+        </div>
+    </main>
+
+    <div class="buttons">
+        <button type="button" class="btn-secondary" id="cancel">Cancel</button>
+        <button type="button" class="btn-primary" id="share" disabled>Share</button>
+    </div>


t3chguy · 2026-03-20T12:22:36Z

hak/@vencord/venmic/build.ts

@@ -0,0 +1,54 @@
+/*
+Copyright 2026 New Vector Ltd.


Ditto previous copyright comment

t3chguy · 2026-03-20T12:23:03Z

hak/@vencord/venmic/check.ts

@@ -0,0 +1,23 @@
+/*
+Copyright 2026 New Vector Ltd.


t3chguy · 2026-03-20T12:23:16Z

src/@types/audio-sharing.d.ts

@@ -0,0 +1,21 @@
+/*
+Copyright 2025 New Vector Ltd.


t3chguy · 2026-03-20T12:24:01Z

src/@types/vencord__venmic.d.ts

@@ -0,0 +1,36 @@
+/*
+Copyright 2025 New Vector Ltd.


t3chguy · 2026-03-20T12:24:19Z

src/audio-picker-preload.cts

@@ -0,0 +1,36 @@
+/*
+Copyright 2025 New Vector Ltd.


t3chguy · 2026-03-20T12:24:30Z

src/audio-picker.ts

@@ -0,0 +1,139 @@
+/*
+Copyright 2025 New Vector Ltd.


t3chguy · 2026-03-20T12:25:00Z

src/audio-picker.ts

+            minimizable: false,
+            maximizable: false,
+            fullscreenable: false,
+            title: "Share Audio",


t3chguy · 2026-03-20T12:25:34Z

src/electron-main.ts

+    if (setupVenmicInjection) {
+        setupVenmicInjection(global.mainWindow.webContents);


Suggested change

if (setupVenmicInjection) {

setupVenmicInjection(global.mainWindow.webContents);

setupVenmicInjection?.(global.mainWindow.webContents);

t3chguy · 2026-03-20T12:26:25Z

src/ipc.ts

+
+            // Include loopback audio for Windows
+            if (audioRequested && process.platform === "win32") {
+                await callback?.({ video: args[0], audio: "loopback" });


The types say this isn't a promise?

You're right. I removed the win32 special case because it isn't really part of the scope of this PR. Also, it isn't a nice solution for audio on windows because it causes call participants to start hearing themselves

t3chguy · 2026-03-20T12:26:30Z

src/ipc.ts

+            if (audioRequested && process.platform === "win32") {
+                await callback?.({ video: args[0], audio: "loopback" });
+            } else {
+                await callback?.({ video: args[0] });


t3chguy · 2026-03-20T12:27:00Z

src/venmic-inject.ts

@@ -0,0 +1,140 @@
+/*
+Copyright 2026 New Vector Ltd.


Copyright ditto

t3chguy · 2026-03-20T12:27:19Z

src/venmic.ts

@@ -0,0 +1,143 @@
+/*
+Copyright 2025 New Vector Ltd.


Signed-off-by: JoaoCostaIFG <me@joaocosta.dev>

- Add translated UI strings to audio picker (title, buttons, labels, error messages) - Expose getStrings IPC handler for loading localized strings in the picker UI - Update HTML template to dynamically populate translated content - Add audio_picker translation keys to en_EN.json - Revert win32 'audio: loopback' automatic addition as it's outside scope - Improve error handling for stopVenmic IPC calls in preload Signed-off-by: JoaoCostaIFG <me@joaocosta.dev>

- Replace hardcoded CSS design token values in audio-picker.html with Compound Design Token from @vector-im/compound-design-tokens: - Add @vector-im/compound-design-tokens dev dependency for CSS tokens - Copy Compound CSS to build/compound/ during build (scripts/copy-res.ts) - Include compound CSS in packaged app resources (electron-builder.ts) - Add theme detection from parent window to support light/dark/high-contrast themes - Add IPC handler (audio-picker-get-config) to pass theme preference to picker window - Add fallback to system preference when parent window theme cannot be detected Signed-off-by: JoaoCostaIFG <me@joaocosta.dev>

t3chguy · 2026-03-25T10:24:35Z

Sorry but this repo has been merged into https://github.com/element-hq/element-web/tree/develop/apps/desktop so your PR will need to be moved there

JoaoCostaIFG added 7 commits March 13, 2026 19:46

docs: add TSDoc for audio sharing exported symbols

d1a81c6

JoaoCostaIFG requested review from a team as code owners March 14, 2026 13:48

JoaoCostaIFG requested review from MidhunSureshR and florianduros March 14, 2026 13:48

github-actions bot added the Z-Community-PR Issue is solved by a community member's PR label Mar 14, 2026

JoaoCostaIFG changed the title ~~Feat/screenshare app audio sharing~~ Feat: screenshare audio sharing in Linux (with pipewire) Mar 14, 2026

dosubot bot added the T-Enhancement label Mar 14, 2026

t3chguy reviewed Mar 14, 2026

View reviewed changes

JoaoCostaIFG force-pushed the feat/screenshare-app-audio-sharing branch from 3af732b to d840ba8 Compare March 14, 2026 21:35

fix: resolve lint errors in venmic and webcontents-handler

248a77a

- Fix import ordering in venmic.ts and webcontents-handler.ts - Replace inline import() type annotation with proper type import - Fix prettier formatting in hak venmic build/check files

t3chguy reviewed Mar 20, 2026

View reviewed changes

JoaoCostaIFG added 4 commits March 20, 2026 17:42

fix: copyright headers misattributing the author

a814c53

Signed-off-by: JoaoCostaIFG <me@joaocosta.dev>

refactor: simplify venmic injection setup

0447ee8

t3chguy closed this Mar 25, 2026

		if (setupVenmicInjection) {
		setupVenmicInjection(global.mainWindow.webContents);

	if (setupVenmicInjection) {
	setupVenmicInjection(global.mainWindow.webContents);
	setupVenmicInjection?.(global.mainWindow.webContents);

Conversation

JoaoCostaIFG commented Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Description

Problems

Next steps (outside the scope of this PR)

Screenshots

Uh oh!

CLAassistant commented Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JoaoCostaIFG Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

t3chguy commented Mar 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

JoaoCostaIFG commented Mar 14, 2026 •

edited

Loading

CLAassistant commented Mar 14, 2026 •

edited

Loading

JoaoCostaIFG Mar 14, 2026 •

edited

Loading