From 1833e49321339aac17273849a3484764b033bb8d Mon Sep 17 00:00:00 2001
From: iamvinbas <221525311+iamvinbas@users.noreply.github.com>
Date: Wed, 4 Nov 2026 15:28:35 +0100
Subject: [PATCH] fix: video clips fail to play with KDE Plasma Integration
 (#2)

Clips are played by a <video> element that was never added to the page.
The KDE Plasma Integration browser extension, installed by default on many
Linux desktops through a system policy, wraps document.createElement and
new Audio(): when a detached media element starts playing, it inserts it
into the page and removes it again. Chromium pauses a media element that is
removed from the page, so play() rejected with "The play() request was
interrupted because the media was removed from the document" and the clip
never went on air.

That also explains why deleting streamFree's browser profile helped: the
policy installs the extension into a fresh profile in the background, so
only the first launch of a new profile ran without it.

Media elements used only for their sound or frames (the clip player and
the element Chrome needs to deliver a WebRTC guest's audio to Web Audio)
now live in an invisible container in the page before play() is called,
so the extension leaves them alone.

The new browser test reproduces the extension's behaviour with a small
page script; it fails without this change.

Fixes #2

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 tests/e2e/run.mjs | 48 +++++++++++++++++++++++++++++++++++++++++++++++
 web/css/app.css   |  6 ++++++
 web/js/audio.js   |  9 +++++++--
 web/js/studio.js  |  5 ++++-
 web/js/util.js    | 24 ++++++++++++++++++++++++
 5 files changed, 89 insertions(+), 3 deletions(-)

diff --git a/tests/e2e/run.mjs b/tests/e2e/run.mjs
index 9ffa58d..2015f40 100644
--- a/tests/e2e/run.mjs
+++ b/tests/e2e/run.mjs
@@ -379,6 +379,54 @@ await test('the studio speaks Italian when the system does', async () => {
   await itCtx.close();
 });
 
+// Some browser extensions (KDE Plasma Integration, on by default on many
+// Linux desktops) briefly insert and remove a detached <video>/<audio> when it
+// starts playing; Chromium then pauses it and play() rejects with "the media
+// was removed from the document" (issue #2). This mimics that behaviour.
+const DETACHED_MEDIA_MOVER = `(() => {
+  const create = Document.prototype.createElement;
+  Document.prototype.createElement = function (...args) {
+    const el = create.apply(this, args);
+    if (typeof args[0] === 'string' && /^(audio|video)$/i.test(args[0])) {
+      el.addEventListener('play', () => {
+        if (!el.isConnected) {
+          document.documentElement.appendChild(el);
+          el.remove();
+        }
+      }, { once: true });
+    }
+    return el;
+  };
+})();`;
+
+await test('a video clip plays even with an extension that moves detached media', async () => {
+  const clip = join(work, 'clip.mp4');
+  execFileSync('ffmpeg', ['-v', 'error', '-y', '-f', 'lavfi', '-i', 'testsrc2=size=640x360:rate=30', '-f', 'lavfi', '-i', 'sine=frequency=440:sample_rate=48000',
+    '-t', '4', '-c:v', 'libx264', '-pix_fmt', 'yuv420p', '-c:a', 'aac', '-movflags', '+faststart', clip]);
+  const cctx = await browser.newContext({ permissions: ['camera', 'microphone'], locale: 'en-US' });
+  await cctx.addInitScript(DETACHED_MEDIA_MOVER);
+  const page = await cctx.newPage();
+  const errors = [];
+  page.on('pageerror', (e) => errors.push(e.message));
+  await page.goto(server.studio);
+  await waitFor(page, () => window.streamFree?.people.get('host'));
+  await page.click('button[aria-label="Video clips"]');
+  await page.setInputFiles('#dialog input[type=file]', clip);
+  await page.waitForSelector('#dialog .asset-list li button:has-text("Play")');
+  await page.click('#dialog .asset-list li button:has-text("Play")');
+  await waitFor(page, () => window.streamFree.people.has('media'));
+  await sleep(1000);
+  const state = await page.evaluate(() => {
+    const v = document.querySelector('.media-host video');
+    return { inPage: !!v, playing: !!v && !v.paused, time: v?.currentTime || 0 };
+  });
+  assert.ok(state.inPage && state.playing && state.time > 0.3, `clip state ${JSON.stringify(state)}`);
+  const toasts = await page.evaluate(() => [...document.querySelectorAll('.toast')].map((t) => t.textContent).join(' | '));
+  assert.ok(!toasts.includes('Cannot play'), toasts);
+  assert.deepEqual(errors, []);
+  await cctx.close();
+});
+
 await test('every interface string has an Italian translation', async () => {
   const { IT } = await import('../../web/js/i18n.js');
   const { readFileSync } = await import('node:fs');
diff --git a/web/css/app.css b/web/css/app.css
index 363f11d..ebc4854 100644
--- a/web/css/app.css
+++ b/web/css/app.css
@@ -335,3 +335,9 @@ details.guide p { margin: 6px 0 0; font-size: 13px; }
   [data-panel="left"] .sidebar { order: 0; border-right: 0; }
   .invite-share { flex-direction: column; }
 }
+
+/* Invisible home for media elements used only for their sound or frames
+   (see keepInPage in util.js). Kept on screen at 1 px, not display: none, so
+   no browser treats them as hidden and throttles them. */
+.media-host { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; z-index: -1; }
+.media-host > * { width: 1px; height: 1px; }
diff --git a/web/js/audio.js b/web/js/audio.js
index 937a3a9..fb0a33b 100644
--- a/web/js/audio.js
+++ b/web/js/audio.js
@@ -8,6 +8,8 @@
 // * monitor: what the host hears on their speakers — everyone except the
 //   host's own microphone.
 
+import { keepInPage } from './util.js';
+
 export class Mixer {
   constructor() {
     this.ctx = new AudioContext({ sampleRate: 48000, latencyHint: 'interactive' });
@@ -111,7 +113,7 @@ export class Mixer {
       if (kind === 'guest') {
         // Chrome only delivers remote WebRTC audio to Web Audio while the
         // stream is also attached to a media element.
-        element = new Audio();
+        element = keepInPage(new Audio());
         element.muted = true;
         element.srcObject = input;
         element.play().catch(() => {});
@@ -132,7 +134,10 @@ export class Mixer {
     if (!s) return;
     s.input.disconnect();
     s.gain.disconnect();
-    if (s.element && s.kind === 'guest') s.element.srcObject = null;
+    if (s.element && s.kind === 'guest') {
+      s.element.srcObject = null;
+      s.element.remove();
+    }
     this.sources.delete(id);
     this.route();
   }
diff --git a/web/js/studio.js b/web/js/studio.js
index a34903a..b079e89 100644
--- a/web/js/studio.js
+++ b/web/js/studio.js
@@ -10,7 +10,7 @@ import { Mixer } from './audio.js';
 import { t, setLang, getLang, detectLang } from './i18n.js';
 import { PLATFORMS, platformGuide, helpTopics, cloudflaredInstall } from './help.js';
 import {
-  h, icon, makeApi, hostToken, debounce, formatDuration, formatBytes, toast, copyText,
+  h, icon, makeApi, hostToken, debounce, formatDuration, formatBytes, toast, copyText, keepInPage,
 } from './util.js';
 
 const token = hostToken();
@@ -481,6 +481,7 @@ function stopSource(id) {
     mediaElement.pause();
     mediaElement.removeAttribute('src');
     mediaElement.load();
+    mediaElement.remove();
     mediaElement = null;
   }
   renderAll();
@@ -490,6 +491,8 @@ function stopSource(id) {
 async function playMedia(asset) {
   stopSource('media');
   const video = h('video', { src: api.assetUrl(asset.id), playsInline: true, preload: 'auto' });
+  // In the page before play(): see keepInPage().
+  keepInPage(video);
   mediaElement = video;
   await mixer.resume();
   try {
diff --git a/web/js/util.js b/web/js/util.js
index 6389086..bc9896a 100644
--- a/web/js/util.js
+++ b/web/js/util.js
@@ -124,6 +124,30 @@ export async function copyText(text, input = null) {
   }
 }
 
+let mediaHost = null;
+
+/**
+ * Puts a media element that is only used for its sound or frames into the
+ * page, inside an invisible container, so it is never "detached".
+ *
+ * Detached <video>/<audio> elements are fragile: some browser extensions
+ * (KDE Plasma Integration, installed by default on many Linux desktops) add
+ * such an element to the page when it starts playing and remove it again,
+ * and Chromium pauses a media element removed from the page, rejecting
+ * play() with "The play() request was interrupted because the media was
+ * removed from the document." Elements already in the page are left alone.
+ */
+export function keepInPage(el) {
+  if (!mediaHost) {
+    mediaHost = document.createElement('div');
+    mediaHost.className = 'media-host';
+    mediaHost.setAttribute('aria-hidden', 'true');
+    document.body.append(mediaHost);
+  }
+  if (el.parentNode !== mediaHost) mediaHost.append(el);
+  return el;
+}
+
 export function toast(message, kind = 'info') {
   let host = document.querySelector('.toasts');
   if (!host) {