Merge pull request #4395 from element-hq/toger5/backport-publish-npm-component

[backport] Publish npm component

.github/workflows/publish-component.yaml

@@ -0,0 +1,135 @@
+name: Build & publish the component package for releases
+
+on:
+  release:
+    types: [published]
+  pull_request:
+    types:
+      - synchronize
+      - opened
+      - labeled
+  push:
+    branches: [main]
+
+# Each job asks for what it needs
+permissions: {}
+
+jobs:
+  versioning:
+    name: Versioning
+    runs-on: ubuntu-latest
+    outputs:
+      DRY_RUN: ${{ steps.dry_run.outputs.DRY_RUN }}
+      PREFIXED_VERSION: ${{ steps.prefixed_version.outputs.PREFIXED_VERSION }}
+      TAG: ${{ steps.tag.outputs.TAG }}
+    steps:
+      - name: Calculate VERSION
+        # Safely store dynamic values in environment variables
+        # to prevent shell injection (template-injection)
+        run: |
+          if [ "$EVENT_NAME" = "release" ]; then
+            echo "VERSION=$RELEASE_TAG" >> "$GITHUB_ENV"
+          else
+            echo "VERSION=v0.0.0-pre.0" >> "$GITHUB_ENV"
+          fi
+        env:
+          RELEASE_TAG: ${{ github.event.release.tag_name }}
+          EVENT_NAME: ${{ github.event_name }}
+      - id: dry_run
+        name: Set DRY_RUN
+        # A dry run for everything but releases, so that a broken package shows up
+        # ahead of a release
+        run: echo "DRY_RUN=${{ github.event_name != 'release' }}" >> "$GITHUB_OUTPUT"
+      - id: prefixed_version
+        name: Set PREFIXED_VERSION
+        run: echo "PREFIXED_VERSION=${VERSION}" >> "$GITHUB_OUTPUT"
+      - id: tag
+        # latest = a proper release
+        # other = anything else
+        name: Set tag
+        run: |
+          if [[ "${VERSION}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]; then
+            echo "TAG=latest" >> "$GITHUB_OUTPUT"
+          elif [[ "${VERSION}" =~ ^v[0-9]+\.[0-9]+\.[0-9]+\-rc\.[0-9]+$ ]]; then
+            echo "TAG=rc" >> "$GITHUB_OUTPUT"
+          else
+            echo "TAG=other" >> "$GITHUB_OUTPUT"
+          fi
+
+  publish_npm:
+    needs: versioning
+    name: Publish NPM
+    runs-on: ubuntu-latest
+    outputs:
+      ARTIFACT_VERSION: ${{ steps.artifact_version.outputs.ARTIFACT_VERSION }}
+    permissions:
+      contents: read
+      id-token: write # Allow npm to authenticate as a trusted publisher
+    steps:
+      - name: Checkout
+        uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4.3.1
+        with:
+          persist-credentials: false
+      - name: Enable Corepack
+        run: corepack enable
+      - name: Setup node
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        # No dependency cache: a release build must not restore one another workflow could have poisoned
+        with:
+          node-version-file: .node-version
+          registry-url: "https://registry.npmjs.org"
+      # Layered like build-element-call.yaml, so a PR paired with a matrix-js-sdk branch
+      # builds against it; a release pins the SDK, so layered.sh leaves it as locked
+      - name: Install dependencies
+        run: scripts/layered.sh --ignore-pnpmfile
+        env:
+          PR_HEAD_REPO_OWNER: ${{ github.event.pull_request.head.repo.owner.login }}
+      - name: Build component
+        run: pnpm build:component:production
+        env:
+          VITE_APP_VERSION: component-${{ needs.versioning.outputs.PREFIXED_VERSION }}
+          NODE_OPTIONS: "--max-old-space-size=4096"
+
+      # `devEngines` (pnpm only, which npm refuses) and the `prepare` build exist for
+      # git-dependency installs; the published package is already built
+      - name: Publish npm
+        working-directory: component
+        run: |
+          jq 'del(.devEngines, .scripts)' package.json > package.json.tmp && mv package.json.tmp package.json
+          npm version ${NEEDS_VERSIONING_OUTPUTS_PREFIXED_VERSION} --no-git-tag-version
+          echo "ARTIFACT_VERSION=$(jq '.version' --raw-output package.json)" >> "$GITHUB_ENV"
+          npm publish --provenance --access public --tag ${NEEDS_VERSIONING_OUTPUTS_TAG} ${{ needs.versioning.outputs.DRY_RUN == 'true' && '--dry-run' || '' }}
+        env:
+          NEEDS_VERSIONING_OUTPUTS_PREFIXED_VERSION: ${{ needs.versioning.outputs.PREFIXED_VERSION }}
+          NEEDS_VERSIONING_OUTPUTS_TAG: ${{ needs.versioning.outputs.TAG }}
+
+      - id: artifact_version
+        name: Output artifact version
+        run: echo "ARTIFACT_VERSION=${ARTIFACT_VERSION}" >> "$GITHUB_OUTPUT"
+
+  release_notes:
+    needs: [versioning, publish_npm]
+    if: ${{ needs.versioning.outputs.DRY_RUN == 'false' }}
+    name: Update release notes
+    runs-on: ubuntu-latest
+    # Shared with publish-embedded-packages.yaml, which appends to the same release: two
+    # appends at once would each write back the body without the other's section
+    concurrency:
+      group: release-notes-${{ github.event.release.tag_name || github.run_id }}
+      cancel-in-progress: false
+    permissions:
+      contents: write # to update release notes
+    steps:
+      - name: Add release notes
+        uses: softprops/action-gh-release@3bb12739c298aeb8a4eeaf626c5b8d85266b0e65 # v2
+        with:
+          append_body: true
+          body: |
+
+            ## React component (experimental)
+
+            Element Call as a React component, rendered in the host's page instead of in an iframe.
+
+            ```
+            npm install @element-hq/element-call-component@${{ needs.publish_npm.outputs.ARTIFACT_VERSION }}
+            ```

.github/workflows/publish-embedded-packages.yaml

@@ -283,6 +283,11 @@ jobs:
     if: always()
     name: Update release notes
     runs-on: ubuntu-latest
+    # Shared with publish-component.yaml, which appends to the same release: two appends
+    # at once would each write back the body without the other's section
+    concurrency:
+      group: release-notes-${{ github.event.release.tag_name || github.run_id }}
+      cancel-in-progress: false
     permissions:
       contents: write # to update release notes
     steps:

README.md

@@ -289,8 +289,14 @@ callback; with one, it asks the host to unmount it instead. The
 [global JS controls](./docs/controls.md) on `window` are unchanged and remain
 page-wide, so with several instances on one page they apply to all of them.
 
-The package is not published yet. A host installs it as a git dependency on the
-`component` directory of this repository,
+Each release publishes the package to npm, with the same version as the release:
+
+```sh
+npm install @element-hq/element-call-component
+```
+
+To use an unreleased commit, a host can instead install it as a git dependency
+on the `component` directory of this repository,
 
 ```json
 "@element-hq/element-call-component": "github:element-hq/element-call#main&path:/component"

component/LICENSE-AGPL-3.0

@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

component/LICENSE-COMMERCIAL

@@ -0,0 +1,6 @@
+Licensees holding a valid commercial license with Element may use this
+software in accordance with the terms contained in a written agreement
+between you and Element.
+
+To purchase a commercial license please contact our sales team at
+licensing@element.io

component/README.md

@@ -0,0 +1,7 @@
+# @element-hq/element-call-component
+
+Element Call as a React component, rendered in the host application's page
+instead of in an iframe. Experimental.
+
+See [Element Call as a component](https://github.com/element-hq/element-call#element-call-as-a-component-experimental)
+in the Element Call README for usage.

component/build/scopeStylesToRoot.test.ts

@@ -109,12 +109,4 @@ describe("scopeStylesToRoot", () => {
       ".a .b_abc12:hover { border: 0 }",
     );
   });
-
-  it("leaves an excluded stylesheet as it is", async () => {
-    const css = "body { margin: 0 } .menu { color: red }";
-    const result = await postcss([
-      scopeStylesToRoot({ exclude: [/host\.css$/] }),
-    ]).process(css, { from: "/app/host.css" });
-    expect(result.css).toBe(css);
-  });
 });

component/build/scopeStylesToRoot.ts

@@ -60,18 +60,12 @@ const IS_ROOT = `:where(${ROOT_SELECTOR})`;
  * tokens, the component styles, the fonts — is not in this build at all: the
  * host supplies it, unscoped, along with its copy of Compound.
  */
-interface Options {
-  /** Stylesheets left as they are: a host's own, which it doesn't scope. */
-  exclude?: RegExp[];
-}
-
-export function scopeStylesToRoot({ exclude = [] }: Options = {}): Plugin {
+export function scopeStylesToRoot(): Plugin {
   return {
     postcssPlugin: "element-call-scope-styles-to-root",
     Once(root) {
-      const file = root.source?.input.file ?? "";
-      if (exclude.some((pattern) => pattern.test(file))) return;
-      const isModule = file.endsWith(".module.css");
+      const isModule =
+        root.source?.input.file?.endsWith(".module.css") ?? false;
       root.walkRules((rule) => {
         if (isRelative(rule)) return;
         rule.selector = (isModule ? scopeBare : scopeAll).processSync(

component/index.tsx

@@ -72,9 +72,9 @@ import {
   useUrlParams,
 } from "../src/UrlParams";
 import { MediaDevicesContext } from "../src/MediaDevicesContext";
-import { AppViewModel } from "../src/state/AppViewModel";
+import { MediaDevices } from "../src/state/MediaDevices";
 import { ObservableScope } from "../src/state/ObservableScope";
-import { BackgroundEffectsProvider } from "../src/tracks/BackgroundEffectsContext";
+import { ProcessorProvider } from "../src/tracks/TrackProcessorContext";
 import { Config } from "../src/config/Config";
 import { type ConfigOptions } from "../src/config/ConfigOptions";
 import { i18n } from "../src/utils/i18n";
@@ -194,12 +194,14 @@ export const ElementCall: FC<ElementCallProps> = ({
   // observers running for the rest of the page's life. Null until then, which
   // is one render.
   const { controlledAudioDevices, callIntent } = params;
-  const [vm, setVm] = useState<AppViewModel | null>(null);
+  const [mediaDevices, setMediaDevices] = useState<MediaDevices | null>(null);
   useEffect(() => {
     const scope = new ObservableScope();
-    setVm(new AppViewModel(scope, { controlledAudioDevices, callIntent }));
+    setMediaDevices(
+      new MediaDevices(scope, { controlledAudioDevices, callIntent }),
+    );
     return (): void => {
-      setVm(null);
+      setMediaDevices(null);
       scope.end();
     };
   }, [controlledAudioDevices, callIntent]);
@@ -220,7 +222,8 @@ export const ElementCall: FC<ElementCallProps> = ({
   // is told that Element Call has loaded, as the widget tells its client once
   // its own initialisation is over. Once per mount, however often the pieces
   // are later swapped out.
-  const ready = container !== null && rtcSession !== null && vm !== null;
+  const ready =
+    container !== null && rtcSession !== null && mediaDevices !== null;
   const announcedLoaded = useRef(false);
   useEffect(() => {
     if (!ready || announcedLoaded.current) return;
@@ -251,10 +254,8 @@ export const ElementCall: FC<ElementCallProps> = ({
                       <Decoration>
                         <TooltipProvider>
                           <ClientProvider client={client}>
-                            <MediaDevicesContext value={vm.mediaDevices}>
-                              <BackgroundEffectsProvider
-                                effects={vm.backgroundEffects}
-                              >
+                            <MediaDevicesContext value={mediaDevices}>
+                              <ProcessorProvider>
                                 <CallView
                                   client={client}
                                   rtcSession={rtcSession}
@@ -263,7 +264,7 @@ export const ElementCall: FC<ElementCallProps> = ({
                                   preload={params.preload}
                                   skipLobby={params.skipLobby}
                                 />
-                              </BackgroundEffectsProvider>
+                              </ProcessorProvider>
                             </MediaDevicesContext>
                           </ClientProvider>
                         </TooltipProvider>

component/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@element-hq/element-call-component",
   "version": "0.0.0",
-  "description": "Element Call as a React component. Consumed straight from the repository as a git dependency (github:element-hq/element-call#<ref>&path:/component): the host's package manager runs `prepare`, which builds `dist/`.",
-  "license": "SEE LICENSE IN ../README.md",
+  "description": "Element Call as a React component.",
+  "license": "AGPL-3.0-only OR LicenseRef-Element-Commercial",
   "repository": {
     "type": "git",
     "url": "https://github.com/element-hq/element-call",
@@ -15,6 +15,8 @@
     }
   },
   "files": [
+    "LICENSE-AGPL-3.0",
+    "LICENSE-COMMERCIAL",
     "dist"
   ],
   "main": "./dist/element-call.js",

package.json

@@ -87,7 +87,7 @@
     "@types/sdp-transform": "^2.4.5",
     "@typescript-eslint/utils": "^8.61.0",
     "@use-gesture/react": "^10.2.11",
-    "@vector-im/compound-design-tokens": "^11.1.0",
+    "@vector-im/compound-design-tokens": "^11.0.0",
     "@vector-im/compound-web": "^10.4.0",
     "@vitejs/plugin-react": "^6.0.2",
     "@vitest/browser-playwright": "^4.1.5",

playwright/component/component-call.spec.ts

@@ -125,19 +125,25 @@ test("leaves the host's own page unstyled", async ({ page }) => {
     timeout: 60_000,
   });
 
-  // Compound's document styles reach the host, but it loads them itself.
+  // Element Call's stylesheet is written for a page of its own: normalize.css
+  // gives `html` a line height, Compound gives `body` its font and feature
+  // settings, and the design tokens live on `:root`. None of that may reach the
+  // host's document — the harness sets none of these itself, so anything other
+  // than the browser's defaults here came from us.
   const host = await page.evaluate(() => {
-    const sub = document.body.appendChild(document.createElement("sub"));
-    const verticalAlign = getComputedStyle(sub).verticalAlign;
-    sub.remove();
+    const html = getComputedStyle(document.documentElement);
+    const body = getComputedStyle(document.body);
     return {
-      verticalAlign,
-      token: getComputedStyle(document.documentElement).getPropertyValue(
-        "--font-scale",
-      ),
+      lineHeight: html.lineHeight,
+      fontFeatureSettings: body.fontFeatureSettings,
+      token: html.getPropertyValue("--cpd-color-text-primary"),
     };
   });
-  expect(host).toEqual({ verticalAlign: "sub", token: "" });
+  expect(host).toEqual({
+    lineHeight: "normal",
+    fontFeatureSettings: "normal",
+    token: "",
+  });
 
   // While inside the container, the same rules do apply
   const root = panes.first().locator("[data-element-call-root]");

playwright/spa-helpers.ts

@@ -133,7 +133,7 @@ async function disableLeaveDelegation(page: Page): Promise<void> {
  * Expect a certain number of video tiles to be present and visible.
  */
 async function expectVideoTilesCount(page: Page, count: number): Promise<void> {
-  await expect(page.getByTestId("videoTile")).toHaveCount(2);
+  await expect(page.getByTestId("videoTile")).toHaveCount(count);
 
   // No one should be waiting for media
   await expect(page.getByText("Waiting for media...")).not.toBeVisible({

playwright/url-transport.spec.ts

@@ -31,7 +31,11 @@ interface Transport {
  */
 const shapes = {
   url: { type: "livekit", url: sfuUrl },
-  both: { type: "livekit", url: sfuUrl, livekit_service_url: serviceUrl },
+  "url+legacy": {
+    type: "livekit",
+    url: sfuUrl,
+    livekit_service_url: serviceUrl,
+  },
   legacy: null,
 } satisfies Record<string, Transport | null>;
 type Shape = keyof typeof shapes;
@@ -56,15 +60,15 @@ const cases: {
   {
     // Publishers keep the legacy participant identity that clients predating
     // MSC4195 expect, which only the JWT service assigns.
-    hostShape: "both",
-    guestShape: "both",
+    hostShape: "url+legacy",
+    guestShape: "url+legacy",
     hostFlows: ["service-legacy"],
     guestFlows: ["service-legacy"],
   },
   {
     // The MatrixRTC mode has no bearing on the choice.
-    hostShape: "both",
-    guestShape: "both",
+    hostShape: "url+legacy",
+    guestShape: "url+legacy",
     mode: "2_0",
     hostFlows: ["service-legacy"],
     guestFlows: ["service-legacy"],
@@ -75,6 +79,12 @@ const cases: {
     hostFlows: ["cs-api", "service-default"],
     guestFlows: ["service-legacy", "cs-api"],
   },
+  {
+    hostShape: "url",
+    guestShape: "url+legacy",
+    hostFlows: ["cs-api", "service-default"],
+    guestFlows: ["service-legacy", "cs-api"],
+  },
 ];
 
 for (const { hostShape, guestShape, mode, hostFlows, guestFlows } of cases) {
@@ -126,47 +136,6 @@ for (const { hostShape, guestShape, mode, hostFlows, guestFlows } of cases) {
   });
 }
 
-test("Subscriber falls back to the JWT service when the homeserver lacks MSC4195", async ({
-  browser,
-  page,
-  browserName,
-}) => {
-  skipOnFirefox(browserName);
-
-  // The host starts the call with both transport shapes.
-  await advertiseTransport(page, shapes.both);
-  await page.goto("/");
-  await SpaHelpers.createCall(page, "Androl", "HelloCall", true);
-  const inviteLink = await SpaHelpers.getCallInviteLink(page);
-
-  // The guest joins but their C-S requests fail.
-  const guestContext = await browser.newContext({ reducedMotion: "reduce" });
-  const guestPage = await guestContext.newPage();
-  await rejectCsApiTokens(guestPage);
-  const guestRequests = recordAuthRequests(guestPage);
-  await SpaHelpers.joinCallFromInviteLink(guestPage, inviteLink, "Pevara");
-
-  // Wait for the call to connect and render.
-  await SpaHelpers.expectVideoTilesCount(page, 2);
-  await SpaHelpers.expectVideoTilesCount(guestPage, 2);
-
-  // The guest ran through all flows.
-  expect(flowsOf(guestRequests)).toEqual(
-    new Set<Flow>(["cs-api", "service-legacy", "service-default"]),
-  );
-
-  // The C-S token requests failed.
-  for (const request of guestRequests) {
-    expect(request.status).toBe(request.flow === "cs-api" ? 404 : 200);
-  }
-
-  // The C-S token requests preceeded the fallback request.
-  const flows = guestRequests.map((r) => r.flow);
-  expect(flows.indexOf("service-default")).toBeGreaterThan(
-    flows.indexOf("cs-api"),
-  );
-});
-
 test("Publisher shows an error when the homeserver lacks MSC4195", async ({
   page,
   browserName,
@@ -191,6 +160,38 @@ test("Publisher shows an error when the homeserver lacks MSC4195", async ({
   ).toBeVisible();
 });
 
+test("Group call with all possible transport shapes at once", async ({
+  browser,
+  page,
+  browserName,
+}) => {
+  test.slow();
+  skipOnFirefox(browserName);
+
+  // The host starts the call with a url transport.
+  await advertiseTransport(page, shapes.url);
+  await page.goto("/");
+  await SpaHelpers.createCall(page, "Alice", "HelloCall", true);
+  const inviteLink = await SpaHelpers.getCallInviteLink(page);
+
+  // The guest with a legacy transport joins.
+  const bobContext = await browser.newContext({ reducedMotion: "reduce" });
+  const bobPage = await bobContext.newPage();
+  await advertiseTransport(bobPage, shapes.legacy);
+  await SpaHelpers.joinCallFromInviteLink(bobPage, inviteLink, "Bob");
+
+  // The guest with a url+legacy transport joins.
+  const carolContext = await browser.newContext({ reducedMotion: "reduce" });
+  const carolPage = await carolContext.newPage();
+  await advertiseTransport(carolPage, shapes["url+legacy"]);
+  await SpaHelpers.joinCallFromInviteLink(carolPage, inviteLink, "Carol");
+
+  // Wait for the call to connect and render.
+  await SpaHelpers.expectVideoTilesCount(page, 3);
+  await SpaHelpers.expectVideoTilesCount(bobPage, 3);
+  await SpaHelpers.expectVideoTilesCount(carolPage, 3);
+});
+
 /**
  * Delegation follows the flow that authenticated the publisher: the homeserver
  * for a `url`-only transport, the JWT service wherever there is one.
@@ -198,7 +199,7 @@ test("Publisher shows an error when the homeserver lacks MSC4195", async ({
 const delegationCases: { shape: Shape; via: Delegation["via"] }[] = [
   { shape: "url", via: "homeserver" },
   { shape: "legacy", via: "service" },
-  { shape: "both", via: "service" },
+  { shape: "url+legacy", via: "service" },
 ];
 
 for (const { shape, via } of delegationCases) {

playwright/widget/url-transport.test.ts

@@ -11,13 +11,12 @@ import { widgetTest } from "../fixtures/widget-user.ts";
 import { HOST1, TestHelpers } from "./test-helpers.ts";
 
 const sfuUrl = "wss://matrix-rtc.m.localhost/livekit/sfu";
-const serviceUrl = "https://matrix-rtc.m.localhost/livekit/jwt";
 
 /** Which endpoint a page asks for its SFU tokens. */
 type Flow = "cs-api" | "service-legacy" | "service-default";
 
 widgetTest(
-  "Call between a url + livekit_service_url transport and a legacy one",
+  "Call between a url transport and a legacy one",
   async ({ addUser, browserName }) => {
     test.skip(
       browserName === "firefox",
@@ -30,12 +29,10 @@ widgetTest(
       addUser("Pevara", HOST1),
     ]);
 
-    // The host's homeserver has started advertising a `url` next to its JWT
-    // service; the guest's still advertises the JWT service alone.
+    // Host advertises a url transport, guest still advertises a legacy one
     await advertiseTransport(host.page, {
       type: "livekit",
       url: sfuUrl,
-      livekit_service_url: serviceUrl,
     });
     // Element Web answers the widget from a cache it filled at login, so make
     // it fetch the transports again now that they are rerouted
@@ -67,7 +64,7 @@ widgetTest(
     }
 
     // Element Web used for Playwright does support MSC4195 for widgets.
-    expect(hostFlows).toEqual(new Set(["service-legacy", "service-default"]));
+    expect(hostFlows).toEqual(new Set(["cs-api", "service-default"]));
     expect(guestFlows).toEqual(new Set(["service-legacy", "cs-api"]));
   },
 );

pnpm-lock.yaml

@@ -131,7 +131,7 @@ importers:
         specifier: ^10.2.11
         version: 10.3.1(react@19.2.8)
       '@vector-im/compound-design-tokens':
-        specifier: ^11.1.0
+        specifier: ^11.0.0
         version: 11.3.1(@types/react@19.2.18)(react@19.2.8)
       '@vector-im/compound-web':
         specifier: ^10.4.0

sdk/src/media-backend/livekit/ConnectionMap.test.ts

@@ -24,7 +24,7 @@ import {
 import { type ConnectionFactory } from "./ConnectionFactory.ts";
 import { type Connection } from "./Connection.ts";
 import { ownMemberMock, withTestScheduler } from "../../utils/test";
-import { type Behavior } from "../../reactive/Behavior";
+import { constant, type Behavior } from "../../reactive/Behavior";
 import { type TransportLocator } from "./auth";
 
 const TRANSPORT_1: TransportLocator = {
@@ -207,7 +207,7 @@ describe("connections$ stream", () => {
     });
   });
 
-  test("Keeps one connection per homeserver for transports with a url", () => {
+  test("Keeps one connection per homeserver for url transports", () => {
     withTestScheduler(({ behavior, expectObservable }) => {
       const urlTransport: TransportLocator = {
         transport: { type: "livekit", url: "wss://sfu.example.org" },
@@ -243,6 +243,94 @@ describe("connections$ stream", () => {
     });
   });
 
+  test("Shares connection between local livekit_service_url transport and remote url + livekit_service_url transport", () => {
+    withTestScheduler(({ behavior, expectObservable, scope }) => {
+      const serviceUrlTransport: TransportLocator = {
+        transport: {
+          type: "livekit",
+          livekit_service_url: "https://jwt.example.org",
+        },
+        serverName: "example.org",
+      };
+      const urlAndServiceUrlTransport: TransportLocator = {
+        transport: {
+          type: "livekit",
+          livekit_service_url: "https://jwt.example.org",
+          url: "wss://sfu.elsewhere.org",
+        },
+        // Should pass even if local server != remote server
+        serverName: "elsewhere.org",
+      };
+      const connectionMap$ = createConnectionMap$({
+        scope,
+        connectionFactory: fakeConnectionFactory,
+        localTransport: serviceUrlTransport,
+        remoteTransports$: constant(new Epoch([urlAndServiceUrlTransport])),
+        logger,
+        ownMembershipIdentity: ownMemberMock,
+      });
+
+      expectObservable(
+        connectionMap$.pipe(mapEpoch((d) => d.getConnections())),
+      ).toBe("a", {
+        a: expect.toSatisfy(({ value: cs }: Epoch<Connection[]>) => {
+          // One connection total, since local and remote connections are shared
+          expect(cs.length).toBe(1);
+          expect(findConnection(serviceUrlTransport, cs)).toBeDefined();
+          expect(findConnection(serviceUrlTransport, cs)).toBe(
+            findConnection(urlAndServiceUrlTransport, cs),
+          );
+          return true;
+        }),
+      });
+    });
+  });
+
+  test("Shares connection between remote livekit_service_url transport and remote url + livekit_service_url transport", () => {
+    withTestScheduler(({ behavior, expectObservable, scope }) => {
+      const serviceUrlTransport: TransportLocator = {
+        transport: {
+          type: "livekit",
+          livekit_service_url: "https://jwt.example.org",
+        },
+        serverName: "example.org",
+      };
+      const urlAndServiceUrlTransport: TransportLocator = {
+        transport: {
+          type: "livekit",
+          livekit_service_url: "https://jwt.example.org",
+          url: "wss://sfu.elsewhere.org",
+        },
+        // Should pass even if local server != remote server
+        serverName: "elsewhere.org",
+      };
+      const connectionMap$ = createConnectionMap$({
+        scope,
+        connectionFactory: fakeConnectionFactory,
+        localTransport: TRANSPORT_2,
+        remoteTransports$: constant(
+          new Epoch([serviceUrlTransport, urlAndServiceUrlTransport]),
+        ),
+        logger,
+        ownMembershipIdentity: ownMemberMock,
+      });
+
+      expectObservable(
+        connectionMap$.pipe(mapEpoch((d) => d.getConnections())),
+      ).toBe("a", {
+        a: expect.toSatisfy(({ value: cs }: Epoch<Connection[]>) => {
+          // Two connections total: a local connection and a shared remote connection
+          expect(cs.length).toBe(2);
+          expect(findConnection(serviceUrlTransport, cs)).toBeDefined();
+          expect(findConnection(serviceUrlTransport, cs)).toBe(
+            findConnection(urlAndServiceUrlTransport, cs),
+          );
+          return true;
+        }),
+      });
+    });
+  });
+
   test("Should start connection only once", () => {
     withTestScheduler(({ behavior, expectObservable }) => {
       const connectionMap$ = createConnectionMap$({
@@ -344,7 +432,7 @@ describe("ConnectionMap", () => {
     data.add({ ...connection } as Connection, [p("b")]);
     expect(warn).toHaveBeenCalledWith(
       expect.stringContaining(
-        'second connection to [null,"https://lk.example.org",null]: existing [a], adding [b]',
+        'second connection to ["openID","https://lk.example.org"]: existing [a], adding [b]',
       ),
     );
     expect(data.getParticipantsForTransport(TRANSPORT_1)).toHaveLength(2);

sdk/src/media-backend/livekit/ConnectionMap.ts

@@ -18,7 +18,11 @@ import {
   type ObservableScope,
 } from "../../reactive/ObservableScope";
 import { generateItemsWithEpoch } from "../../reactive/observable";
-import { type ConnectionRole, type TransportLocator } from "./auth";
+import {
+  chooseAuthFlow,
+  type ConnectionRole,
+  type TransportLocator,
+} from "./auth";
 import { type Connection } from "./Connection";
 import { type ConnectionFactory } from "./ConnectionFactory";
 
@@ -26,22 +30,25 @@ import { type ConnectionFactory } from "./ConnectionFactory";
 export type TransportKey = string & { __transportKey: true };
 
 /**
- * The key a locator is identified by in a map or set. Locators with the same
- * key share a connection: the server name only takes part in authentication
- * for a transport with a `url`, where our homeserver asks that server for the
- * token. A JWT service is reached directly, so members of several homeservers
- * advertising the same one share a connection rather than each get their own.
+ * Converts a {@link TransportLocator} to a key suitable for identifying it in a
+ * map of connections.
  */
 export function keyFor({
   transport,
   serverName,
 }: TransportLocator): TransportKey {
-  const hasUrl = "url" in transport;
+  // Base the key on the auth flow we would use, so that we never create two
+  // connections that share the same auth details. (That would be bad, as we
+  // might then try to connect to the same SFU twice with the same participant
+  // ID, resulting in only one working connection.)
+  // TODO: This strategy will not work once `chooseAuthFlow` begins allowing for
+  // falling back from the CS API flow to the OpenID flow.
+  const flow = chooseAuthFlow(transport);
   // Serialize the fields in a consistent order
   return JSON.stringify([
-    hasUrl ? transport.url : null,
-    "livekit_service_url" in transport ? transport.livekit_service_url : null,
-    hasUrl ? serverName : null,
+    flow.kind,
+    // With the CS API flow, we additionally need to distinguish server names
+    ...(flow.kind === "csApi" ? [flow.url, serverName] : [flow.serviceUrl]),
   ]) as TransportKey;
 }
 

sdk/src/media-backend/livekit/LivekitBackend.ts

@@ -60,7 +60,10 @@ import {
 import { toMediaConnectionState } from "./connectionState";
 import { createDataChannel$ } from "./DataChannel";
 import { createKeyProvider } from "./KeyProvider";
-import { createLivekitMemberMedia } from "./LivekitMemberMedia";
+import {
+  createLivekitMemberMedia,
+  participantSourcesEqual,
+} from "./LivekitMemberMedia";
 import { createLivekitLocalMedia } from "./LocalMedia";
 
 export interface LivekitBackendOptions {
@@ -166,9 +169,8 @@ export function createLivekitBackend(
       );
       canDelegate = Promise.resolve(false);
     } else {
-      // Delegation goes through whichever service authenticates us as a
-      // publisher, so only that service's support counts
-      const flow = chooseAuthFlow(transport, "publisher");
+      // Check for support using the same auth flow that we intend to use later
+      const flow = chooseAuthFlow(transport);
       canDelegate =
         flow.kind === "openID"
           ? supportsDelegation(
@@ -234,22 +236,28 @@ export function createLivekitBackend(
           const connection = connections.getConnectionForTransport(locator);
           // A member advertising both a `url` and a `livekit_service_url` may
           // have authenticated through either flow, under either identity
-          const participant = connections
+          const participants = connections
             .getParticipantsForTransport(locator)
-            .find((p) => backendIdentities.includes(p.identity));
-          return connection && participant
-            ? { participant, room: connection.livekitRoom }
+            .filter((p) => backendIdentities.includes(p.identity));
+          return connection && participants.length
+            ? { participants, room: connection.livekitRoom }
             : null;
         }),
-        distinctUntilChanged(
-          (a, b) => a?.participant === b?.participant && a?.room === b?.room,
-        ),
+        distinctUntilChanged(participantSourcesEqual),
       ),
     );
     source$.pipe(memberScope.bind()).subscribe((source) => {
-      logger.info(
-        `${member.rtcBackendIdentity}: LiveKit participant ${source ? `matched (${source.participant.sid})` : "missing"} on ${locator$.value ? JSON.stringify(locator$.value.transport) : "no transport"}`,
-      );
+      const transportString = locator$.value
+        ? JSON.stringify(locator$.value.transport)
+        : "no transport";
+      if (source)
+        logger.info(
+          `${member.rtcBackendIdentity}: ${source.participants.length} LiveKit participant(s) matched (${source.participants.map((p) => p.sid).join(", ")}) on ${transportString}`,
+        );
+      else
+        logger.info(
+          `${member.rtcBackendIdentity}: LiveKit participant missing on ${transportString}`,
+        );
     });
     return createLivekitMemberMedia(memberScope, source$, encryptionSystem);
   };

sdk/src/media-backend/livekit/LivekitMediaTrack.ts

@@ -230,10 +230,9 @@ export function createLocalLivekitMediaTrack(
       const track = videoTrack();
       // A processor cannot be built on a track that has already ended
       if (!track || track.mediaStreamTrack.readyState === "ended") return;
-      if (processor) {
-        const adapter = convertToLivekitProcessor(processor);
-        if (track.getProcessor() !== adapter) await track.setProcessor(adapter);
-      } else if (track.getProcessor()) await track.stopProcessor();
+      if (processor)
+        await track.setProcessor(convertToLivekitProcessor(processor));
+      else if (track.getProcessor()) await track.stopProcessor();
     },
   };
 }

sdk/src/media-backend/livekit/LivekitMemberMedia.test.ts

@@ -25,7 +25,7 @@ describe("createLivekitMemberMedia", () => {
     const { participant, publications, room, emitter } = fakes();
     const media = createLivekitMemberMedia(
       testScope(),
-      constant({ participant, room }),
+      constant({ participants: [participant], room }),
       { kind: E2eeType.NONE },
     );
     expect(media.tracks$.value).toEqual([]);
@@ -52,7 +52,7 @@ describe("createLivekitMemberMedia", () => {
     const { participant, publications, room, emitter } = fakes();
     const media = createLivekitMemberMedia(
       testScope(),
-      constant({ participant, room }),
+      constant({ participants: [participant], room }),
       { kind: E2eeType.NONE },
     );
     emitter.emit(

sdk/src/media-backend/livekit/LivekitMemberMedia.ts

@@ -16,13 +16,20 @@ import {
   RoomEvent,
   type TrackPublication,
 } from "livekit-client";
-import { EMPTY, filter, map, type Observable, of, switchMap } from "rxjs";
+import {
+  EMPTY,
+  filter,
+  map,
+  type Observable,
+  of,
+  switchMap,
+  combineLatest,
+} from "rxjs";
 
 import { type ObservableScope } from "../../reactive/ObservableScope";
 import { generateItems } from "../../reactive/observable";
 import { E2eeType, type EncryptionSystem } from "../../encryption";
 import { type Behavior } from "../../reactive/Behavior";
-import { mapScoped } from "../../utils/mapScoped";
 import {
   type EncryptionError,
   type LocalMemberMedia,
@@ -33,13 +40,27 @@ import {
   createLivekitMediaTrack,
   createLocalLivekitMediaTrack,
 } from "./LivekitMediaTrack";
+import { shallowEquals as arrayShallowEquals } from "../../utils/array";
 
 /** Where a member's media comes from: its participant on a room, null while it has none. */
 export type ParticipantSource<P extends Participant = Participant> = {
-  participant: P;
+  participants: P[];
   room: LivekitRoom;
 } | null;
 
+export function participantSourcesEqual<P extends Participant = Participant>(
+  a: ParticipantSource<P>,
+  b: ParticipantSource<P>,
+): boolean {
+  return (
+    a === b ||
+    (a !== null &&
+      b !== null &&
+      arrayShallowEquals(a.participants, b.participants) &&
+      a.room === b.room)
+  );
+}
+
 /**
  * A member's media from its participant. The only place, with
  * `LivekitMediaTrack`, that reads a LiveKit participant; everything above
@@ -99,21 +120,28 @@ function memberTracks$<P extends Participant, T>(
   ) => T,
 ): Behavior<T[] | null> {
   return scope.behavior(
-    mapScoped(scope, source$, (participantScope, { participant, room }) =>
-      participantScope.behavior(
-        observeParticipantMedia(participant).pipe(
-          generateItems(
-            `${participant.identity} tracks$`,
-            function* () {
-              for (const publication of participant.trackPublications.values())
-                yield { keys: [publication.trackSid], data: publication };
-            },
-            (trackScope, publication$) =>
-              factory(trackScope, participant, publication$.value, room),
+    source$.pipe(
+      switchMap((source) => {
+        if (source === null) return of(null);
+        const { participants, room } = source;
+        return combineLatest(
+          participants.map((participant) =>
+            observeParticipantMedia(participant).pipe(
+              generateItems(
+                `${participant.identity} tracks$`,
+                function* () {
+                  for (const publication of participant.trackPublications.values())
+                    yield { keys: [publication.trackSid], data: publication };
+                },
+                (trackScope, publication$) =>
+                  factory(trackScope, participant, publication$.value, room),
+              ),
+            ),
           ),
-        ),
-      ),
-    ).pipe(switchMap((tracks$) => tracks$ ?? of(null))),
+          (...tracks) => tracks.flat(1),
+        );
+      }),
+    ),
   );
 }
 
@@ -133,7 +161,7 @@ function encryptionErrors$(
             filter(
               (message) =>
                 encryptionSystem.kind === E2eeType.SHARED_KEY ||
-                message.includes(source.participant.identity),
+                source.participants.some((p) => message.includes(p.identity)),
             ),
             map((message): EncryptionError | undefined =>
               message.includes("MissingKey")

sdk/src/media-backend/livekit/LocalMedia.ts

@@ -10,7 +10,6 @@ import {
   type LocalParticipant,
   type LocalTrackPublication,
   ParticipantEvent,
-  type Room as LivekitRoom,
 } from "livekit-client";
 import { type Logger } from "matrix-js-sdk/lib/logger";
 import {
@@ -43,7 +42,11 @@ import { type LocalMediaBackend, MediaConnectionState } from "../api";
 import { type TransportLocator } from "./auth";
 import { type Connection } from "./Connection";
 import { type ConnectionMap } from "./ConnectionMap";
-import { createLocalLivekitMemberMedia } from "./LivekitMemberMedia";
+import {
+  createLocalLivekitMemberMedia,
+  type ParticipantSource,
+  participantSourcesEqual,
+} from "./LivekitMemberMedia";
 import { livekitSources } from "./LivekitMediaTrack";
 import { type DesiredMedia, Publisher } from "./Publisher";
 import { toMediaConnectionState } from "./connectionState";
@@ -217,17 +220,15 @@ function participantAndRoom$(
   scope: ObservableScope,
   participant$: Behavior<LocalParticipant | null>,
   connection$: Behavior<Connection | null>,
-): Behavior<{ participant: LocalParticipant; room: LivekitRoom } | null> {
+): Behavior<ParticipantSource<LocalParticipant>> {
   return scope.behavior(
     combineLatest([participant$, connection$]).pipe(
       map(([participant, connection]) =>
         participant && connection
-          ? { participant, room: connection.livekitRoom }
+          ? { participants: [participant], room: connection.livekitRoom }
           : null,
       ),
-      distinctUntilChanged(
-        (a, b) => a?.participant === b?.participant && a?.room === b?.room,
-      ),
+      distinctUntilChanged(participantSourcesEqual),
     ),
   );
 }

sdk/src/media-backend/livekit/Publisher.test.ts

@@ -18,10 +18,9 @@ import {
 import { logger } from "matrix-js-sdk/lib/logger";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import { type PublishRequest, type VideoProcessor } from "../../media-api";
+import { type PublishRequest } from "../../media-api";
 import { flushPromises } from "../../utils/test";
 import { type DesiredMedia, Publisher } from "./Publisher";
-import { convertToLivekitProcessor } from "./videoProcessor";
 
 describe("Publisher", () => {
   describe("setAudioOutputDevice", () => {
@@ -120,24 +119,6 @@ describe("Publisher", () => {
       });
     });
 
-    it("creates both with the options of requests made since the join", async () => {
-      const processor: VideoProcessor = {
-        name: "effect",
-        init: vi.fn(),
-        restart: vi.fn(),
-        destroy: vi.fn(),
-      };
-      want(microphone, { source: "camera", deviceId: "front", processor });
-
-      publisher.start();
-      await flushPromises();
-
-      expect(room.options.videoCaptureDefaults).toMatchObject({
-        deviceId: "front",
-        processor: convertToLivekitProcessor(processor),
-      });
-    });
-
     it.each([
       { enabled: microphone, muted: camera, options: { audio: true } },
       { enabled: camera, muted: microphone, options: { video: true } },

sdk/src/media-backend/livekit/Publisher.ts

@@ -87,10 +87,8 @@ export class Publisher {
     // permission once; the room defaults carry their options. LiveKit
     // resolves these once the track is published, which may block on the
     // connection; LocalTrackPublished is what tells us a track exists.
-    if (sources.has("microphone") && sources.has("camera")) {
-      this.takeCaptureDefaults(requests);
+    if (sources.has("microphone") && sources.has("camera"))
       void this.room.localParticipant.enableCameraAndMicrophone();
-    }
     for (const request of requests)
       if (
         request.source === "screenShare" ||
@@ -101,27 +99,6 @@ export class Publisher {
         });
   }
 
-  /**
-   * Makes the requests the room's capture defaults. The room took its defaults
-   * from the requests at the join, but one made since, such as a camera turned
-   * on before the start, has options of its own: a video processor dropped
-   * here would let the room see the camera before it is applied.
-   */
-  private takeCaptureDefaults(requests: PublishRequest[]): void {
-    const options = this.room.options;
-    for (const request of requests)
-      if (request.source === "microphone")
-        options.audioCaptureDefaults = {
-          ...options.audioCaptureDefaults,
-          ...audioCaptureOptions(request),
-        };
-      else if (request.source === "camera")
-        options.videoCaptureDefaults = {
-          ...options.videoCaptureDefaults,
-          ...videoCaptureOptions(request),
-        };
-  }
-
   /** Publishes one request and resolves with its publication once LiveKit has it. */
   public async publish(
     request: PublishRequest,

sdk/src/media-backend/livekit/auth/index.test.ts

@@ -7,7 +7,7 @@ Please see LICENSE in the repository root for full details.
 
 import { afterEach, describe, expect, it, type Mocked, vi } from "vitest";
 import fetchMock from "fetch-mock";
-import { ConnectionError, MatrixError } from "matrix-js-sdk";
+import { MatrixError } from "matrix-js-sdk";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
 import { type CallMembershipIdentityParts } from "matrix-js-sdk/lib/matrixrtc/EncryptionManager";
@@ -144,26 +144,8 @@ describe("getSFUConfig", () => {
     expect(jwtServiceCalls()).toEqual(["/get_token"]);
   });
 
-  it("uses CS API when subscribing with url + livekit_service_url transport", async () => {
+  it("uses OpenID when subscribing with url + livekit_service_url transport", async () => {
     mockJWTService();
-    expect(
-      await getSFUConfig({
-        ...defaultParams,
-        transport: urlAndServiceUrlTransport,
-      }),
-    ).toEqual(
-      expect.objectContaining({
-        jwt: csApiJWTToken,
-        livekitAlias: "via CS API",
-      }),
-    );
-    expect(client._unstable_getLivekitToken).toHaveBeenCalled();
-    expect(jwtServiceCalls()).toEqual([]);
-  });
-
-  it("falls back to OpenID with url + livekit_service_url transport", async () => {
-    mockJWTService();
-    client._unstable_getLivekitToken.mockRejectedValueOnce(unsupportedError);
     expect(
       await getSFUConfig({
         ...defaultParams,
@@ -175,25 +157,7 @@ describe("getSFUConfig", () => {
         livekitAlias: "via default endpoint",
       }),
     );
-    expect(client._unstable_getLivekitToken).toHaveBeenCalled();
-    expect(jwtServiceCalls()).toEqual(["/get_token"]);
-  });
-
-  it("falls back to OpenID when the widget host refuses the CS API", async () => {
-    mockJWTService();
-    // In widget mode a host without MSC4533 rejects the request before it
-    // reaches the homeserver, with a plain error rather than a Matrix error
-    client._unstable_getLivekitToken.mockRejectedValueOnce(
-      new Error(
-        "The rtc_livekit_get_token action is not supported by the client.",
-      ),
-    );
-    expect(
-      await getSFUConfig({
-        ...defaultParams,
-        transport: urlAndServiceUrlTransport,
-      }),
-    ).toEqual(expect.objectContaining({ jwt: defaultJWTToken }));
+    expect(client._unstable_getLivekitToken).not.toHaveBeenCalled();
     expect(jwtServiceCalls()).toEqual(["/get_token"]);
   });
 
@@ -222,7 +186,7 @@ describe("getSFUConfig", () => {
     expect(jwtServiceCalls()).toEqual([]);
   });
 
-  it("does not fall back to OpenID when publishing", async () => {
+  it("does not fall back to OpenID when publishing with url transport", async () => {
     mockJWTService();
     client._unstable_getLivekitToken.mockRejectedValueOnce(unsupportedError);
     await expect(
@@ -255,33 +219,6 @@ describe("getSFUConfig", () => {
     expect(client._unstable_getLivekitToken).not.toHaveBeenCalled();
     expect(jwtServiceCalls()).toEqual(["/sfu/get"]);
   });
-
-  it("does not fall back to OpenID on connection error", async () => {
-    vi.useFakeTimers();
-    try {
-      mockJWTService();
-      const client_ = {
-        ...client,
-        _unstable_getLivekitToken: vi
-          .fn()
-          .mockRejectedValue(new ConnectionError("No connection")),
-      };
-      await Promise.all([
-        expect(
-          getSFUConfig({
-            ...defaultParams,
-            client: client_,
-            transport: urlAndServiceUrlTransport,
-          }),
-        ).rejects.toThrow(expect.any(ConnectionError)),
-        vi.runAllTimersAsync(), // Allow request to be retried
-      ]);
-      expect(client_._unstable_getLivekitToken).toHaveBeenCalled();
-      expect(jwtServiceCalls()).toEqual([]);
-    } finally {
-      vi.useRealTimers();
-    }
-  });
 });
 
 describe("delegateDelayedLeave", () => {
@@ -362,46 +299,21 @@ describe("delegateDelayedLeave", () => {
 
 describe("chooseAuthFlow", () => {
   it.each([
-    [
-      "url",
-      "publisher",
-      urlTransport,
-      { kind: "csApi", url: urlTransport.url },
-    ],
-    [
-      "url",
-      "subscriber",
-      urlTransport,
-      { kind: "csApi", url: urlTransport.url },
-    ],
+    ["url", urlTransport, { kind: "csApi", url: urlTransport.url }],
     [
       "livekit_service_url",
-      "publisher",
-      serviceUrlTransport,
-      { kind: "openID", serviceUrl },
-    ],
-    [
-      "livekit_service_url",
-      "subscriber",
       serviceUrlTransport,
       { kind: "openID", serviceUrl },
     ],
     [
       "url + livekit_service_url",
-      "publisher",
       urlAndServiceUrlTransport,
       { kind: "openID", serviceUrl },
     ],
-    [
-      "url + livekit_service_url",
-      "subscriber",
-      urlAndServiceUrlTransport,
-      { kind: "csApi", url: urlTransport.url },
-    ],
   ] as const)(
     "chooses the flow for a %s transport as %s",
-    (_shape, role, transport, flow) => {
-      expect(chooseAuthFlow(transport, role)).toEqual(flow);
+    (_shape, transport, flow) => {
+      expect(chooseAuthFlow(transport)).toEqual(flow);
     },
   );
 });

sdk/src/media-backend/livekit/auth/index.ts

@@ -65,7 +65,10 @@ export interface GetSFUConfigParams {
   logger: Logger;
 }
 
-/** Authenticates with a transport, through whichever flow suits it and our role. */
+/**
+ * Gets an {@link SFUConfig} appropriate for connecting to a given transport,
+ * using whichever auth flow is appropriate.
+ */
 export async function getSFUConfig({
   client,
   membership,
@@ -76,48 +79,36 @@ export async function getSFUConfig({
   role,
   logger,
 }: GetSFUConfigParams): Promise<SFUConfig> {
-  const viaOpenID = async (serviceUrl: string): Promise<SFUConfig> =>
-    await openID.getSFUConfig({
+  const flow = chooseAuthFlow(transport);
+  if (flow.kind === "openID") {
+    return await openID.getSFUConfig({
       client,
       membership,
-      serviceUrl,
+      serviceUrl: flow.serviceUrl,
       roomId,
       slotId,
       role,
       logger,
     });
-
-  const flow = chooseAuthFlow(transport, role);
-  if (flow.kind === "openID") return await viaOpenID(flow.serviceUrl);
-
-  try {
-    return await csApi.getSFUConfig({
-      client,
-      membership,
-      url: flow.url,
-      serverName,
-      roomId,
-      slotId,
-    });
-  } catch (e) {
-    // A publisher never falls back: a homeserver that advertises a `url` but
-    // does not implement MSC4195 is misconfigured, and the admin should hear
-    // about it before `livekit_service_url` is deprecated
-    const mayFallBack =
-      role === "subscriber" && "livekit_service_url" in transport;
-    if (mayFallBack && isCsApiUnavailable(e)) {
-      logger.warn(
-        `Cannot use the MSC4195 get_token endpoint (${e}), falling back to the OpenID flow with service ${transport.livekit_service_url}`,
-      );
-      return await viaOpenID(transport.livekit_service_url);
+  } else {
+    try {
+      return await csApi.getSFUConfig({
+        client,
+        membership,
+        url: flow.url,
+        serverName,
+        roomId,
+        slotId,
+      });
+    } catch (e) {
+      if (isEndpointUnsupported(e)) {
+        logger.error(
+          `Homeserver does not support the MSC4195 get_token endpoint, cannot get token for transport ${flow.url}`,
+        );
+        throw new NoMatrix2AuthorizationService(e as Error);
+      }
+      throw e;
     }
-    if (isEndpointUnsupported(e)) {
-      logger.error(
-        `Homeserver does not support the MSC4195 get_token endpoint, cannot get token for transport ${flow.url}`,
-      );
-      throw new NoMatrix2AuthorizationService(e as Error);
-    }
-    throw e;
   }
 }
 
@@ -149,7 +140,7 @@ export async function delegateDelayedLeave({
   delayTimeoutMs,
   logger,
 }: DelegateDelayedLeaveParams): Promise<void> {
-  const flow = chooseAuthFlow(transport, "publisher");
+  const flow = chooseAuthFlow(transport);
   if (flow.kind === "csApi") {
     try {
       await csApi.delegateDelayedLeave({
@@ -190,23 +181,18 @@ export type AuthFlow =
   | { kind: "openID"; serviceUrl: string };
 
 /**
- * Chooses between the MSC4195 client-server API and the OpenID flow against
- * the transport's JWT service.
- *
- * Only the JWT service's `/sfu/get` endpoint assigns the legacy participant
- * identity that clients predating MSC4195 expect from anyone advertising a
- * membership, so a publisher keeps using the JWT service wherever the
- * transport still offers one, even next to a `url`. A subscriber may use the
- * client-server API regardless, as nobody matches its identity.
+ * Chooses which auth flow to use for a given transport. For now this returns a
+ * single auth flow, with no provision for a fallback behavior.
  */
-export function chooseAuthFlow(
-  transport: UnstableLivekitTransport,
-  role: ConnectionRole,
-): AuthFlow {
-  if ("url" in transport) {
-    const useCsApi =
-      !("livekit_service_url" in transport) || role === "subscriber";
-    if (useCsApi) return { kind: "csApi", url: transport.url };
-  }
+export function chooseAuthFlow(transport: UnstableLivekitTransport): AuthFlow {
+  if ("url" in transport && !("livekit_service_url" in transport))
+    return { kind: "csApi", url: transport.url };
+  // All other transports use the OpenID flow, even if they contain a `url`.
+  // This is necessary since the auth flow determines the participant identity
+  // format, and we still have older clients out in the wild which would not yet
+  // know to look for a hashed participant identity in case `url` is present in
+  // someone else's transport.
+  // TODO: Once users have updated their clients, choose the CS API flow if
+  // available, keeping OpenID as a fallback.
   return { kind: "openID", serviceUrl: transport.livekit_service_url };
 }

sdk/src/media-backend/livekit/videoProcessor.test.ts

@@ -47,11 +47,4 @@ describe("convertToLivekitProcessor", () => {
     await adapter.destroy();
     expect(processor.destroy).toHaveBeenCalled();
   });
-
-  it("gives one processor one adapter", () => {
-    const processor = fakeProcessor();
-    expect(convertToLivekitProcessor(processor)).toBe(
-      convertToLivekitProcessor(processor),
-    );
-  });
 });

sdk/src/media-backend/livekit/videoProcessor.ts

@@ -9,24 +9,14 @@ import { type Track, type TrackProcessor } from "livekit-client";
 
 import { type VideoProcessor } from "../../media-api";
 
-const adapters = new WeakMap<
-  VideoProcessor,
-  TrackProcessor<Track.Kind.Video>
->();
-
 /**
  * A `VideoProcessor` as livekit-client wants it. LiveKit reads the processed
  * track off the processor after `init` and `restart` rather than taking it as
  * their result, so the adapter keeps it there.
- *
- * One adapter per processor, so a track can tell that it already runs one: a
- * processor set again would otherwise be torn down and built anew.
  */
 export function convertToLivekitProcessor(
   processor: VideoProcessor,
 ): TrackProcessor<Track.Kind.Video> {
-  const existing = adapters.get(processor);
-  if (existing) return existing;
   const adapter: TrackProcessor<Track.Kind.Video> = {
     name: processor.name,
     init: async (opts) => {
@@ -40,6 +30,5 @@ export function convertToLivekitProcessor(
     },
     destroy: async () => processor.destroy(),
   };
-  adapters.set(processor, adapter);
   return adapter;
 }

sdk/src/utils/array.ts

@@ -0,0 +1,16 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+/**
+ * Determine whether two arrays are equal by shallow comparison.
+ */
+export function shallowEquals<A>(first: A[], second: A[]): boolean {
+  if (first.length !== second.length) return false;
+  for (let i = 0; i < first.length; i++)
+    if (first[i] !== second[i]) return false;
+  return true;
+}

src/App.tsx

@@ -35,7 +35,7 @@ import { ErrorPage, LoadingPage } from "./FullScreenView";
 import { Initializer } from "./initializer";
 import { type WidgetHelpers } from "./widget";
 import { useTheme } from "./useTheme";
-import { BackgroundEffectsProvider } from "./tracks/BackgroundEffectsContext";
+import { ProcessorProvider } from "./tracks/TrackProcessorContext";
 import { type AppViewModel } from "./state/AppViewModel";
 import { MediaDevicesContext } from "./MediaDevicesContext";
 import {
@@ -148,7 +148,7 @@ export const App: FC<Props> = ({ vm, widget }) => {
     loaded && clientReady ? (
       <ClientProvider client={widgetClient}>
         <MediaDevicesContext value={vm.mediaDevices}>
-          <BackgroundEffectsProvider effects={vm.backgroundEffects}>
+          <ProcessorProvider>
             <Sentry.ErrorBoundary
               fallback={(error) => <ErrorPage error={error} />}
             >
@@ -159,7 +159,7 @@ export const App: FC<Props> = ({ vm, widget }) => {
                 <SentryRoute path="*" element={<RoomPage />} />
               </Routes>
             </Sentry.ErrorBoundary>
-          </BackgroundEffectsProvider>
+          </ProcessorProvider>
         </MediaDevicesContext>
       </ClientProvider>
     ) : (

src/components/CallFooterViewModel.test.ts

@@ -14,10 +14,7 @@ import type { CallViewModel } from "../state/CallViewModel/CallViewModel";
 import type { Alignment, Layout } from "../state/layout-types";
 import type { SpotlightTileViewModel } from "../state/TileViewModel";
 import type { DeviceLabel } from "../state/MediaDevices";
-import {
-  createCallFooterViewModel,
-  createLobbyFooterViewModel,
-} from "./CallFooterViewModel";
+import { createCallFooterViewModel } from "./CallFooterViewModel";
 import { HeaderStyle } from "../UrlParams";
 
 const platformMock = vi.hoisted(() => vi.fn(() => "desktop"));
@@ -27,10 +24,10 @@ vi.mock("../Platform", () => ({
   },
 }));
 
-// The SDK's own check needs WebGL and canvas APIs jsdom does not have.
-const sdkSupportMock = vi.hoisted(() => vi.fn(() => false));
+// Prevent supportsBackgroundProcessors from throwing in jsdom – it is not
+// exercised by these tests (only used in `videoToggles`, not `videoOptions`).
 vi.mock("@livekit/track-processors", () => ({
-  supportsBackgroundProcessors: (): boolean => sdkSupportMock(),
+  supportsBackgroundProcessors: (): boolean => false,
 }));
 
 const outputSelectionMock = vi.hoisted(() => vi.fn(() => true));
@@ -225,55 +222,4 @@ describe("createCallFooterViewModel", () => {
       ]);
     });
   });
-
-  describe("background effects", () => {
-    // The lobby, because in a call the whole device switcher is already
-    // withheld on a phone, whatever the verdict says.
-    function lobbyOn(
-      platform: string,
-    ): ReturnType<typeof createLobbyFooterViewModel> {
-      platformMock.mockReturnValue(platform);
-      return createLobbyFooterViewModel(
-        testScope(),
-        mockMuteStates(),
-        twoMicsAndOneCamMediaDevices,
-        /* openSettings */ undefined,
-        /* hangup */ undefined,
-        /* showLogo */ false,
-      );
-    }
-
-    it("offers nothing on a phone, where the pipeline would refuse them", () => {
-      sdkSupportMock.mockReturnValue(true);
-      expect(lobbyOn("ios").toggleBlur$.value).toBeUndefined();
-    });
-
-    it("offers them where the pipeline will honour them", () => {
-      sdkSupportMock.mockReturnValue(true);
-      expect(lobbyOn("desktop").toggleBlur$.value).toBeDefined();
-    });
-
-    it("offers nothing where the browser itself cannot run them", () => {
-      sdkSupportMock.mockReturnValue(false);
-      expect(lobbyOn("desktop").toggleBlur$.value).toBeUndefined();
-    });
-
-    it("availability is the same before and during a call", () => {
-      for (const supported of [true, false]) {
-        sdkSupportMock.mockReturnValue(supported);
-        const lobby = lobbyOn("desktop");
-        const inCall = createCallFooterViewModel(
-          testScope(),
-          buildMinimalCallViewModel(gridLayout),
-          mockMuteStates(),
-          twoMicsAndOneCamMediaDevices,
-          /* reactionIdentifier */ undefined,
-          { showControls: true, header: HeaderStyle.Standard },
-        );
-        const offeredInLobby = lobby.toggleBlur$.value !== undefined;
-        expect(inCall.toggleBlur$.value !== undefined).toBe(offeredInLobby);
-        expect(offeredInLobby).toBe(supported);
-      }
-    });
-  });
 });

src/components/CallFooterViewModel.tsx

@@ -6,16 +6,14 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { combineLatest, map, type Observable, switchMap } from "rxjs";
+import { supportsBackgroundProcessors } from "@livekit/track-processors";
 import { supportsAudioOutputSelection } from "livekit-client";
 
-import { supportsBackgroundProcessors } from "../tracks/backgroundProcessing";
-import { parseEffect } from "../tracks/backgroundEffects";
-
 import { type CallViewModel } from "../state/CallViewModel/CallViewModel";
 import { type MenuOptions } from "./MediaMuteAndSwitchButton";
 import { type MediaDevices } from "../state/MediaDevices";
 import {
-  backgroundEffect as backgroundEffectSetting,
+  backgroundBlur as backgroundBlurSettings,
   debugTileLayout as debugTileLayoutSetting,
 } from "../settings/settings";
 import { type Behavior, constant } from "../state/Behavior";
@@ -94,11 +92,6 @@ function buildDeviceBehaviors(
       ),
     );
 
-  const blurOn$ = scope.behavior(
-    backgroundEffectSetting.value$.pipe(
-      map((raw) => parseEffect(raw).kind === "blur"),
-    ),
-  );
   return {
     audioOptions$: scope.behavior(options$(mediaDevices.audioInput.available$)),
     selectedAudio$: scope.behavior(
@@ -124,17 +117,17 @@ function buildDeviceBehaviors(
     ),
     selectVideoButtonOption$: constant(mediaDevices.videoInput.select),
     toggleBlur$: scope.behavior(
-      combineLatest([blurOn$, disableSwitcher$]).pipe(
+      combineLatest([backgroundBlurSettings.value$, disableSwitcher$]).pipe(
         map(([current, switcherDisabled]) => {
           return !switcherDisabled && supportsBackgroundProcessors()
             ? (): void => {
-                backgroundEffectSetting.setValue(current ? "none" : "blur");
+                backgroundBlurSettings.setValue(!current);
               }
             : undefined;
         }),
       ),
     ),
-    videoBlurEnabled$: blurOn$,
+    videoBlurEnabled$: backgroundBlurSettings.value$,
   };
 }
 

src/components/MediaMuteAndSwitchButton.module.css

@@ -36,17 +36,20 @@ Please see LICENSE in the repository root for full details.
   }
 }
 
-/* The width design sets: a long device name wraps. */
 .menu {
-  inline-size: 296px;
+  display: flex;
+  flex-direction: column;
 }
 
-/* Its share of the measured call area: the menu is portalled out of the root,
-   so CSS can't size it against the call. */
+/* Only the device lists scroll, bounded by the measured call area: the menu is
+   portalled out of the root, so CSS can't size it against the call. */
 .deviceList {
+  overflow-y: auto;
+  min-block-size: 0;
   max-block-size: var(--device-list-max-height);
-  /* Keeps a row reached by keyboard clear of the sticky heading. */
-  scroll-padding-block-start: var(--device-list-scroll-padding-start, 0);
+  /* Keeps a row reached by keyboard clear of the sticky heading and meter. */
+  scroll-padding-block: var(--device-list-scroll-padding-start, 0)
+    var(--device-list-scroll-padding-end, 0);
 }
 
 /* Compound's heading rule heads each section; the design adds space below it. */
@@ -59,38 +62,23 @@ Please see LICENSE in the repository root for full details.
   margin-block-start: var(--cpd-space-7x);
 }
 
-/* Sticky within its own section, and opaque so rows scroll under it. */
+/* Sticky within its own section. Opaque and inset a border width so it doesn't
+   paint over the menu's outline. */
 .sectionHeading {
   position: sticky;
   inset-block-start: 0;
   background: var(--cpd-color-bg-canvas-default);
+  margin-inline: var(--cpd-border-width-1);
+  margin-block-start: var(--cpd-border-width-1);
 }
 
-/* Sticky at the foot of the microphone section; opaque as above. */
+/* Sticky at the foot of the microphone section; opaque and inset as above. */
 .stickyMeter {
   position: sticky;
   inset-block-end: 0;
   background: var(--cpd-color-bg-canvas-default);
-}
-
-/* Fills the band between the meter and the frame, or rows show through it. */
-.stickyMeter::after {
-  content: "";
-  position: absolute;
-  inset-inline: 0;
-  inset-block-start: 100%;
-  block-size: var(--cpd-menu-padding-block-end, 0px);
-  background: var(--cpd-color-bg-canvas-default);
-}
-
-/* Not Compound's fade: that stays at the edge while a bounce carries the meter.
-   This one starts at the chevron, below the meter at rest. */
-.deviceList.deviceListWithMeter[data-more-below] {
-  mask-image: linear-gradient(
-    to bottom,
-    #000 calc(100% - var(--cpd-space-6x)),
-    transparent calc(100% - var(--cpd-space-3x))
-  );
+  margin-inline: var(--cpd-border-width-1);
+  margin-block-end: var(--cpd-border-width-1);
 }
 
 /* Radix focuses whatever the pointer is over, so the browser's ring would

src/components/MediaMuteAndSwitchButton.stories.tsx

@@ -65,10 +65,8 @@ const WithACallArea: FC<{ children: ReactNode }> = ({ children }) => {
     <div
       ref={setCallArea}
       style={{
-        // A call's size: anything smaller makes a short device list scroll, and
-        // a narrower one narrows the menu.
+        // A call's size: anything smaller makes a short device list scroll.
         blockSize: 720,
-        inlineSize: 1024,
         display: "flex",
         alignItems: "flex-end",
         justifyContent: "center",
@@ -258,37 +256,6 @@ export const SpeakerAndMicrophoneSections: Story = {
   },
 };
 
-/** A long name wraps rather than widening the menu, which design sets. */
-export const LongDeviceNameWraps: Story = {
-  args: {
-    ...SpeakerAndMicrophoneSections.args,
-    outputOptions: [
-      {
-        label: {
-          type: "name",
-          name: "Logitech BRIO 4K Ultra HD Pro Business Webcam Speakers (046d:085e)",
-        },
-        id: "long",
-      },
-      { label: { type: "name", name: "Headset" }, id: "spk2" },
-    ],
-    selectedOutputOption: "long",
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    await userEvent.click(canvas.getByRole("button", { name: "Microphone" }));
-    const body = within(document.body);
-    const long = await body.findByRole("menuitemradio", { name: /Logitech/ });
-    const short = await body.findByRole("menuitemradio", { name: "Headset" });
-
-    const menu = document.body.querySelector("[role='menu']")!;
-    await expect(Math.round(menu.getBoundingClientRect().width)).toBe(296);
-    await expect(long.getBoundingClientRect().height).toBeGreaterThan(
-      short.getBoundingClientRect().height,
-    );
-  },
-};
-
 export const OutputCannotBeChosen: Story = {
   args: {
     ...Default.args,
@@ -469,6 +436,10 @@ export const ManyDevices: Story = {
       .getBoundingClientRect();
     await expect(frame.top).toBeGreaterThanOrEqual(0);
     await expect(frame.bottom).toBeLessThanOrEqual(window.innerHeight + 1);
+
+    // The meter is the menu's one opaque part, so it must stay inside the frame.
+    await expect(pinned.left).toBeGreaterThan(frame.left);
+    await expect(pinned.right).toBeLessThan(frame.right);
   },
 };
 
@@ -636,6 +607,13 @@ export const HeadingsStayWhileScrolling: Story = {
     await expect(heading.getBoundingClientRect().bottom).toBeGreaterThan(
       scrollport.top,
     );
+    // Clear of the menu's frame.
+    const frame = document.body
+      .querySelector("[role='menu']")!
+      .getBoundingClientRect();
+    await expect(heading.getBoundingClientRect().left).toBeGreaterThan(
+      frame.left,
+    );
   },
 };
 

src/components/MediaMuteAndSwitchButton.tsx

@@ -17,7 +17,6 @@ import {
   Button,
   Menu,
   MenuItem,
-  MenuScrollArea,
   MenuTitle,
   RadioInput,
   ToggleMenuItem,
@@ -85,9 +84,6 @@ const LIST_SHARE_OF_CALL = 0.6;
 /** Smallest device list height in px, so a short call still shows more than one device. */
 const MIN_LIST_HEIGHT = 160;
 
-/** Space kept between the menu and the call area's sides. */
-const MENU_MARGIN = 16;
-
 export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
   enabled,
   busy,
@@ -330,8 +326,6 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
         open={menuOpen}
         onOpenChange={onOpenChange}
         side="top"
-        collisionBoundary={rootElement}
-        collisionPadding={MENU_MARGIN}
         trigger={
           <Button
             iconOnly
@@ -346,22 +340,18 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
           />
         }
       >
-        <MenuScrollArea
+        <div
           ref={trackFocusSource}
-          className={classNames(styles.deviceList, {
-            [styles.deviceListWithMeter]: iconsAndLabels === "audio",
-          })}
+          // Keeps the items the menu's own children for assistive tech.
+          role="none"
+          className={styles.deviceList}
           data-testid="device-list"
           style={
             {
               "--device-list-max-height":
                 listMaxHeight === undefined ? undefined : `${listMaxHeight}px`,
-              // A row reached by keyboard stays above the meter and the band its
-              // ground fills.
-              scrollPaddingBlockEnd:
-                meterHeight === undefined
-                  ? undefined
-                  : `calc(${meterHeight}px + var(--cpd-menu-padding-block-end, 0px))`,
+              "--device-list-scroll-padding-end":
+                meterHeight === undefined ? undefined : `${meterHeight}px`,
               "--device-list-scroll-padding-start":
                 headingHeight === undefined ? undefined : `${headingHeight}px`,
             } as CSSProperties
@@ -409,7 +399,7 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
               )}
             </div>
           </div>
-        </MenuScrollArea>
+        </div>
         {toggles.length > 0 && <hr />}
         {toggles.map((toggle) => (
           <ToggleMenuItem

src/components/MicrophoneLevelMeter.module.css

@@ -16,10 +16,10 @@ Please see LICENSE in the repository root for full details.
   align-items: center;
   gap: var(--cpd-space-3x);
   padding-block: var(--cpd-space-2x);
-  /* Centres the icon on the radio column: less half the icon's extra width.
-     Checked in the MeterAlignsWithTheDeviceRows story. */
+  /* Centres the icon on the radio column: less the row's inset border and half
+     the icon's extra width. Checked in the MeterAlignsWithTheDeviceRows story. */
   padding-inline-start: calc(
-    var(--cpd-space-4x) -
+    var(--cpd-space-4x) - var(--cpd-border-width-1) -
       (var(--meter-icon-size) - var(--device-control-size)) / 2
   );
   padding-inline-end: calc(var(--cpd-space-4x) * 2 + var(--cpd-space-2x));

src/room/CallView.test.tsx

@@ -50,7 +50,6 @@ import {
   mockMediaDevices,
   mockRtcMembership,
   MockRTCSession,
-  testScope,
 } from "../utils/test";
 import { CallView } from "./CallView";
 import { GroupCallErrorBoundary } from "./GroupCallErrorBoundary";
@@ -62,10 +61,7 @@ import {
 } from "../HostBridge";
 import { type JoinCallData } from "../widget";
 import { MatrixRTCTransportMissingError } from "../utils/errors";
-import {
-  BackgroundEffectsProvider,
-  createAppBackgroundEffects,
-} from "../tracks/BackgroundEffectsContext";
+import { ProcessorProvider } from "../tracks/TrackProcessorContext";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { constant } from "../state/Behavior";
 
@@ -197,9 +193,7 @@ function createCallView(
       <HostBridgeProvider value={hostBridge}>
         <TooltipProvider>
           <MediaDevicesContext value={mockMediaDevices({})}>
-            <BackgroundEffectsProvider
-              effects={createAppBackgroundEffects(testScope())}
-            >
+            <ProcessorProvider>
               {options.withErrorBoundary ? (
                 <GroupCallErrorBoundary recoveryActionHandler={vi.fn()}>
                   {callView}
@@ -207,7 +201,7 @@ function createCallView(
               ) : (
                 callView
               )}
-            </BackgroundEffectsProvider>
+            </ProcessorProvider>
           </MediaDevicesContext>
         </TooltipProvider>
       </HostBridgeProvider>

src/room/InCallView.test.tsx

@@ -28,7 +28,6 @@ import {
   type MockRTCSession,
   mockRTCSlot,
   mockRTCMember,
-  testScope,
 } from "../utils/test";
 import { E2eeType } from "../e2ee/e2eeType";
 import {
@@ -49,10 +48,7 @@ import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices";
 import { AppBar } from "../AppBar";
 import { type MatrixInfo } from "./VideoPreview";
-import {
-  BackgroundEffectsProvider,
-  createAppBackgroundEffects,
-} from "../tracks/BackgroundEffectsContext";
+import { ProcessorProvider } from "../tracks/TrackProcessorContext";
 import { initializeWidget } from "../widget";
 import { RootElementProvider } from "../RootElementContext";
 
@@ -238,9 +234,7 @@ describe("ActiveCall", () => {
     const { findByTestId } = render(
       <BrowserRouter>
         <MediaDevicesContext value={mediaDevices}>
-          <BackgroundEffectsProvider
-            effects={createAppBackgroundEffects(testScope())}
-          >
+          <ProcessorProvider>
             <TooltipProvider>
               <ActiveCall
                 client={matrixRoom.client}
@@ -253,7 +247,7 @@ describe("ActiveCall", () => {
                 onLeft={(): void => {}}
               />
             </TooltipProvider>
-          </BackgroundEffectsProvider>
+          </ProcessorProvider>
         </MediaDevicesContext>
       </BrowserRouter>,
     );
@@ -288,9 +282,7 @@ describe("ActiveCall", () => {
         <BrowserRouter>
           <RootElementProvider value={root}>
             <MediaDevicesContext value={mediaDevices}>
-              <BackgroundEffectsProvider
-                effects={createAppBackgroundEffects(testScope())}
-              >
+              <ProcessorProvider>
                 <TooltipProvider>
                   <ActiveCall
                     client={matrixRoom.client}
@@ -303,7 +295,7 @@ describe("ActiveCall", () => {
                     onLeft={(): void => {}}
                   />
                 </TooltipProvider>
-              </BackgroundEffectsProvider>
+              </ProcessorProvider>
             </MediaDevicesContext>
           </RootElementProvider>
         </BrowserRouter>,

src/room/InCallView.tsx

@@ -109,7 +109,7 @@ import { useBehavior } from "../useBehavior.ts";
 import { useValueBehavior } from "../useValueBehavior.ts";
 import { Toast } from "../Toast.tsx";
 import overlayStyles from "../Overlay.module.css";
-import { useBackgroundEffectsState$ } from "../tracks/BackgroundEffectsContext.tsx";
+import { useTrackProcessorState$ } from "../tracks/TrackProcessorContext.tsx";
 import { type Layout } from "../state/layout-types.ts";
 import { ObservableScope } from "../state/ObservableScope.ts";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter.tsx";
@@ -150,7 +150,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
   const urlParams = useUrlParams();
   const hostBridge = useHostBridge();
   const mediaDevices = useMediaDevices();
-  const backgroundEffectsState$ = useBackgroundEffectsState$();
+  const trackProcessorState$ = useTrackProcessorState$();
   // The element we have to draw the call in: the page, or the container a host
   // gave us. Its size, not the window's, decides how the call is laid out.
   const rootElement = useRootElement();
@@ -170,12 +170,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     );
     const rtcParticipation = slot.join({
       ...rtcParticipationOptions(urlParams),
-      publish: initialPublishRequests(
-        props.muteStates,
-        mediaDevices,
-        capture,
-        backgroundEffectsState$.value.processor,
-      ),
+      publish: initialPublishRequests(props.muteStates, mediaDevices, capture),
     });
 
     const vm = createCallViewModel$(
@@ -189,7 +184,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
         encryptionSystem: props.e2eeSystem,
         capture,
         videoProcessor$: scope.behavior(
-          backgroundEffectsState$.pipe(map((state) => state.processor)),
+          trackProcessorState$.pipe(map((state) => state.processor)),
         ),
         hostBridge,
         autoLeaveWhenOthersLeft,
@@ -219,7 +214,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     urlParams,
     hostBridge,
     mediaDevices,
-    backgroundEffectsState$,
+    trackProcessorState$,
     props.client,
     rootElement,
   ]);
@@ -250,7 +245,7 @@ export const ActiveCall: FC<ActiveCallProps> = (props) => {
     props.onLeft,
     urlParams,
     mediaDevices,
-    backgroundEffectsState$,
+    trackProcessorState$,
     props.client,
     vm,
   ]);

src/room/KnockLobbyView.test.tsx

@@ -14,19 +14,19 @@ import { type MatrixClient, type RoomSummary } from "matrix-js-sdk";
 import { KnockLobbyView } from "./KnockLobbyView";
 import { LeaveToHomeProvider } from "../LeaveToHomeContext";
 import { MediaDevicesContext } from "../MediaDevicesContext";
-import { type BackgroundEffectsState } from "../tracks/BackgroundEffectsContext";
+import { type ProcessorState } from "../tracks/TrackProcessorContext";
 import { mockMediaDevices } from "../utils/test";
 
 vi.mock("@livekit/components-react", () => ({
   usePreviewTracks: (): unknown[] => [],
 }));
 
-vi.mock("../tracks/BackgroundEffectsContext", () => ({
-  useBackgroundEffects: (): BackgroundEffectsState => ({
+vi.mock("../tracks/TrackProcessorContext", () => ({
+  useTrackProcessor: (): ProcessorState => ({
     supported: false,
     processor: undefined,
   }),
-  useSyncBackgroundEffects: (): void => {},
+  useTrackProcessorSync: (): void => {},
 }));
 
 vi.mock("react-use-measure", () => ({

src/room/LobbyView.test.tsx

@@ -28,7 +28,7 @@ import {
 } from "../utils/test";
 import { type MediaDevices } from "../state/MediaDevices";
 import { MediaDevicesContext } from "../MediaDevicesContext";
-import { type BackgroundEffectsState } from "../tracks/BackgroundEffectsContext";
+import { type ProcessorState } from "../tracks/TrackProcessorContext";
 import { type EncryptionSystem } from "../e2ee/sharedKeyManagement";
 import lobbyStyles from "./LobbyView.module.css";
 import headerStyles from "../Header.module.css";
@@ -41,12 +41,12 @@ vi.mock("@livekit/components-react", () => ({
   usePreviewTracks: (): unknown[] => [],
 }));
 
-vi.mock("../tracks/BackgroundEffectsContext", () => ({
-  useBackgroundEffects: (): BackgroundEffectsState => ({
+vi.mock("../tracks/TrackProcessorContext", () => ({
+  useTrackProcessor: (): ProcessorState => ({
     supported: false,
     processor: undefined,
   }),
-  useSyncBackgroundEffects: (): void => {},
+  useTrackProcessorSync: (): void => {},
 }));
 
 vi.mock("react-use-measure", () => ({

src/room/LobbyView.tsx

@@ -41,9 +41,9 @@ import { useMediaDevices } from "../MediaDevicesContext";
 import { ObservableScope } from "../state/ObservableScope";
 import { useInitial } from "../useInitial";
 import {
-  useBackgroundEffects,
-  useSyncBackgroundEffects,
-} from "../tracks/BackgroundEffectsContext";
+  useTrackProcessor,
+  useTrackProcessorSync,
+} from "../tracks/TrackProcessorContext";
 import { getValue } from "../utils/observable";
 import { useBehavior } from "../useBehavior";
 import { CallFooter, type FooterSnapshot } from "../components/CallFooter";
@@ -137,7 +137,7 @@ export const LobbyView: FC<Props> = ({
       },
   );
 
-  const { processor } = useBackgroundEffects();
+  const { processor } = useTrackProcessor();
 
   const initialProcessor = useInitial(() => processor);
   const localTrackOptions = useMemo<CreateLocalTracksOptions>(
@@ -185,7 +185,7 @@ export const LobbyView: FC<Props> = ({
     }
   }, [devices, videoInputId, videoTrack]);
 
-  useSyncBackgroundEffects(videoTrack);
+  useTrackProcessorSync(videoTrack);
 
   const [footerVm, setFooterVm] = useState<ViewModel<FooterSnapshot> | null>(
     null,

src/settings/SettingsModal.test.tsx

@@ -1,93 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { type MatrixClient } from "matrix-js-sdk";
-import { TooltipProvider } from "@vector-im/compound-web";
-
-import { SettingsModal } from "./SettingsModal";
-import { backgroundEffect } from "./settings";
-import { MediaDevicesContext } from "../MediaDevicesContext";
-import { type BackgroundEffectsState } from "../tracks/BackgroundEffectsContext";
-import { mockMediaDevices } from "../utils/test";
-import { constant } from "../state/Behavior";
-import { type MediaDevices } from "../state/MediaDevices";
-
-vi.mock("../tracks/BackgroundEffectsContext", () => ({
-  useBackgroundEffects: (): BackgroundEffectsState => ({
-    supported: true,
-    processor: undefined,
-  }),
-}));
-
-// Behaviors, as the device menus read them.
-const noDevices = {
-  available$: constant(new Map()),
-  selected$: constant(undefined),
-  select: vi.fn(),
-};
-
-function renderVideoTab(): void {
-  render(
-    <TooltipProvider>
-      <MediaDevicesContext
-        value={mockMediaDevices({
-          requestDeviceNames: vi.fn(),
-          audioInput: noDevices,
-          audioOutput: noDevices,
-          videoInput: noDevices,
-        } as unknown as Partial<MediaDevices>)}
-      >
-        <SettingsModal
-          open
-          onDismiss={vi.fn()}
-          tab="video"
-          onTabChange={vi.fn()}
-          client={
-            {
-              getUserId: () => "@user:example.org",
-              getUser: () => null,
-            } as unknown as MatrixClient
-          }
-        />
-      </MediaDevicesContext>
-    </TooltipProvider>,
-  );
-}
-
-const blurControl = (): HTMLElement =>
-  screen.getByRole("checkbox", { name: "Blur the background of the video" });
-
-describe("SettingsModal", () => {
-  afterEach(() => backgroundEffect.setValue("none"));
-
-  it("blur control turns blur on and off", async () => {
-    const user = userEvent.setup();
-    renderVideoTab();
-    expect(blurControl()).not.toBeChecked();
-
-    await user.click(blurControl());
-    expect(backgroundEffect.getValue()).toBe("blur");
-    expect(blurControl()).toBeChecked();
-
-    await user.click(blurControl());
-    expect(backgroundEffect.getValue()).toBe("none");
-    expect(blurControl()).not.toBeChecked();
-  });
-
-  it("blur control reflects and replaces an image background", async () => {
-    const user = userEvent.setup();
-    backgroundEffect.setValue("image:arc");
-    renderVideoTab();
-    expect(blurControl()).not.toBeChecked();
-
-    await user.click(blurControl());
-    expect(backgroundEffect.getValue()).toBe("blur");
-  });
-});

src/settings/SettingsModal.tsx

@@ -21,14 +21,13 @@ import { useHostBridge } from "../HostBridge";
 import {
   useSetting,
   soundEffectVolume as soundEffectVolumeSetting,
-  backgroundEffect as backgroundEffectSetting,
+  backgroundBlur as backgroundBlurSetting,
   developerMode,
 } from "./settings";
 import { PreferencesSettingsTab } from "./PreferencesSettingsTab";
 import { Slider } from "../Slider";
 import { DeviceSelection } from "./DeviceSelection";
-import { useBackgroundEffects } from "../tracks/BackgroundEffectsContext";
-import { parseEffect, serializeEffect } from "../tracks/backgroundEffects";
+import { useTrackProcessor } from "../tracks/TrackProcessorContext";
 import {
   DeveloperSettingsTab,
   type DeveloperSettingsSnapshot,
@@ -79,11 +78,9 @@ export const SettingsModal: FC<Props> = ({
 
   // Generate a `Checkbox` input to turn blur on or off.
   const BlurCheckbox: React.FC = (): ReactNode => {
-    const { supported } = useBackgroundEffects();
+    const { supported } = useTrackProcessor();
 
-    // The camera menu's setting, of which this control sees only blur.
-    const [effect, setEffect] = useSetting(backgroundEffectSetting);
-    const blurActive = parseEffect(effect).kind === "blur";
+    const [blurActive, setBlurActive] = useSetting(backgroundBlurSetting);
 
     return (
       <>
@@ -97,12 +94,8 @@ export const SettingsModal: FC<Props> = ({
               supported ? "" : t("settings.blur_not_supported_by_browser")
             }
             type="checkbox"
-            checked={blurActive}
-            onChange={(b): void =>
-              setEffect(
-                serializeEffect({ kind: b.target.checked ? "blur" : "none" }),
-              )
-            }
+            checked={!!blurActive}
+            onChange={(b): void => setBlurActive(b.target.checked)}
             disabled={!supported}
           />
         </FieldRow>

src/settings/settings.ts

@@ -13,7 +13,6 @@ import { type Behavior } from "../state/Behavior";
 import { useBehavior } from "../useBehavior";
 import { MatrixRTCMode } from "../config/ConfigOptions";
 import { type UnstableLivekitTransport } from "matrix-js-sdk/lib/matrixrtc";
-import { type EffectId } from "../tracks/backgroundEffects";
 
 export class Setting<T> {
   public constructor(
@@ -117,14 +116,7 @@ export const videoInput = new Setting<string | undefined>(
   undefined,
 );
 
-// Only read, to carry blur over for anyone who had it on.
-const backgroundBlur = new Setting<boolean>("background-blur", false);
-
-/** The chosen background effect, in the form `parseEffect` reads. */
-export const backgroundEffect = new Setting<EffectId>(
-  "background-effect",
-  backgroundBlur.getValue() ? "blur" : "none",
-);
+export const backgroundBlur = new Setting<boolean>("background-blur", false);
 
 export const showHandRaisedTimer = new Setting<boolean>(
   "hand-raised-show-timer",

src/state/AppViewModel.ts

@@ -6,7 +6,6 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type AudioOutputOptions, MediaDevices } from "./MediaDevices";
-import { createAppBackgroundEffects } from "../tracks/BackgroundEffectsContext";
 import { type ObservableScope } from "./ObservableScope";
 
 /**
@@ -17,7 +16,6 @@ export class AppViewModel {
     this.scope,
     this.audioOutputOptions,
   );
-  public readonly backgroundEffects = createAppBackgroundEffects(this.scope);
 
   // TODO: Move more application logic here. The CallViewModel, at the very
   // least, ought to be accessible from this object.

src/state/BackgroundEffects.test.ts

@@ -1,156 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { BehaviorSubject, distinctUntilChanged, map } from "rxjs";
-import { type BackgroundProcessorWrapper } from "@livekit/track-processors";
-
-import {
-  type BackgroundEffects,
-  createBackgroundEffects,
-  type BackgroundEffectsOptions,
-} from "./BackgroundEffects";
-import { type BackgroundEffectsState } from "../tracks/BackgroundEffectsContext";
-import { shippedBackgrounds } from "../tracks/backgroundEffects";
-import { flushPromises, testScope, withTestScheduler } from "../utils/test";
-
-/** A pipeline that records what it is switched to. */
-function fakePipeline(): {
-  pipeline: BackgroundProcessorWrapper;
-  switches: unknown[];
-  /** Holds the next switch until it resolves, as a picture loading does. */
-  holdNext: () => () => void;
-} {
-  const switches: unknown[] = [];
-  let slow: Promise<void> | undefined;
-  const pipeline = {
-    switchTo: vi.fn(async (options: unknown) => {
-      switches.push(options);
-      const held = slow;
-      slow = undefined;
-      await held;
-    }),
-  } as unknown as BackgroundProcessorWrapper;
-  return {
-    pipeline,
-    switches,
-    holdNext: () => {
-      let release!: () => void;
-      slow = new Promise((resolve) => (release = resolve));
-      return release;
-    },
-  };
-}
-
-/** One letter per state: idle, attached. */
-function letter(state: BackgroundEffectsState): string {
-  return state.processor === undefined ? "i" : "a";
-}
-
-describe("the pipeline's state", () => {
-  function testState({
-    effect,
-    expected,
-  }: {
-    effect: string;
-    expected: string;
-  }): void {
-    withTestScheduler(({ behavior, expectObservable }) => {
-      const effects = createBackgroundEffects(testScope(), {
-        supported: true,
-        effect$: behavior(effect, { n: "none", b: "blur" }),
-        pipeline: fakePipeline().pipeline,
-      });
-      expectObservable(
-        effects.state$.pipe(map(letter), distinctUntilChanged()),
-      ).toBe(expected);
-    });
-  }
-
-  it("defaults to no effect", () => testState({ effect: "n", expected: "i" }));
-
-  it("attaches on first use and stays attached", () =>
-    testState({ effect: "nbn", expected: "ia" }));
-});
-
-describe("background effects", () => {
-  let effect$: BehaviorSubject<string>;
-  let fake: ReturnType<typeof fakePipeline>;
-
-  function build(
-    options: Partial<BackgroundEffectsOptions> = {},
-  ): BackgroundEffects {
-    return createBackgroundEffects(testScope(), {
-      supported: true,
-      effect$,
-      pipeline: fake.pipeline,
-      ...options,
-    });
-  }
-  const choose = async (raw: string): Promise<void> => {
-    effect$.next(raw);
-    await flushPromises();
-  };
-  const blur = async (on: boolean): Promise<void> =>
-    choose(on ? "blur" : "none");
-
-  beforeEach(() => {
-    effect$ = new BehaviorSubject("none");
-    fake = fakePipeline();
-  });
-
-  it("puts a shipped background on as that picture", async () => {
-    build();
-    await choose(`image:${shippedBackgrounds[0].id}`);
-    expect(fake.switches).toEqual([
-      {
-        mode: "virtual-background",
-        imagePath: shippedBackgrounds[0].imagePath,
-      },
-    ]);
-  });
-
-  it("switches in place rather than reattaching", async () => {
-    const effects = build();
-    await blur(true);
-    const pipeline = effects.state$.value.processor;
-    await blur(false);
-    await blur(true);
-
-    expect(effects.state$.value.processor).toBe(pipeline);
-    expect(fake.switches).toEqual([
-      { mode: "background-blur", blurRadius: 15 },
-      { mode: "disabled" },
-      { mode: "background-blur", blurRadius: 15 },
-    ]);
-  });
-
-  it("keeps switching after a switch fails", async () => {
-    vi.mocked(fake.pipeline.switchTo).mockRejectedValueOnce(new Error("lost"));
-    build();
-    await blur(true);
-    await blur(false);
-    expect(fake.switches).toEqual([{ mode: "disabled" }]);
-  });
-
-  it("switches one at a time, skipping those overtaken", async () => {
-    const finished = fake.holdNext();
-    build();
-    await blur(true);
-    await blur(false);
-    await blur(true);
-    await blur(false);
-    expect(fake.switches).toHaveLength(1);
-
-    finished();
-    await flushPromises();
-    expect(fake.switches).toEqual([
-      { mode: "background-blur", blurRadius: 15 },
-      { mode: "disabled" },
-    ]);
-  });
-});

src/state/BackgroundEffects.ts

@@ -1,109 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { combineLatest, distinctUntilChanged, map, scan } from "rxjs";
-import {
-  type BackgroundProcessorWrapper,
-  type SwitchBackgroundProcessorOptions,
-} from "@livekit/track-processors";
-import { logger } from "matrix-js-sdk/lib/logger";
-import { deepCompare } from "matrix-js-sdk/lib/utils";
-
-import { type Behavior } from "./Behavior";
-import { type ObservableScope } from "./ObservableScope";
-import {
-  fromLivekitProcessor,
-  type BackgroundEffectsState,
-} from "../tracks/BackgroundEffectsContext";
-import {
-  type BackgroundEffect,
-  blurRadius,
-  imagePathFor,
-  parseEffect,
-} from "../tracks/backgroundEffects";
-
-export interface BackgroundEffectsOptions {
-  /** Whether this browser can run a pipeline at all. */
-  supported: boolean;
-  /** The effect chosen, as the setting stores it. */
-  effect$: Behavior<string>;
-  /** The background processor pipeline to be switched between effects. */
-  pipeline: BackgroundProcessorWrapper;
-}
-
-/** The background effect pipeline, as the camera tracks and the menus see it. */
-export interface BackgroundEffects {
-  readonly state$: Behavior<BackgroundEffectsState>;
-}
-
-/** Switches the pipeline as the choice changes, for as long as the scope lasts. */
-export function createBackgroundEffects(
-  scope: ObservableScope,
-  { supported, effect$, pipeline }: BackgroundEffectsOptions,
-): BackgroundEffects {
-  // Wrapped once, so the call and the preview see one processor throughout.
-  const processor = fromLivekitProcessor(pipeline);
-  const choice$ = effect$.pipe(map(parseEffect));
-  const wanted$ = choice$.pipe(
-    map((effect) => effect.kind !== "none"),
-    distinctUntilChanged(),
-  );
-
-  const state$ = scope.behavior(
-    wanted$.pipe(
-      scan<boolean, BackgroundEffectsState>(
-        (previous, wanted) => {
-          // Attached the first time an effect is wanted and never detached
-          // after, so someone who never turns one on pays for none of it.
-          const enable =
-            previous.processor !== undefined || (supported && wanted);
-          return { supported, processor: enable ? processor : undefined };
-        },
-        { supported, processor: undefined },
-      ),
-    ),
-  );
-
-  const switchOptions$ = scope.behavior<
-    SwitchBackgroundProcessorOptions | undefined
-  >(
-    combineLatest([state$, choice$]).pipe(
-      map(([{ processor }, effect]) =>
-        processor === undefined ? undefined : switchOptionsFor(effect),
-      ),
-      distinctUntilChanged(deepCompare),
-    ),
-  );
-  // In turn: a picture's switch ends once it loads, so an earlier one could land last.
-  scope.reconcile(switchOptions$, async (options) => {
-    if (options === undefined) return;
-    try {
-      await pipeline.switchTo(options);
-    } catch (e) {
-      logger.warn("Failed to switch background effect", e);
-    }
-  });
-
-  return { state$ };
-}
-
-function switchOptionsFor(
-  effect: BackgroundEffect,
-): SwitchBackgroundProcessorOptions {
-  switch (effect.kind) {
-    case "blur":
-      return { mode: "background-blur", blurRadius };
-    case "shipped": {
-      const imagePath = imagePathFor(effect.id);
-      return imagePath
-        ? { mode: "virtual-background", imagePath }
-        : { mode: "disabled" };
-    }
-    default:
-      return { mode: "disabled" };
-  }
-}

src/state/CallViewModel/CallViewModel.test.ts

@@ -23,10 +23,6 @@ import {
   MatrixRTCSessionEvent,
 } from "matrix-js-sdk/lib/matrixrtc";
 import { deepCompare } from "matrix-js-sdk/lib/utils";
-import {
-  type RTCParticipation,
-  type VideoProcessor,
-} from "@element-hq/matrixrtc-sdk";
 
 import { type Layout } from "../layout-types.ts";
 import {
@@ -35,9 +31,7 @@ import {
   mockRemoteParticipant,
   withTestScheduler,
   mockRtcMembership,
-  mockMuteStates,
   testScope,
-  flushPromises,
 } from "../../utils/test.ts";
 import { E2eeType } from "../../e2ee/e2eeType.ts";
 import {
@@ -68,11 +62,7 @@ import {
 import { MatrixRTCMode } from "../../config/ConfigOptions.ts";
 import { initializeWidget } from "../../widget.ts";
 import { computeUrlParams } from "../../UrlParams.ts";
-import {
-  callViewModelOptionsFromParams,
-  initialPublishRequests,
-} from "./CallViewModel.ts";
-import { type Handler, MuteState } from "../MuteStates.ts";
+import { callViewModelOptionsFromParams } from "./CallViewModel.ts";
 
 initializeWidget();
 
@@ -1674,73 +1664,3 @@ describe("callViewModelOptionsFromParams", () => {
     expect(callViewModelOptionsFromParams(params).hideScreensharing).toBe(true);
   });
 });
-
-describe("a camera with a video processor", () => {
-  const withCallViewModel = withCallViewModelInMode(MatrixRTCMode.Matrix_2_0);
-  const processor = { name: "effect" } as VideoProcessor;
-
-  /** The handler the view model gives the camera's mute switch. */
-  const cameraHandler = (setHandler: {
-    mock: { calls: [Handler][] };
-  }): Handler => setHandler.mock.calls[1][0];
-
-  it("starts each camera track with the processor", () => {
-    const muteStates = mockMuteStates();
-    vi.spyOn(muteStates.video.enabled$, "value", "get").mockReturnValue(true);
-    expect(
-      initialPublishRequests(
-        muteStates,
-        mockMediaDevices({}),
-        {},
-        processor,
-      ).find((request) => request.source === "camera"),
-    ).toMatchObject({ processor });
-  });
-
-  it("replaces a camera turned off before the processor was chosen", async () => {
-    const setHandler = vi.spyOn(MuteState.prototype, "setHandler");
-    onTestFinished(() => setHandler.mockRestore());
-    const videoProcessor$ = new BehaviorSubject<VideoProcessor | undefined>(
-      undefined,
-    );
-    let participation: RTCParticipation | undefined;
-    withCallViewModel(
-      {},
-      (_vm, _session, { rtcParticipation }) => {
-        participation = rtcParticipation;
-      },
-      { videoProcessor$ },
-    );
-    // The camera is off, so it is stopped and can't take the processor
-    videoProcessor$.next(processor);
-    await cameraHandler(setHandler)(true);
-    await flushPromises();
-
-    expect(participation!.unpublish).toHaveBeenCalledWith("camera");
-    expect(participation!.publish).toHaveBeenCalledWith(
-      expect.objectContaining({ source: "camera", processor }),
-    );
-  });
-
-  it("turns on a camera that took the processor while running", async () => {
-    const setHandler = vi.spyOn(MuteState.prototype, "setHandler");
-    onTestFinished(() => setHandler.mockRestore());
-    const videoProcessor$ = new BehaviorSubject<VideoProcessor | undefined>(
-      undefined,
-    );
-    let participation: RTCParticipation | undefined;
-    withCallViewModel(
-      { videoEnabled: new Map([[localParticipant, constant(true)]]) },
-      (_vm, _session, { rtcParticipation }) => {
-        participation = rtcParticipation;
-      },
-      { videoProcessor$ },
-    );
-    videoProcessor$.next(processor);
-    await cameraHandler(setHandler)(true);
-    await flushPromises();
-
-    expect(participation!.unpublish).not.toHaveBeenCalled();
-    expect(participation!.publish).not.toHaveBeenCalled();
-  });
-});

src/state/CallViewModel/CallViewModel.ts

@@ -135,16 +135,14 @@ export interface CaptureSettings {
 }
 
 /**
- * What to publish for a microphone or camera: the device the user picked, the
- * host's capture settings and, for the camera, the video processor, so that
- * the track starts with it rather than letting the room through while it is
- * built.
+ * What to publish for a microphone or camera: the device the user picked and
+ * the host's capture settings. The video processor is not in here; the call
+ * attaches it to the camera track once that exists.
  */
 export function publishRequest(
   source: "microphone" | "camera",
   mediaDevices: MediaDevices,
   capture: CaptureSettings,
-  processor?: VideoProcessor,
 ): PublishRequest {
   return source === "microphone"
     ? {
@@ -156,7 +154,6 @@ export function publishRequest(
         source,
         deviceId: mediaDevices.videoInput.selected$.value?.id,
         capture: capture.camera,
-        ...(processor && { processor }),
       };
 }
 
@@ -165,13 +162,12 @@ export function initialPublishRequests(
   muteStates: MuteStates,
   mediaDevices: MediaDevices,
   capture: CaptureSettings,
-  processor?: VideoProcessor,
 ): PublishRequest[] {
   const requests: PublishRequest[] = [];
   if (muteStates.audio.enabled$.value)
     requests.push(publishRequest("microphone", mediaDevices, capture));
   if (muteStates.video.enabled$.value)
-    requests.push(publishRequest("camera", mediaDevices, capture, processor));
+    requests.push(publishRequest("camera", mediaDevices, capture));
   return requests;
 }
 
@@ -507,17 +503,6 @@ export function createCallViewModel$(
     "screenShare",
   ) as Behavior<LocalVideoMediaTrack | undefined>;
 
-  // Camera tracks the processor reached while they ran. A camera turned off is
-  // stopped, and a stopped track can't take one.
-  const tookProcessor = new WeakMap<LocalVideoMediaTrack, VideoProcessor>();
-  const missesProcessor = (track: LocalMediaTrack): boolean => {
-    const processor = videoProcessor$.value;
-    return (
-      processor !== undefined &&
-      tookProcessor.get(track as LocalVideoMediaTrack) !== processor
-    );
-  };
-
   // The mute switches drive our tracks, which report back what the device
   // allowed, so a denied permission flips the switch back. A source is muted
   // and unmuted while its track exists and published when it does not.
@@ -535,23 +520,14 @@ export function createCallViewModel$(
     muteState.setHandler(async (enabled) => {
       desired = enabled;
       const track = track$.value;
-      // A camera turned off before the processor was chosen is replaced, so
-      // that the new one starts with it.
-      if (enabled && source === "camera" && track && missesProcessor(track))
-        await rtcParticipation.unpublish("camera");
-      else if (track !== undefined) {
+      if (track !== undefined) {
         desired = await track.setEnabled(enabled);
         return desired;
       }
       if (!enabled) return false;
       try {
         await rtcParticipation.publish(
-          publishRequest(
-            source,
-            mediaDevices,
-            capture,
-            source === "camera" ? videoProcessor$.value : undefined,
-          ),
+          publishRequest(source, mediaDevices, capture),
         );
         return true;
       } catch (e) {
@@ -607,15 +583,12 @@ export function createCallViewModel$(
         });
       });
 
-  // Also set on each camera track as it appears and as the choice changes. A
-  // track made with the processor already runs it and is left alone.
+  // Attached once the camera track exists rather than carried in the publish
+  // request, so that a new track and a change of processor take the same path
   combineLatest([camera$, videoProcessor$])
     .pipe(scope.bind())
     .subscribe(([camera, processor]) => {
-      if (camera === undefined) return;
-      if (processor && !camera.muted$.value)
-        tookProcessor.set(camera, processor);
-      camera.setProcessor(processor).catch((e) => {
+      camera?.setProcessor(processor).catch((e) => {
         logger.error("Failed to set the video processor", e);
       });
     });

src/tracks/BackgroundEffectTransformer.test.ts

@@ -1,52 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { afterEach, describe, expect, it, vi } from "vitest";
-import {
-  BackgroundTransformer,
-  VideoTransformer,
-  type VideoTransformerInitOptions,
-} from "@livekit/track-processors";
-import { ImageSegmenter } from "@mediapipe/tasks-vision";
-
-import { BackgroundEffectTransformer } from "./BackgroundEffectTransformer";
-
-describe("BackgroundEffectTransformer", () => {
-  afterEach(() => vi.restoreAllMocks());
-
-  it("loads a background chosen before it was built", async () => {
-    vi.spyOn(VideoTransformer.prototype, "init").mockResolvedValue();
-    vi.spyOn(ImageSegmenter, "createFromOptions").mockResolvedValue(
-      {} as ImageSegmenter,
-    );
-    const load = vi
-      .spyOn(BackgroundTransformer.prototype, "loadAndSetBackground")
-      .mockResolvedValue();
-    const transformer = new BackgroundEffectTransformer({
-      backgroundDisabled: true,
-    });
-    // Chosen before the camera is processed, as the first effect always is:
-    // loaded then, there is nothing yet to draw it with.
-    await transformer.update({ imagePath: "/background.jpg" });
-    load.mockClear();
-
-    await transformer.init({} as VideoTransformerInitOptions);
-    expect(load).toHaveBeenCalledWith("/background.jpg");
-  });
-
-  it("passes frames on untouched once disabled, even after blurring", async () => {
-    const transformer = new BackgroundEffectTransformer({});
-    await transformer.update({ blurRadius: 15, backgroundDisabled: false });
-    await transformer.update({
-      imagePath: undefined,
-      backgroundDisabled: true,
-    });
-    // With neither, the library passes a frame on without segmenting it.
-    expect(transformer.options.blurRadius).toBeUndefined();
-    expect(transformer.options.imagePath).toBeUndefined();
-  });
-});

src/tracks/BackgroundEffectsContext.test.ts

@@ -1,294 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { act, createElement, type FC } from "react";
-import { render } from "@testing-library/react";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { type LocalVideoTrack } from "livekit-client";
-import {
-  type BackgroundOptions,
-  type ProcessorWrapper,
-} from "@livekit/track-processors";
-import {
-  convertToLivekitProcessor,
-  type VideoProcessor,
-} from "@element-hq/matrixrtc-sdk";
-
-import {
-  applyProcessor,
-  fromLivekitProcessor,
-  BackgroundEffectsProvider,
-  type BackgroundEffectsState,
-  syncBackgroundEffects,
-  useBackgroundEffects,
-  useSyncBackgroundEffects,
-  createAppBackgroundEffects,
-} from "./BackgroundEffectsContext";
-import { type BackgroundEffects } from "../state/BackgroundEffects";
-import { backgroundEffect } from "../settings/settings";
-import { constant } from "../state/Behavior";
-import { flushPromises, testScope } from "../utils/test";
-
-const pipelines = vi.hoisted(() => ({
-  built: 0,
-  destroyed: 0,
-  switches: [] as unknown[],
-}));
-
-// The pipeline itself needs WebGL and MediaPipe; what these tests are about is
-// what the provider asks of it.
-vi.mock("@livekit/track-processors", () => ({
-  BackgroundProcessorWrapper: vi.fn(function (this: Record<string, unknown>) {
-    pipelines.built += 1;
-    this.switchTo = vi.fn(async (options: unknown) => {
-      pipelines.switches.push(options);
-      return Promise.resolve();
-    });
-    this.destroy = vi.fn(async () => {
-      pipelines.destroyed += 1;
-      return Promise.resolve();
-    });
-  }),
-  supportsBackgroundProcessors: (): boolean => true,
-}));
-const platformMock = vi.hoisted(() => ({ platform: "desktop" }));
-vi.mock("../Platform", () => platformMock);
-vi.mock("./BackgroundEffectTransformer", () => ({
-  BackgroundEffectTransformer: vi.fn(),
-}));
-
-const processor = { name: "blur" } as VideoProcessor;
-
-function mockTrack(
-  readyState: MediaStreamTrackState,
-  current?: VideoProcessor,
-): LocalVideoTrack {
-  return {
-    mediaStreamTrack: { readyState },
-    getProcessor: vi.fn().mockReturnValue(current),
-    setProcessor: vi.fn().mockResolvedValue(undefined),
-    stopProcessor: vi.fn().mockResolvedValue(undefined),
-  } as unknown as LocalVideoTrack;
-}
-
-describe("applyProcessor", () => {
-  it("attaches the processor to a live track", () => {
-    const track = mockTrack("live");
-    applyProcessor(track, processor);
-    expect(track.setProcessor).toHaveBeenCalledWith(
-      expect.objectContaining({ name: "blur" }),
-    );
-  });
-
-  it("does not attach the processor to an ended track", () => {
-    const track = mockTrack("ended");
-    applyProcessor(track, processor);
-    expect(track.setProcessor).not.toHaveBeenCalled();
-  });
-
-  it("does not surface a rejected setProcessor", async () => {
-    const track = mockTrack("live");
-    vi.mocked(track.setProcessor).mockRejectedValue(
-      new TypeError("Input track cannot be ended"),
-    );
-    const unhandled = vi.fn();
-    process.on("unhandledRejection", unhandled);
-    applyProcessor(track, processor);
-    await flushPromises();
-    process.off("unhandledRejection", unhandled);
-    expect(unhandled).not.toHaveBeenCalled();
-  });
-
-  it("stops the processor when none is wanted", () => {
-    const track = mockTrack("live", processor);
-    applyProcessor(track, undefined);
-    expect(track.stopProcessor).toHaveBeenCalled();
-  });
-
-  it("does not surface a rejected stopProcessor", async () => {
-    const track = mockTrack("live", processor);
-    vi.mocked(track.stopProcessor).mockRejectedValue(new Error("nope"));
-    const unhandled = vi.fn();
-    process.on("unhandledRejection", unhandled);
-    applyProcessor(track, undefined);
-    await flushPromises();
-    process.off("unhandledRejection", unhandled);
-    expect(unhandled).not.toHaveBeenCalled();
-  });
-});
-
-describe("syncBackgroundEffects", () => {
-  it("applies the processor to the current track", () => {
-    const track = mockTrack("live");
-    syncBackgroundEffects(
-      testScope(),
-      constant(track),
-      constant({ supported: true, processor }),
-    );
-    expect(track.setProcessor).toHaveBeenCalledWith(
-      expect.objectContaining({ name: "blur" }),
-    );
-  });
-});
-
-describe("fromLivekitProcessor", () => {
-  const captured = { id: "captured" } as MediaStreamTrack;
-  const processed = { id: "processed" } as MediaStreamTrack;
-
-  function mockWrapper(
-    processedTrack: MediaStreamTrack | undefined,
-  ): ProcessorWrapper<BackgroundOptions> {
-    return {
-      name: "background-blur",
-      processedTrack,
-      init: vi.fn().mockResolvedValue(undefined),
-      restart: vi.fn().mockResolvedValue(undefined),
-      destroy: vi.fn().mockResolvedValue(undefined),
-    } as unknown as ProcessorWrapper<BackgroundOptions>;
-  }
-
-  it("resolves with the track the wrapper produced", async () => {
-    const wrapper = mockWrapper(processed);
-    const sdkProcessor = fromLivekitProcessor(wrapper);
-    expect(sdkProcessor.name).toBe("background-blur");
-    await expect(sdkProcessor.init(captured)).resolves.toBe(processed);
-    expect(wrapper.init).toHaveBeenCalledWith({
-      kind: "video",
-      track: captured,
-    });
-    await expect(sdkProcessor.restart(captured)).resolves.toBe(processed);
-    await sdkProcessor.destroy();
-    expect(wrapper.destroy).toHaveBeenCalled();
-  });
-
-  it("rejects where the wrapper produced no track", async () => {
-    await expect(
-      fromLivekitProcessor(mockWrapper(undefined)).init(captured),
-    ).rejects.toThrow("produced no track");
-  });
-});
-
-describe("BackgroundEffectsProvider", () => {
-  /** A camera track that holds whatever processor it is given. */
-  function cameraTrack(): LocalVideoTrack {
-    let current: unknown;
-    return {
-      mediaStreamTrack: { readyState: "live" },
-      getProcessor: vi.fn(() => current),
-      setProcessor: vi.fn(async (next: unknown) => {
-        current = next;
-        return Promise.resolve();
-      }),
-      stopProcessor: vi.fn(async () => {
-        current = undefined;
-        return Promise.resolve();
-      }),
-    } as unknown as LocalVideoTrack;
-  }
-
-  let seen: BackgroundEffectsState[];
-  const Surface: FC<{ track: LocalVideoTrack | null }> = ({ track }) => {
-    seen.push(useBackgroundEffects());
-    useSyncBackgroundEffects(track);
-    return null;
-  };
-  // One component for every render, so a rerender updates the tree rather than
-  // mounting a second provider with a pipeline of its own.
-  let effects: BackgroundEffects | undefined;
-  const Surfaces: FC<{ tracks: (LocalVideoTrack | null)[] }> = ({ tracks }) =>
-    createElement(BackgroundEffectsProvider, {
-      // Made on first render, once a test has set up the platform.
-      effects: (effects ??= createAppBackgroundEffects(testScope())),
-      children: createElement(
-        "div",
-        null,
-        ...tracks.map((track, key) => createElement(Surface, { key, track })),
-      ),
-    });
-  const surfaces = (
-    ...tracks: (LocalVideoTrack | null)[]
-  ): ReturnType<typeof createElement> => createElement(Surfaces, { tracks });
-  const blur = async (on: boolean): Promise<void> => {
-    await act(async () => {
-      backgroundEffect.setValue(on ? "blur" : "none");
-      await flushPromises();
-    });
-  };
-  const latest = (): BackgroundEffectsState => seen[seen.length - 1];
-
-  beforeEach(() => {
-    seen = [];
-    effects = undefined;
-    pipelines.built = 0;
-    pipelines.destroyed = 0;
-    pipelines.switches = [];
-    platformMock.platform = "desktop";
-    backgroundEffect.setValue("none");
-  });
-  afterEach(() => backgroundEffect.setValue("none"));
-
-  // A pipeline primes itself when it is built and when it is destroyed, and a
-  // primed pipeline lets one frame through untouched: so the frame is spent
-  // once, as long as it is built once and never taken off the camera.
-  it("spends one priming frame on first use and none afterwards", async () => {
-    const track = cameraTrack();
-    render(surfaces(track));
-    for (const on of [true, false, true, false, true]) await blur(on);
-
-    expect(pipelines.built).toBe(1);
-    expect(pipelines.destroyed).toBe(0);
-    expect(track.setProcessor).toHaveBeenCalledTimes(1);
-    expect(track.stopProcessor).not.toHaveBeenCalled();
-  });
-
-  it("does not run on a phone, even where its browser could", async () => {
-    platformMock.platform = "ios";
-    const track = cameraTrack();
-    render(surfaces(track));
-    await blur(true);
-
-    expect(latest().supported).toBe(false);
-    expect(track.setProcessor).not.toHaveBeenCalled();
-  });
-
-  it("preview and call share one pipeline", async () => {
-    const preview = cameraTrack();
-    const call = cameraTrack();
-    render(surfaces(preview, call));
-    await blur(true);
-
-    const pipeline = latest().processor;
-    expect(preview.setProcessor).toHaveBeenCalledWith(
-      convertToLivekitProcessor(pipeline!),
-    );
-    expect(call.setProcessor).toHaveBeenCalledWith(
-      convertToLivekitProcessor(pipeline!),
-    );
-    expect(pipelines.built).toBe(1);
-  });
-
-  it("applies an effect chosen while the camera is off", async () => {
-    const view = render(surfaces(null));
-    await blur(true);
-    // Already switched to blur, with nothing yet to attach it to.
-    expect(pipelines.switches).toEqual([
-      { mode: "background-blur", blurRadius: 15 },
-    ]);
-
-    const track = cameraTrack();
-    await act(async () => {
-      view.rerender(surfaces(track));
-      await flushPromises();
-    });
-    expect(track.setProcessor).toHaveBeenCalledTimes(1);
-    expect(track.setProcessor).toHaveBeenCalledWith(
-      convertToLivekitProcessor(latest().processor!),
-    );
-    expect(pipelines.built).toBe(1);
-    expect(pipelines.switches).toHaveLength(1);
-  });
-});

src/tracks/BlurBackgroundTransformer.ts

@@ -1,6 +1,5 @@
 /*
 Copyright 2024-2025 New Vector Ltd.
-Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
@@ -10,9 +9,7 @@ import {
   BackgroundTransformer,
   VideoTransformer,
   type VideoTransformerInitOptions,
-  type BackgroundOptions,
 } from "@livekit/track-processors";
-import { logger } from "matrix-js-sdk/lib/logger";
 import { ImageSegmenter } from "@mediapipe/tasks-vision";
 
 import modelAssetPath from "../mediapipe/imageSegmenter/selfie_segmenter.tflite?url";
@@ -52,18 +49,7 @@ const wasmFileset: WasmFileset = {
  * loads the segmentation models from our own bundle rather than as an external
  * resource fetched from the public internet.
  */
-export class BackgroundEffectTransformer extends BackgroundTransformer {
-  /**
-   * As the library's, except that disabling also drops the blur radius: kept,
-   * it has every frame segmented and the result thrown away, where with
-   * neither a radius nor a picture frames are passed on untouched.
-   */
-  public override async update(opts: BackgroundOptions): Promise<void> {
-    await super.update(
-      opts.backgroundDisabled ? { ...opts, blurRadius: undefined } : opts,
-    );
-  }
-
+export class BlurBackgroundTransformer extends BackgroundTransformer {
   public async init({
     outputCanvas,
     inputElement: inputVideo,
@@ -87,15 +73,8 @@ export class BackgroundEffectTransformer extends BackgroundTransformer {
       outputConfidenceMasks: false,
     });
 
-    // BackgroundTransformer's own init applies these, and this one replaces it.
-    if (this.options.imagePath) {
-      await this.loadAndSetBackground(this.options.imagePath).catch((e) =>
-        logger.warn("Failed to load the background image", e),
-      );
-    }
     if (this.options.blurRadius) {
       this.gl?.setBlurRadius(this.options.blurRadius);
     }
-    this.gl?.setBackgroundDisabled(this.options.backgroundDisabled ?? false);
   }
 }

src/tracks/OneStepPipeline.test.ts

@@ -1,80 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { ProcessorWrapper } from "@livekit/track-processors";
-
-import { OneStepPipeline } from "./OneStepPipeline";
-import { BackgroundEffectTransformer } from "./BackgroundEffectTransformer";
-import { flushPromises } from "../utils/test";
-
-const opts = {} as Parameters<OneStepPipeline["init"]>[0];
-
-describe("OneStepPipeline", () => {
-  afterEach(() => vi.restoreAllMocks());
-
-  it("stops and builds again only once a build has finished", async () => {
-    let finishBuild!: () => void;
-    const init = vi
-      .spyOn(ProcessorWrapper.prototype, "init")
-      .mockImplementationOnce(
-        async () => new Promise((resolve) => (finishBuild = resolve)),
-      )
-      .mockResolvedValue();
-    const destroy = vi
-      .spyOn(ProcessorWrapper.prototype, "destroy")
-      .mockResolvedValue();
-    const pipeline = new OneStepPipeline(
-      new BackgroundEffectTransformer({}),
-      "test",
-    );
-
-    const first = pipeline.init(opts);
-    const stopped = pipeline.destroy();
-    const second = pipeline.init(opts);
-    await flushPromises();
-    expect(init).toHaveBeenCalledTimes(1);
-    expect(destroy).not.toHaveBeenCalled();
-
-    finishBuild();
-    await Promise.all([first, stopped, second]);
-    expect(init).toHaveBeenCalledTimes(2);
-    expect(destroy.mock.invocationCallOrder[0]).toBeLessThan(
-      init.mock.invocationCallOrder[1],
-    );
-  });
-
-  it("restarts in one step, without waiting on itself", async () => {
-    const init = vi
-      .spyOn(ProcessorWrapper.prototype, "init")
-      .mockResolvedValue();
-    const destroy = vi
-      .spyOn(ProcessorWrapper.prototype, "destroy")
-      .mockResolvedValue();
-    const pipeline = new OneStepPipeline(
-      new BackgroundEffectTransformer({}),
-      "test",
-    );
-
-    await pipeline.restart(opts);
-    expect(destroy).toHaveBeenCalledWith({ willProcessorRestart: true });
-    expect(init).toHaveBeenCalledOnce();
-  });
-
-  it("carries on after a step that failed", async () => {
-    vi.spyOn(ProcessorWrapper.prototype, "init")
-      .mockRejectedValueOnce(new Error("no GPU"))
-      .mockResolvedValue();
-    const pipeline = new OneStepPipeline(
-      new BackgroundEffectTransformer({}),
-      "test",
-    );
-
-    await expect(pipeline.init(opts)).rejects.toThrow("no GPU");
-    await expect(pipeline.init(opts)).resolves.toBeUndefined();
-  });
-});

src/tracks/OneStepPipeline.ts

@@ -1,43 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { BackgroundProcessorWrapper } from "@livekit/track-processors";
-
-type InitOptions = Parameters<BackgroundProcessorWrapper["init"]>[0];
-type DestroyOptions = Parameters<BackgroundProcessorWrapper["destroy"]>[0];
-
-/**
- * A background pipeline that is built, rebuilt and destroyed one step at a
- * time. The camera tracks sharing it attach and stop it independently, and
- * the SDK's wrapper holds a single track's streams: two builds at once
- * overwrite each other's, and a destroy during a build does nothing.
- */
-export class OneStepPipeline extends BackgroundProcessorWrapper {
-  private steps: Promise<void> = Promise.resolve();
-
-  public override async init(opts: InitOptions): Promise<void> {
-    return this.inTurn(async () => super.init(opts));
-  }
-
-  // The SDK's restart calls init and destroy, which would wait on itself.
-  public override async restart(opts: InitOptions): Promise<void> {
-    return this.inTurn(async () => {
-      await super.destroy({ willProcessorRestart: true });
-      await super.init(opts);
-    });
-  }
-
-  public override async destroy(options?: DestroyOptions): Promise<void> {
-    return this.inTurn(async () => super.destroy(options));
-  }
-
-  private async inTurn(step: () => Promise<void>): Promise<void> {
-    const turn = this.steps.then(step);
-    this.steps = turn.catch(() => {});
-    return turn;
-  }
-}

src/tracks/TrackProcessorContext.test.ts

@@ -0,0 +1,133 @@
+/*
+Copyright 2026 Element Creations Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE in the repository root for full details.
+*/
+
+import { describe, expect, it, vi } from "vitest";
+import { type LocalVideoTrack } from "livekit-client";
+import {
+  type BackgroundOptions,
+  type ProcessorWrapper,
+} from "@livekit/track-processors";
+import { type VideoProcessor } from "@element-hq/matrixrtc-sdk";
+
+import {
+  applyProcessor,
+  fromLivekitProcessor,
+  trackProcessorSync,
+} from "./TrackProcessorContext";
+import { constant } from "../state/Behavior";
+import { flushPromises, testScope } from "../utils/test";
+
+const processor = { name: "blur" } as VideoProcessor;
+
+function mockTrack(
+  readyState: MediaStreamTrackState,
+  current?: VideoProcessor,
+): LocalVideoTrack {
+  return {
+    mediaStreamTrack: { readyState },
+    getProcessor: vi.fn().mockReturnValue(current),
+    setProcessor: vi.fn().mockResolvedValue(undefined),
+    stopProcessor: vi.fn().mockResolvedValue(undefined),
+  } as unknown as LocalVideoTrack;
+}
+
+describe("applyProcessor", () => {
+  it("attaches the processor to a live track", () => {
+    const track = mockTrack("live");
+    applyProcessor(track, processor);
+    expect(track.setProcessor).toHaveBeenCalledWith(
+      expect.objectContaining({ name: "blur" }),
+    );
+  });
+
+  it("does not attach the processor to an ended track", () => {
+    const track = mockTrack("ended");
+    applyProcessor(track, processor);
+    expect(track.setProcessor).not.toHaveBeenCalled();
+  });
+
+  it("does not surface a rejected setProcessor", async () => {
+    const track = mockTrack("live");
+    vi.mocked(track.setProcessor).mockRejectedValue(
+      new TypeError("Input track cannot be ended"),
+    );
+    const unhandled = vi.fn();
+    process.on("unhandledRejection", unhandled);
+    applyProcessor(track, processor);
+    await flushPromises();
+    process.off("unhandledRejection", unhandled);
+    expect(unhandled).not.toHaveBeenCalled();
+  });
+
+  it("stops the processor when none is wanted", () => {
+    const track = mockTrack("live", processor);
+    applyProcessor(track, undefined);
+    expect(track.stopProcessor).toHaveBeenCalled();
+  });
+
+  it("does not surface a rejected stopProcessor", async () => {
+    const track = mockTrack("live", processor);
+    vi.mocked(track.stopProcessor).mockRejectedValue(new Error("nope"));
+    const unhandled = vi.fn();
+    process.on("unhandledRejection", unhandled);
+    applyProcessor(track, undefined);
+    await flushPromises();
+    process.off("unhandledRejection", unhandled);
+    expect(unhandled).not.toHaveBeenCalled();
+  });
+});
+
+describe("trackProcessorSync", () => {
+  it("applies the processor to the current track", () => {
+    const track = mockTrack("live");
+    trackProcessorSync(
+      testScope(),
+      constant(track),
+      constant({ supported: true, processor }),
+    );
+    expect(track.setProcessor).toHaveBeenCalledWith(
+      expect.objectContaining({ name: "blur" }),
+    );
+  });
+});
+
+describe("fromLivekitProcessor", () => {
+  const captured = { id: "captured" } as MediaStreamTrack;
+  const processed = { id: "processed" } as MediaStreamTrack;
+
+  function mockWrapper(
+    processedTrack: MediaStreamTrack | undefined,
+  ): ProcessorWrapper<BackgroundOptions> {
+    return {
+      name: "background-blur",
+      processedTrack,
+      init: vi.fn().mockResolvedValue(undefined),
+      restart: vi.fn().mockResolvedValue(undefined),
+      destroy: vi.fn().mockResolvedValue(undefined),
+    } as unknown as ProcessorWrapper<BackgroundOptions>;
+  }
+
+  it("resolves with the track the wrapper produced", async () => {
+    const wrapper = mockWrapper(processed);
+    const sdkProcessor = fromLivekitProcessor(wrapper);
+    expect(sdkProcessor.name).toBe("background-blur");
+    await expect(sdkProcessor.init(captured)).resolves.toBe(processed);
+    expect(wrapper.init).toHaveBeenCalledWith({
+      kind: "video",
+      track: captured,
+    });
+    await expect(sdkProcessor.restart(captured)).resolves.toBe(processed);
+    await sdkProcessor.destroy();
+    expect(wrapper.destroy).toHaveBeenCalled();
+  });
+
+  it("rejects where the wrapper produced no track", async () => {
+    await expect(
+      fromLivekitProcessor(mockWrapper(undefined)).init(captured),
+    ).rejects.toThrow("produced no track");
+  });
+});

src/tracks/TrackProcessorContext.tsx

@@ -1,16 +1,23 @@
 /*
 Copyright 2024-2025 New Vector Ltd.
-Copyright 2026 Element Creations Ltd.
 
 SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE in the repository root for full details.
 */
 
 import {
-  type ProcessorWrapper,
+  ProcessorWrapper,
+  supportsBackgroundProcessors as supportsBackgroundProcessorsLivekitSdk,
   type BackgroundOptions,
 } from "@livekit/track-processors";
-import { createContext, type FC, type JSX, use, useEffect } from "react";
+import {
+  createContext,
+  type FC,
+  type JSX,
+  use,
+  useEffect,
+  useMemo,
+} from "react";
 import { type LocalVideoTrack, Track } from "livekit-client";
 import { logger } from "matrix-js-sdk/lib/logger";
 import { combineLatest } from "rxjs";
@@ -19,23 +26,21 @@ import {
   type VideoProcessor,
 } from "@element-hq/matrixrtc-sdk";
 
-import { backgroundEffect as backgroundEffectSetting } from "../settings/settings";
-import { BackgroundEffectTransformer } from "./BackgroundEffectTransformer";
-import { OneStepPipeline } from "./OneStepPipeline";
-import { supportsBackgroundProcessors } from "./backgroundProcessing";
+import {
+  backgroundBlur as backgroundBlurSettings,
+  useSetting,
+} from "../settings/settings";
+import { BlurBackgroundTransformer } from "./BlurBackgroundTransformer";
 import { type Behavior } from "../state/Behavior";
 import { type ObservableScope } from "../state/ObservableScope";
-import {
-  type BackgroundEffects,
-  createBackgroundEffects,
-} from "../state/BackgroundEffects";
-import { useBehavior } from "../useBehavior";
+import { platform } from "../Platform";
+import { useValueBehavior } from "../useValueBehavior";
 
 //TODO-MULTI-SFU: This is not yet fully there.
 // it is a combination of exposing observable and react hooks.
 // preferably we should not make this a context anymore and instead just a vm?
 
-export type BackgroundEffectsState = {
+export type ProcessorState = {
   supported: boolean | undefined;
   processor: undefined | VideoProcessor;
 };
@@ -67,21 +72,19 @@ export function fromLivekitProcessor(
   };
 }
 
-const BackgroundEffectsContext = createContext<BackgroundEffects | undefined>(
-  undefined,
-);
+const ProcessorContext = createContext<ProcessorState | undefined>(undefined);
 
-export function useBackgroundEffects(): BackgroundEffectsState {
-  return useBehavior(useBackgroundEffectsState$());
+export function useTrackProcessor(): ProcessorState {
+  const state = use(ProcessorContext);
+  if (state === undefined)
+    throw new Error(
+      "useTrackProcessor must be used within a ProcessorProvider",
+    );
+  return state;
 }
 
-export function useBackgroundEffectsState$(): Behavior<BackgroundEffectsState> {
-  const effects = use(BackgroundEffectsContext);
-  if (effects === undefined)
-    throw new Error(
-      "useBackgroundEffects must be used within a BackgroundEffectsProvider",
-    );
-  return effects.state$;
+export function useTrackProcessorState$(): Behavior<ProcessorState> {
+  return useValueBehavior(useTrackProcessor());
 }
 
 /**
@@ -101,11 +104,8 @@ export function applyProcessor(
       logger.debug("Not attaching video processor to an ended track");
       return;
     }
-    const track = videoTrack.mediaStreamTrack;
     videoTrack.setProcessor(convertToLivekitProcessor(processor)).catch((e) => {
-      if (track.readyState === "ended")
-        logger.debug("Video processor not attached: the track ended first");
-      else logger.warn("Failed to attach video processor", e);
+      logger.warn("Failed to attach video processor", e);
     });
   }
   if (!processor && videoTrack.getProcessor()) {
@@ -118,51 +118,61 @@ export function applyProcessor(
 /**
  * Updates your video tracks to always use the given processor.
  */
-export const syncBackgroundEffects = (
+export const trackProcessorSync = (
   scope: ObservableScope,
   videoTrack$: Behavior<LocalVideoTrack | null>,
-  backgroundEffectsState$: Behavior<BackgroundEffectsState>,
+  processor$: Behavior<ProcessorState>,
 ): void => {
-  combineLatest([videoTrack$, backgroundEffectsState$])
+  combineLatest([videoTrack$, processor$])
     .pipe(scope.bind())
-    .subscribe(([videoTrack, backgroundEffectsState]) => {
-      if (!backgroundEffectsState) return;
+    .subscribe(([videoTrack, processorState]) => {
+      if (!processorState) return;
       if (!videoTrack) return;
-      applyProcessor(videoTrack, backgroundEffectsState.processor);
+      applyProcessor(videoTrack, processorState.processor);
     });
 };
 
-export const useSyncBackgroundEffects = (
+export const useTrackProcessorSync = (
   videoTrack: LocalVideoTrack | null,
 ): void => {
-  const { processor } = useBackgroundEffects();
+  const { processor } = useTrackProcessor();
   useEffect(() => {
     if (!videoTrack) return;
     applyProcessor(videoTrack, processor);
   }, [processor, videoTrack]);
 };
 
-/** The app's one pipeline, shared by every camera track it opens. */
-export function createAppBackgroundEffects(
-  scope: ObservableScope,
-): BackgroundEffects {
-  return createBackgroundEffects(scope, {
-    supported: supportsBackgroundProcessors(),
-    effect$: backgroundEffectSetting.value$,
-    pipeline: new OneStepPipeline(
-      new BackgroundEffectTransformer({ backgroundDisabled: true }),
-      "background-effect",
-    ),
-  });
-}
-
 interface Props {
-  effects: BackgroundEffects;
   children: JSX.Element;
 }
 
-export const BackgroundEffectsProvider: FC<Props> = ({ effects, children }) => (
-  <BackgroundEffectsContext value={effects}>
-    {children}
-  </BackgroundEffectsContext>
-);
+function supportsBackgroundProcessors(): boolean {
+  return supportsBackgroundProcessorsLivekitSdk() && platform === "desktop";
+}
+
+export const ProcessorProvider: FC<Props> = ({ children }) => {
+  // The setting the user wants to have
+  const [blurActivated] = useSetting(backgroundBlurSettings);
+  const supported = useMemo(() => supportsBackgroundProcessors(), []);
+  const blur = useMemo(
+    () =>
+      fromLivekitProcessor(
+        new ProcessorWrapper(
+          new BlurBackgroundTransformer({ blurRadius: 15 }),
+          "background-blur",
+        ),
+      ),
+    [],
+  );
+
+  // This is the actual state exposed through the context
+  const processorState = useMemo(
+    () => ({
+      supported,
+      processor: supported && blurActivated ? blur : undefined,
+    }),
+    [supported, blurActivated, blur],
+  );
+
+  return <ProcessorContext value={processorState}>{children}</ProcessorContext>;
+};

src/tracks/backgroundEffects.test.ts

@@ -1,53 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { readFile } from "node:fs/promises";
-import { describe, expect, test } from "vitest";
-
-import {
-  type BackgroundEffect,
-  imagePathFor,
-  parseEffect,
-  serializeEffect,
-  shippedBackgrounds,
-} from "./backgroundEffects";
-
-describe("the chosen background effect", () => {
-  test("round-trips through its stored form", () => {
-    const effects: BackgroundEffect[] = [
-      { kind: "none" },
-      { kind: "blur" },
-      ...shippedBackgrounds.map(({ id }) => ({ kind: "shipped" as const, id })),
-    ];
-    for (const effect of effects)
-      expect(parseEffect(serializeEffect(effect))).toEqual(effect);
-  });
-
-  test("falls back to no effect when the stored form names nothing we ship", () => {
-    expect(parseEffect("image:gone")).toEqual({ kind: "none" });
-    expect(parseEffect("")).toEqual({ kind: "none" });
-  });
-
-  test("reads a stored value that is not a string as no effect", () => {
-    for (const raw of [null, 1, {}, ["blur"]])
-      expect(parseEffect(raw)).toEqual({ kind: "none" });
-  });
-
-  test("gives every shipped background an image to draw", () => {
-    for (const { id } of shippedBackgrounds)
-      expect(imagePathFor(id)).toBeTruthy();
-  });
-
-  // A background has to cover what is behind it: JPEG has no alpha channel.
-  test("ships only opaque backgrounds", async () => {
-    for (const { imagePath } of shippedBackgrounds) {
-      const name = imagePath.split("/").pop()!.split("?")[0];
-      const bytes = await readFile(`src/graphics/${name}`);
-      expect([bytes[0], bytes[1], bytes[2]]).toEqual([0xff, 0xd8, 0xff]);
-    }
-  });
-});

src/tracks/backgroundEffects.ts

@@ -1,62 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import arc from "../graphics/background-arc.jpg?url";
-import glow from "../graphics/background-glow.jpg?url";
-
-export const blurRadius = 15;
-
-export interface ShippedBackground {
-  /** Stored in the user's settings when chosen, so it must not change. */
-  id: string;
-  imagePath: string;
-}
-
-export const shippedBackgrounds: ShippedBackground[] = [
-  { id: "arc", imagePath: arc },
-  { id: "glow", imagePath: glow },
-];
-
-export type BackgroundEffect =
-  | { kind: "none" }
-  | { kind: "blur" }
-  | { kind: "shipped"; id: string };
-
-/** An effect as the setting stores it, and as the menu names its option. */
-export type EffectId = "none" | "blur" | `image:${string}`;
-
-export const noEffect: BackgroundEffect = { kind: "none" };
-
-/**
- * Reads a stored effect; one we no longer ship reads as no effect. Stored by
- * hand or by another build, the value need not even be a string.
- */
-export function parseEffect(raw: unknown): BackgroundEffect {
-  if (typeof raw !== "string") return noEffect;
-  if (raw === "blur") return { kind: "blur" };
-  if (raw.startsWith("image:")) {
-    const id = raw.slice("image:".length);
-    if (shippedBackgrounds.some((b) => b.id === id))
-      return { kind: "shipped", id };
-  }
-  return noEffect;
-}
-
-export function serializeEffect(effect: BackgroundEffect): EffectId {
-  switch (effect.kind) {
-    case "blur":
-      return "blur";
-    case "shipped":
-      return `image:${effect.id}`;
-    default:
-      return "none";
-  }
-}
-
-export function imagePathFor(id: string): string | undefined {
-  return shippedBackgrounds.find((b) => b.id === id)?.imagePath;
-}

src/tracks/backgroundProcessing.ts

@@ -1,15 +0,0 @@
-/*
-Copyright 2026 Element Creations Ltd.
-
-SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE in the repository root for full details.
-*/
-
-import { supportsBackgroundProcessors as supportsBackgroundProcessorsLivekitSdk } from "@livekit/track-processors";
-
-import { platform } from "../Platform";
-
-/** One answer for the controls and the pipeline, so neither offers what the other refuses. */
-export function supportsBackgroundProcessors(): boolean {
-  return supportsBackgroundProcessorsLivekitSdk() && platform === "desktop";
-}

vite-component-dev.config.ts

@@ -38,21 +38,8 @@ export default defineConfig(({ mode }) => {
     ...base,
     root: "component/dev",
     // The same scoping the library build applies, so the harness shows what a
-    // host will get — including whether its own page is left alone. The host's
-    // own stylesheets, Compound's among them, stay unscoped, as on a real host.
-    css: {
-      postcss: {
-        plugins: [
-          scopeStylesToRoot({
-            exclude: [
-              /component[\\/]dev[\\/]/,
-              /@vector-im[\\/]compound-/,
-              /@fontsource[\\/]/,
-            ],
-          }),
-        ],
-      },
-    },
+    // host will get — including whether its own page is left alone
+    css: { postcss: { plugins: [scopeStylesToRoot()] } },
     // So that the harness can read the same config.json the standalone app
     // does, if the developer has written one
     publicDir: "../../public",

vite.config.ts

@@ -7,7 +7,6 @@ Please see LICENSE in the repository root for full details.
 
 import {
   loadEnv,
-  type Plugin,
   type PluginOption,
   searchForWorkspaceRoot,
   type ConfigEnv,
@@ -44,12 +43,10 @@ export const vitePluginsConfig = ({
     }),
     react(),
     wasm(),
-    exceptMediaPipeWasm(
-      nodePolyfills({
-        // Enables the 'events' module, which is required by the matrix-js-sdk
-        include: ["events"],
-      }),
-    ),
+    nodePolyfills({
+      // Enables the 'events' module, which is required by the matrix-js-sdk
+      include: ["events"],
+    }),
     svgrPlugin({
       svgrOptions: {
         // This enables ref forwarding on SVGR components, which is needed, for
@@ -194,31 +191,3 @@ export default ({
     },
   };
 };
-
-/**
- * Keeps a plugin's transform off MediaPipe's WASM loader. The loader is a
- * classic script that sets `self.ModuleFactory`; transformed into a module it
- * sets nothing, and the segmenter fails with "ModuleFactory not set".
- */
-function exceptMediaPipeWasm(plugins: PluginOption): PluginOption {
-  const isLoader = (id: string): boolean =>
-    id.includes("tasks-vision") && id.includes("wasm");
-  return (Array.isArray(plugins) ? plugins : [plugins]).map((plugin) => {
-    if (
-      !plugin ||
-      typeof plugin !== "object" ||
-      !("transform" in plugin) ||
-      typeof plugin.transform !== "function"
-    )
-      return plugin;
-    const transform = plugin.transform;
-    const wrapped: Plugin = {
-      ...plugin,
-      transform(code, id, options) {
-        if (isLoader(id)) return null;
-        return transform.call(this, code, id, options);
-      },
-    };
-    return wrapped;
-  });
-}