@pexip/media 20.1.0 → 20.2.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # @pexip/media
 
+## 20.2.0
+
+### Minor Changes
+
+- 574cf03: Adjusts blur passes based on processing height:
+
+  - `getBlurKernelSize` can now take `lowestProcessingHeight` so that the blur
+    passes are adjusted compared to the lowest processing height used by the
+    consumer. This fixes an issue with different blur amount being applied to
+    frames of different resolutions.
+  - background blur amount is updated every time processing dimensions are
+    updated.
+
+- be12a15: Add `getDefaultConstraints` and rename `mediaSignals` to
+  `mainMediaSignal`
+
+  - Add `getDefaultConstraints` to be consistent to the main one
+  - Rename `mediaSignals` to `mainMediaSignal`
+  - Fix `Media['clone']` to avoid interfering the original pipeline
+
+- b4c3bad: Stop camera as Mute
+
+  - Decouple updatingMedia to updatingAudio and updatingVideo
+  - Stop camera when mute, and re-request the same camera when unmute
+
+- 752005c: Release the track when providing false constraints independently
+
+### Patch Changes
+
+- Updated dependencies [f5e5b51]
+- Updated dependencies [6fddc11]
+  - @pexip/media-processor@20.2.0
+  - @pexip/signal@16.9.0
+  - @pexip/media-control@20.2.0
+  - @pexip/utils@17.0.0
+
 ## 20.1.0
 
 ### Minor Changes

package/dist/media.d.ts

@@ -19,4 +19,4 @@ export declare const createMediaUpdater: ({ getUserMedia, getCurrentDevices, sho
  *
  * @param options - @see MediaOptions
  */
-export declare const createMedia: ({ getMuteState, signals, audioProcessors, videoProcessors, getDefaultConstraints, }: MediaOptions) => MediaController;
+export declare const createMedia: ({ getMuteState, signals, audioProcessors, videoProcessors, stopVideoTrackAsMute, getDefaultConstraints, }: MediaOptions) => MediaController;

package/dist/media.js

@@ -15,27 +15,35 @@ export const createMediaUpdater = ({ getUserMedia, getCurrentDevices, shouldDisc
     return async (constraints, currentMedia) => {
         const currentDevices = await getCurrentDevices();
         const permission = await getInputDevicePermission();
-        const requestNothing = !constraints.audio && !constraints.video;
-        const permissionRejected = permission.audio === 'denied' && permission.video === 'denied';
-        if (requestNothing || permissionRejected) {
+        const releaseAudio = constraints.audio === false || permission.audio === 'denied';
+        const releaseVideo = constraints.video === false || permission.video === 'denied';
+        if (releaseAudio || releaseVideo) {
+            // Release related
             for (const track of currentMedia?.getTracks() ?? []) {
-                await track.release();
-                currentMedia?.removeTrack(track);
+                if ((track.kind === 'audioinput' && releaseAudio) ||
+                    (track.kind === 'videoinput' && releaseVideo)) {
+                    await track.release();
+                    currentMedia?.removeTrack(track);
+                }
+            }
+            // When both are true, there is nothing to request
+            if (releaseAudio && releaseVideo) {
+                currentMedia?.setOriginalConstraints(constraints);
+                const media = currentMedia ??
+                    buildMedia({
+                        constraints,
+                        permission,
+                        devices: currentDevices,
+                        status: permission.audio === 'denied' &&
+                            permission.video === 'denied'
+                            ? UserMediaStatus.PermissionsRejected
+                            : UserMediaStatus.PermissionsGranted,
+                        stream: undefined,
+                        signals,
+                        tracks: [],
+                    });
+                return onMediaTracksChanged(media, []);
             }
-            currentMedia?.setOriginalConstraints(constraints);
-            const media = currentMedia ??
-                buildMedia({
-                    constraints,
-                    permission,
-                    devices: currentDevices,
-                    status: permissionRejected
-                        ? UserMediaStatus.PermissionsRejected
-                        : UserMediaStatus.PermissionsGranted,
-                    stream: undefined,
-                    signals,
-                    tracks: [],
-                });
-            return onMediaTracksChanged(media, []);
         }
         const { audio: prevAudioSettings, video: prevVideoSettings } = currentMedia?.getSettings() ?? {};
         const videoFeatures = getVideoFeatures(constraints.video, {});
@@ -206,9 +214,20 @@ const createMediaPropsHandler = (signals) => ({
                 }
                 return true;
             }
-            case 'updatingMedia': {
+            case 'updatingAudio': {
+                if (target[p] === value) {
+                    return true;
+                }
                 const result = Reflect.set(target, p, value);
-                signals?.onUpdatingMedia?.emit(value);
+                signals?.onUpdatingAudio?.emit(value);
+                return result;
+            }
+            case 'updatingVideo': {
+                if (target[p] === value) {
+                    return true;
+                }
+                const result = Reflect.set(target, p, value);
+                signals?.onUpdatingVideo?.emit(value);
                 return result;
             }
             default: {
@@ -223,11 +242,12 @@ const createMediaPropsHandler = (signals) => ({
  *
  * @param options - @see MediaOptions
  */
-export const createMedia = ({ getMuteState, signals, audioProcessors, videoProcessors, getDefaultConstraints = () => ({}), }) => {
+export const createMedia = ({ getMuteState, signals, audioProcessors, videoProcessors, stopVideoTrackAsMute = () => true, getDefaultConstraints = () => ({}), }) => {
     const _props = {
         devices: createIndexedDevices([]),
         discardMedia: false,
-        updatingMedia: false,
+        updatingAudio: false,
+        updatingVideo: false,
     };
     const props = new Proxy(_props, createMediaPropsHandler(signals));
     const queue = createAsyncQueue({
@@ -304,9 +324,11 @@ export const createMedia = ({ getMuteState, signals, audioProcessors, videoProce
         },
     });
     const getUserMediaProcess = createGetUserMediaProcess({
-        getUserMedia: requestUserMediaWithRetry(getCurrentDevices),
         getCurrentDevices,
+        getUserMedia: requestUserMediaWithRetry(getCurrentDevices),
         signals,
+        stopVideoTrackAsMute,
+        updateMedia: constraints => updateMedia(constraints),
     });
     const processAndUpdateMedia = async (media, tracks) => {
         const processedTracks = await processMedia(tracks);
@@ -359,12 +381,24 @@ export const createMedia = ({ getMuteState, signals, audioProcessors, videoProce
      * @param constraints - @see MediaDeviceRequest
      */
     const updateMedia = async (constraints) => {
+        const updateAudio = constraints.audio !== undefined;
+        const updateVideo = constraints.video !== undefined;
         try {
-            props.updatingMedia = true;
+            if (updateAudio) {
+                props.updatingAudio = true;
+            }
+            if (updateVideo) {
+                props.updatingVideo = true;
+            }
             await updateMediaProcess(constraints, props.media);
         }
         finally {
-            props.updatingMedia = false;
+            if (updateAudio) {
+                props.updatingAudio = false;
+            }
+            if (updateVideo) {
+                props.updatingVideo = false;
+            }
         }
     };
     const mergeMediaConstraints = (constraints) => {
@@ -424,8 +458,11 @@ export const createMedia = ({ getMuteState, signals, audioProcessors, videoProce
         navigator.mediaDevices.addEventListener('devicechange', handleDeviceChange);
     }
     return {
-        get updatingMedia() {
-            return props.updatingMedia;
+        get updatingAudio() {
+            return props.updatingAudio;
+        },
+        get updatingVideo() {
+            return props.updatingVideo;
         },
         get media() {
             return props.media;

package/dist/previewController.d.ts

@@ -1,4 +1,4 @@
-import type { IndexedDevices, MediaDeviceInfoLike, MediaDeviceRequest } from '@pexip/media-control';
+import type { IndexedDevices, InputConstraintSet, MediaDeviceInfoLike, MediaDeviceRequest } from '@pexip/media-control';
 import type { AsyncQueueOptions } from '@pexip/utils';
 import type { Media, MediaSignals, TrackProcessor, Unsubscribe } from './types';
 type EventCallback<T> = (event: T) => void;
@@ -12,7 +12,10 @@ export interface PreviewEventHandler {
     audioInputError?: EventErrorCallback;
     applyChangesError?: EventErrorCallback;
     revertChangesError?: EventErrorCallback;
-    updatingPreview?: EventCallback<boolean>;
+    updatingPreviewAudio?: EventCallback<boolean>;
+    updatingPreviewVideo?: EventCallback<boolean>;
+    audioMuted?: EventCallback<boolean | undefined>;
+    videoMuted?: EventCallback<boolean | undefined>;
     updatingMain?: EventCallback<boolean>;
     unsubscribeMain?: Unsubscribe;
 }
@@ -20,22 +23,31 @@ export interface PreviewStreamParams {
     getCurrentDevices: () => IndexedDevices;
     getCurrentMedia: () => Media | undefined;
     updateMainStream: (request: MediaDeviceRequest) => Promise<void>;
-    mediaSignal: MediaSignals['onMediaChanged'];
+    mainMediaSignal: MediaSignals['onMediaChanged'];
     onEnded?: () => void;
     fftSize?: number;
     queueOptions?: Partial<AsyncQueueOptions>;
     audioProcessors: TrackProcessor[];
     videoProcessors: TrackProcessor[];
+    /**
+     * Pass default constraints to use with get media wrappers
+     */
+    getDefaultConstraints?: () => {
+        audio?: InputConstraintSet | false;
+        video?: InputConstraintSet | false;
+    };
 }
 export interface PreviewControllerProps {
     media: Media | undefined;
     audioInput?: MediaDeviceInfoLike;
     videoInput?: MediaDeviceInfoLike;
-    updatingPreview: boolean;
+    updatingPreviewAudio: boolean;
+    updatingPreviewVideo: boolean;
     updatingMain: boolean;
     originalMainAudioInput?: MediaDeviceInfoLike;
     discardMedia: boolean;
     initialized: boolean;
+    signals: MediaSignals;
 }
 export interface PreviewStreamController {
     media: Media | undefined;
@@ -44,8 +56,10 @@ export interface PreviewStreamController {
     inputChanged: boolean;
     audioInput: PreviewInput;
     videoInput: PreviewInput;
-    updatingPreview: boolean;
     updatingMain: boolean;
+    updatingPreviewAudio: boolean;
+    updatingPreviewVideo: boolean;
+    updatePreviewInput(input: PreviewInput): void;
     updateAudioInput(id: string): void;
     updateVideoInput(id: string): void;
     applyChanges(force?: boolean): Promise<void>;
@@ -54,13 +68,16 @@ export interface PreviewStreamController {
     onMediaChanged(callback: EventCallback<Media>): Unsubscribe;
     onAudioInputChanged(callback: EventCallback<PreviewInput>): Unsubscribe;
     onVideoInputChanged(callback: EventCallback<PreviewInput>): Unsubscribe;
-    onUpdatingPreview(callback: EventCallback<boolean>): Unsubscribe;
+    onUpdatingPreviewAudio(callback: EventCallback<boolean>): Unsubscribe;
+    onUpdatingPreviewVideo(callback: EventCallback<boolean>): Unsubscribe;
     onUpdatingMain(callback: EventCallback<boolean>): Unsubscribe;
     onAudioInputError(callback: EventErrorCallback): Unsubscribe;
     onVideoInputError(callback: EventErrorCallback): Unsubscribe;
     onApplyChangesError(callback: EventErrorCallback): Unsubscribe;
     onRevertChangesError(callback: EventErrorCallback): Unsubscribe;
+    onAudioMuted(callback: EventCallback<boolean | undefined>): Unsubscribe;
+    onVideoMuted(callback: EventCallback<boolean | undefined>): Unsubscribe;
 }
-export declare const createPreviewStreamController: ({ getCurrentDevices, getCurrentMedia, updateMainStream, onEnded, mediaSignal, queueOptions, audioProcessors, videoProcessors, }: PreviewStreamParams) => PreviewStreamController;
+export declare const createPreviewStreamController: ({ getCurrentDevices, getCurrentMedia, updateMainStream, onEnded, mainMediaSignal, queueOptions, audioProcessors, videoProcessors, getDefaultConstraints, }: PreviewStreamParams) => PreviewStreamController;
 export type CreatePreviewStreamController = typeof createPreviewStreamController;
 export {};

package/dist/previewController.js

@@ -1,9 +1,10 @@
-import { hasChangedInput, isMediaDeviceInfo, reverseDeviceId, } from '@pexip/media-control';
+import { hasChangedInput, isMediaDeviceInfo, mergeConstraints, reverseDeviceId, } from '@pexip/media-control';
 import { createAsyncQueue, assert } from '@pexip/utils';
-import { AUDIO_SETTINGS_KEYS, VIDEO_SETTINGS_KEYS, createMediaProcessor, hasSettingsChanged, } from './utils';
+import { AUDIO_SETTINGS_KEYS, VIDEO_SETTINGS_KEYS, createMediaProcessor, hasSettingsChanged, isTrackEnded, isTrackMuted, } from './utils';
 import { isMedia } from './typeGuard';
 import { createModuleLogger } from './logger';
 import { createGetUserMediaProcess, requestUserMediaWithRetry, } from './userMedia';
+import { createMediaSignals } from './signals';
 import { createMediaUpdater } from './media';
 const DEFAULT_QUEUE_DELAY_MS = 100;
 const DEFAULT_QUEUE_DROP_LAST = false;
@@ -46,20 +47,30 @@ const createAudioVideoProcessingSettingsChangeDetector = (getCurrentMedia, getPr
         return changed;
     };
 };
-export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMedia, updateMainStream, onEnded, mediaSignal, queueOptions = {
+export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMedia, updateMainStream, onEnded, mainMediaSignal, queueOptions = {
     size: DEFAULT_QUEUE_SIZE,
     throttleInMS: DEFAULT_QUEUE_THROTTLE_MS,
     delayInMS: DEFAULT_QUEUE_DELAY_MS,
     dropLast: DEFAULT_QUEUE_DROP_LAST,
-}, audioProcessors, videoProcessors, }) => {
+}, audioProcessors, videoProcessors, getDefaultConstraints = () => ({}), }) => {
     const queue = createAsyncQueue(queueOptions);
     const eventHandlers = {};
     const internalProps = {
         media: undefined,
-        updatingPreview: false,
+        updatingPreviewAudio: false,
+        updatingPreviewVideo: false,
         updatingMain: false,
         discardMedia: false,
         initialized: false,
+        signals: createMediaSignals([
+            'onAddTrack',
+            'onAudioMuteStateChanged',
+            'onRemoveTrack',
+            'onStatusChanged',
+            'onUpdatingAudio',
+            'onUpdatingVideo',
+            'onVideoMuteStateChanged',
+        ], 'PreviewStreamController'),
     };
     const logger = createModuleLogger({
         module: 'PreviewStreamController',
@@ -102,7 +113,8 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
                     return true;
                 }
                 case 'updatingMain':
-                case 'updatingPreview': {
+                case 'updatingPreviewVideo':
+                case 'updatingPreviewAudio': {
                     if (typeof value !== 'boolean') {
                         return false;
                     }
@@ -116,10 +128,56 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
             }
         },
     });
+    const subscriptions = [
+        props.signals.onAudioMuteStateChanged?.add(muted => {
+            eventHandlers.audioMuted?.(muted);
+        }),
+        props.signals.onVideoMuteStateChanged?.add(muted => {
+            eventHandlers.videoMuted?.(muted);
+        }),
+        props.signals.onAddTrack?.add(track => {
+            switch (track.kind) {
+                case 'audio': {
+                    eventHandlers.audioMuted?.(isTrackMuted(track) || isTrackEnded(track));
+                    break;
+                }
+                case 'video': {
+                    eventHandlers.videoMuted?.(isTrackMuted(track) || isTrackEnded(track));
+                    break;
+                }
+            }
+        }),
+        props.signals.onRemoveTrack?.add(track => {
+            switch (track.kind) {
+                case 'audio': {
+                    eventHandlers.audioMuted?.(isTrackMuted(track) || isTrackEnded(track));
+                    break;
+                }
+                case 'video': {
+                    eventHandlers.videoMuted?.(isTrackMuted(track) || isTrackEnded(track));
+                    break;
+                }
+            }
+        }),
+    ];
     const getUserMedia = createGetUserMediaProcess({
         getUserMedia: requestUserMediaWithRetry(() => Promise.resolve(getCurrentDevices())),
+        signals: props.signals,
         getCurrentDevices: () => Promise.resolve(getCurrentDevices()),
+        stopVideoTrackAsMute: () => false,
+        updateMedia: constraints => updateMedia(constraints),
     });
+    const mergeMediaConstraints = (constraints) => {
+        const { audio, video } = getDefaultConstraints();
+        return {
+            audio: audio === false
+                ? false
+                : mergeConstraints(audio)(constraints.audio),
+            video: video === false
+                ? false
+                : mergeConstraints(video)(constraints.video),
+        };
+    };
     const processMedia = createMediaProcessor({
         audioProcessors,
         videoProcessors,
@@ -127,7 +185,7 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
             logger.error({ error, track }, 'Failed to process media track');
         },
     });
-    const processAndUpdateMedia = async (media, tracks) => {
+    const processAndUpdateMedia = async (media, tracks, sync = false) => {
         try {
             const processedTracks = await processMedia(tracks);
             for (const [idx, track] of processedTracks.entries()) {
@@ -135,6 +193,11 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
                 assert(originTrack, 'Processed track should always has the original track in the same order');
                 // Only replace track when they are not the same
                 if (originTrack.id !== track.id) {
+                    if (sync) {
+                        if (originTrack.track && track.track) {
+                            track.track.enabled = originTrack.track.enabled;
+                        }
+                    }
                     media.removeTrack(originTrack);
                     media.addTrack(track);
                 }
@@ -146,24 +209,29 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
     };
     const updateMediaProcess = createMediaUpdater({
         getUserMedia,
+        signals: props.signals,
+        getDefaultConstraints,
         getCurrentDevices: () => Promise.resolve(getCurrentDevices()),
         shouldDiscardMedia: () => props.discardMedia,
         onMediaTracksChanged: (media, tracks) => {
             props.media = media;
             queue.enqueue(async () => {
-                await processAndUpdateMedia(media, tracks);
+                await processAndUpdateMedia(media, tracks, false);
             });
         },
     });
+    const updateMedia = async (constraints) => {
+        await updateMediaProcess(mergeMediaConstraints(constraints), props.media);
+    };
     const initFromMain = (mainMedia) => {
         if (!mainMedia?.stream) {
             return;
         }
         try {
-            const clonedMedia = mainMedia.clone();
+            const clonedMedia = mainMedia.clone(props.signals);
             props.media = clonedMedia;
             queue.enqueue(async () => {
-                await processAndUpdateMedia(clonedMedia, clonedMedia.getTracks());
+                await processAndUpdateMedia(clonedMedia, clonedMedia.getTracks(), true);
             });
             props.audioInput = mainMedia.audioInput;
             props.videoInput = mainMedia.videoInput;
@@ -184,7 +252,7 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
         initFromMain(mainMedia);
     }
     else {
-        eventHandlers.unsubscribeMain = mediaSignal.add(initFromMain);
+        eventHandlers.unsubscribeMain = mainMediaSignal.add(initFromMain);
     }
     const replaceMainStream = async (constraints) => {
         logger.debug({ constraints }, 'Replacing main stream');
@@ -194,7 +262,7 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
     };
     const updatePreviewMedia = async (constraints) => {
         logger.debug({ constraints }, 'Requesting a new preview stream');
-        await updateMediaProcess(constraints, props.media);
+        await updateMedia(constraints);
         logger.debug({ media: props.media }, 'Preview media updated');
     };
     const releaseAudio = async () => {
@@ -211,7 +279,7 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
         const request = { audio: { device: { exact: input } } };
         try {
             props.audioInput = input;
-            props.updatingPreview = true;
+            props.updatingPreviewAudio = true;
             if (props.audioInput === undefined) {
                 return await releaseAudio();
             }
@@ -248,13 +316,13 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
             }
         }
         finally {
-            props.updatingPreview = false;
+            props.updatingPreviewAudio = false;
         }
     };
     const updateVideoInput = async (input) => {
         try {
             props.videoInput = input;
-            props.updatingPreview = true;
+            props.updatingPreviewVideo = true;
             if (input === undefined) {
                 return await releaseVideo();
             }
@@ -268,13 +336,17 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
             throw error;
         }
         finally {
-            props.updatingPreview = false;
+            props.updatingPreviewVideo = false;
         }
     };
     const cleanup = async () => {
         logger.debug('Cleanup preview controller');
         await props.media?.release();
         cleanUpMainSubscription();
+        for (const unsub of subscriptions) {
+            unsub?.();
+        }
+        subscriptions.length = 0;
         props.audioInput = undefined;
         props.videoInput = undefined;
         onEnded?.();
@@ -379,12 +451,25 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
         get videoInput() {
             return props.videoInput;
         },
-        get updatingPreview() {
-            return props.updatingPreview;
+        get updatingPreviewAudio() {
+            return props.updatingPreviewAudio;
+        },
+        get updatingPreviewVideo() {
+            return props.updatingPreviewVideo;
         },
         get updatingMain() {
             return props.updatingMain;
         },
+        updatePreviewInput: input => {
+            switch (input?.kind) {
+                case 'audioinput': {
+                    return updateAudioInput(input);
+                }
+                case 'videoinput': {
+                    return updateVideoInput(input);
+                }
+            }
+        },
         updateAudioInput: updateInput(input => props.initialized && hasChangedInput(props.audioInput, input), updateAudioInput),
         updateVideoInput: updateInput(input => props.initialized && hasChangedInput(props.videoInput, input), updateVideoInput),
         onMediaChanged: toEvenHandler('media'),
@@ -394,8 +479,11 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
         onVideoInputError: toEvenHandler('videoInputError'),
         onApplyChangesError: toEvenHandler('applyChangesError'),
         onRevertChangesError: toEvenHandler('revertChangesError'),
-        onUpdatingPreview: toEvenHandler('updatingPreview'),
+        onUpdatingPreviewAudio: toEvenHandler('updatingPreviewAudio'),
+        onUpdatingPreviewVideo: toEvenHandler('updatingPreviewVideo'),
         onUpdatingMain: toEvenHandler('updatingMain'),
+        onAudioMuted: toEvenHandler('audioMuted'),
+        onVideoMuted: toEvenHandler('videoMuted'),
         applyChanges,
         revertChanges,
         cleanup,

package/dist/types.d.ts

@@ -150,6 +150,7 @@ export interface MediaTrack {
      * `kind`. @see MediaTrackInit
      */
     id: string;
+    stopped: boolean;
     kind: 'audioinput' | 'videoinput';
     label?: string;
     previousMediaTrack?: MediaTrack;
@@ -184,13 +185,14 @@ export interface MediaTrack {
     clone(signals?: MediaSignals): MediaTrack;
     toJSON(): unknown;
 }
-export interface MediaTrackInit extends Partial<MediaTrack> {
+export interface MediaTrackInit extends Partial<Omit<MediaTrack, 'mute'>> {
     kind: 'audioinput' | 'videoinput';
     input: MediaDeviceInfoLike | undefined;
     expectedInput?: MediaDeviceInfoLike | undefined;
     constraints: InputDeviceConstraint;
     overrideMute?: boolean;
     signals?: MediaSignals;
+    mute?: (toMute: boolean, self: MediaTrack) => void;
 }
 export type Process<T> = (a: T) => Promise<MediaTrack>;
 export type TrackProcessor = Process<MediaTrack>;
@@ -444,6 +446,7 @@ export interface MediaOptions {
      */
     audioProcessors: TrackProcessor[];
     videoProcessors: TrackProcessor[];
+    stopVideoTrackAsMute?: () => boolean;
     /**
      * A function to get the devices' mute state
      */
@@ -469,10 +472,12 @@ export interface MediaProps {
      * When should we discard the requested MediaStream
      */
     discardMedia: boolean;
-    updatingMedia: boolean;
+    updatingAudio: boolean;
+    updatingVideo: boolean;
 }
 export interface MediaController {
-    readonly updatingMedia: boolean;
+    readonly updatingAudio: boolean;
+    readonly updatingVideo: boolean;
     /**
      * Current Media
      */
@@ -554,7 +559,8 @@ export interface MediaChangesSignals {
     onRemoveTrack: Signal<MediaStreamTrack>;
     onStatusChanged: Signal<UserMediaStatus>;
     onVideoMuteStateChanged: Signal<boolean | undefined>;
-    onUpdatingMedia: Signal<boolean>;
+    onUpdatingAudio: Signal<boolean>;
+    onUpdatingVideo: Signal<boolean>;
 }
 export interface AudioDetectionSignals {
     onVAD: Signal<undefined>;

package/dist/userMedia.d.ts

@@ -12,7 +12,10 @@ export declare const toSameDeviceStatus: ({ audio, video, }: {
     video: boolean;
 }) => UserMediaStatus.PermissionsGranted | UserMediaStatus.PermissionsGrantedFallback | UserMediaStatus.PermissionsGrantedFallbackAudioinput | UserMediaStatus.PermissionsGrantedFallbackVideoinput;
 export declare const toOnlyDeviceStatus: (kind: "audioinput" | "videoinput", matched: boolean, devices: IndexedDevices) => UserMediaStatus.PermissionsRejectedAudioInput | UserMediaStatus.PermissionsRejectedVideoInput | UserMediaStatus.PermissionsOnlyAudioinput | UserMediaStatus.PermissionsOnlyAudioinputNoVideoDevices | UserMediaStatus.PermissionsOnlyAudioinputFallback | UserMediaStatus.PermissionsOnlyAudioinputFallbackNoVideoDevices | UserMediaStatus.PermissionsOnlyVideoinput | UserMediaStatus.PermissionsOnlyVideoinputNoAudioDevices | UserMediaStatus.PermissionsOnlyVideoinputFallback | UserMediaStatus.PermissionsOnlyVideoinputFallbackNoAudioDevices;
-export declare const hasLiveTrack: (kind: "audio" | "video", tracks: MediaStreamTrack[]) => boolean;
+/**
+ * Check if there is any track match with the `kind`
+ */
+export declare const hasTrack: (kind: "audio" | "video", tracks: MediaStreamTrack[]) => boolean;
 /**
  * Merge the previous status with the next status and assuming requesting both
  * video and audio inputs.
@@ -35,13 +38,15 @@ export declare const mergeNoDeviceStatus: (constraints: MediaDeviceRequest, anyD
 export declare const deriveUserMediaStatus: (devices: IndexedDevices, constraints: MediaDeviceRequest, prevStatus: UserMediaStatus) => UserMediaStatus;
 export declare const requestUserMediaWithRetry: (getCurrentDevices: GetCurrentDevices, createRequestUserMedia?: (getCurrentDevices: GetCurrentDevices, getMedia?: ({ audio, video, }: MediaDeviceRequest) => Promise<MediaStream>) => GetUserMedia, gUM?: ({ audio, video, }: MediaDeviceRequest) => Promise<MediaStream>) => GetUserMedia;
 interface Options {
-    getUserMedia: GetUserMedia;
     getCurrentDevices: GetCurrentDevices;
-    signals?: MediaSignals;
+    getUserMedia: GetUserMedia;
     scope?: string;
+    signals?: MediaSignals;
+    stopVideoTrackAsMute: () => boolean;
+    updateMedia: (constraints: MediaDeviceRequest) => Promise<void>;
 }
 /**
  * A process to get user media
  */
-export declare const createGetUserMediaProcess: ({ getUserMedia, getCurrentDevices, signals, scope, }: Options) => GetUserMediaProcess;
+export declare const createGetUserMediaProcess: ({ getCurrentDevices, getUserMedia, scope, signals, stopVideoTrackAsMute, updateMedia, }: Options) => GetUserMediaProcess;
 export {};

package/dist/userMedia.js

@@ -1,7 +1,7 @@
 import { MediaDeviceFailure, extractConstraintsWithKeys, findMediaInputFromMediaStreamTrack, getUserMedia, isExactDeviceConstraint, isStreamingRequestedDevices, relaxInputConstraint, } from '@pexip/media-control';
 import { assert } from '@pexip/utils';
 import { UserMediaStatus } from './types';
-import { makeDeriveDeviceStatus, buildMedia, createMediaTrack, findExpectedInput, } from './utils';
+import { buildMedia, createMediaTrack, findExpectedInput, isTrackMuted, makeDeriveDeviceStatus, } from './utils';
 import { logger } from './logger';
 import { isUnknownError } from './status';
 import { PROCESSOR_LABELS } from './constants';
@@ -103,22 +103,25 @@ export const toOnlyDeviceStatus = (kind, matched, devices) => {
         ? UserMediaStatus.PermissionsOnlyAudioinputFallbackNoVideoDevices
         : UserMediaStatus.PermissionsOnlyVideoinputFallbackNoAudioDevices;
 };
-export const hasLiveTrack = (kind, tracks) => tracks.some(track => track.kind === kind && track.readyState === 'live');
+/**
+ * Check if there is any track match with the `kind`
+ */
+export const hasTrack = (kind, tracks) => tracks.some(track => track.kind === kind);
 /**
  * Merge the previous status with the next status and assuming requesting both
  * video and audio inputs.
  */
 export const mergeStatus = (prevStatus, nextStatus, prevTracks = [], nextTracks = []) => {
-    const hasPrevLiveAudio = hasLiveTrack('audio', prevTracks);
-    const hasPrevLiveVideo = hasLiveTrack('video', prevTracks);
-    const hasNextLiveAudio = hasLiveTrack('audio', nextTracks);
-    const hasNextLiveVideo = hasLiveTrack('video', nextTracks);
+    const prevValidAudio = hasTrack('audio', prevTracks);
+    const preValidVideo = hasTrack('video', prevTracks);
+    const nextValidAudio = hasTrack('audio', nextTracks);
+    const nextValidVideo = hasTrack('video', nextTracks);
     // Replace Audio Track
-    if (hasNextLiveAudio) {
-        assert(hasPrevLiveAudio === false, 'Only 1 live audio');
+    if (nextValidAudio) {
+        assert(prevValidAudio === false, 'Only 1 valid audio');
         // Replace Audio and Video tracks
-        if (hasNextLiveVideo) {
-            assert(hasPrevLiveVideo === false, 'Only 1 live video');
+        if (nextValidVideo) {
+            assert(preValidVideo === false, 'Only 1 valid video');
             // No need to consider the previous status
             switch (nextStatus) {
                 case UserMediaStatus.PermissionsOnlyVideoinput:
@@ -132,7 +135,7 @@ export const mergeStatus = (prevStatus, nextStatus, prevTracks = [], nextTracks
                     return nextStatus;
             }
         }
-        if (hasPrevLiveVideo) {
+        if (preValidVideo) {
             // Merge previous video status with next audio status
             switch (prevStatus) {
                 case UserMediaStatus.PermissionsGranted:
@@ -215,9 +218,9 @@ export const mergeStatus = (prevStatus, nextStatus, prevTracks = [], nextTracks
         }
     }
     // Replace Video Track Only
-    if (hasNextLiveVideo) {
-        assert(hasPrevLiveVideo === false, 'Only 1 live video');
-        if (hasPrevLiveAudio) {
+    if (nextValidVideo) {
+        assert(preValidVideo === false, 'Only 1 valid video');
+        if (prevValidAudio) {
             switch (prevStatus) {
                 case UserMediaStatus.PermissionsGranted:
                 case UserMediaStatus.PermissionsGrantedFallbackVideoinput:
@@ -254,7 +257,7 @@ export const mergeStatus = (prevStatus, nextStatus, prevTracks = [], nextTracks
         }
     }
     // Failed to get a new track
-    if (hasPrevLiveAudio) {
+    if (prevValidAudio) {
         switch (nextStatus) {
             case UserMediaStatus.PermissionsRejected:
             case UserMediaStatus.PermissionsRejectedVideoInput: {
@@ -300,7 +303,7 @@ export const mergeStatus = (prevStatus, nextStatus, prevTracks = [], nextTracks
                 return prevStatus;
         }
     }
-    if (hasPrevLiveVideo) {
+    if (preValidVideo) {
         switch (nextStatus) {
             case UserMediaStatus.PermissionsRejected:
             case UserMediaStatus.PermissionsRejectedAudioInput:
@@ -466,7 +469,7 @@ export const requestUserMediaWithRetry = (getCurrentDevices, createRequestUserMe
 /**
  * A process to get user media
  */
-export const createGetUserMediaProcess = ({ getUserMedia, getCurrentDevices, signals, scope = 'media', }) => {
+export const createGetUserMediaProcess = ({ getCurrentDevices, getUserMedia, scope = 'media', signals, stopVideoTrackAsMute, updateMedia, }) => {
     return async ({ constraints, permission, originalConstraints, currentMedia, }) => {
         // Release the current track(s)
         if (currentMedia) {
@@ -553,10 +556,31 @@ export const createGetUserMediaProcess = ({ getUserMedia, getCurrentDevices, sig
         let audioMediaTrack;
         let videoMediaTrack;
         const extractContentHint = extractConstraintsWithKeys(['contentHint']);
+        /**
+         * Release the track as mute
+         */
+        const releaseTrackAsMute = async (track, toMute) => {
+            if (!track?.track || track.muted === toMute) {
+                return;
+            }
+            track.track.enabled = !toMute;
+            if (toMute) {
+                if (!track.stopped) {
+                    await track.release();
+                }
+            }
+            else {
+                if (track.stopped) {
+                    await updateMedia({
+                        [track.kind === 'audioinput' ? 'audio' : 'video']: track.getConstraints(),
+                    });
+                }
+            }
+        };
         if (constraints.audio !== undefined) {
             const audioTrack = stream?.getAudioTracks().at(0);
             const audioInput = findInput(audioTrack);
-            assert(Boolean(audioTrack) === Boolean(audioInput), 'audioTrack <=> audioInput');
+            assert(Boolean(audioTrack) === Boolean(audioInput), 'Inconsistent audioTrack and audioInput');
             const { contentHint: [[contentHint] = []], } = extractContentHint(constraints.audio);
             if (audioTrack) {
                 audioTrack.contentHint = contentHint ?? '';
@@ -575,7 +599,7 @@ export const createGetUserMediaProcess = ({ getUserMedia, getCurrentDevices, sig
         if (constraints.video !== undefined) {
             const videoTrack = stream?.getVideoTracks().at(0);
             const videoInput = findInput(videoTrack);
-            assert(Boolean(videoTrack) === Boolean(videoInput), 'videoTrack <=> videoInput');
+            assert(Boolean(videoTrack) === Boolean(videoInput), 'Inconsistent videoTrack and videoInput');
             const { contentHint: [[contentHint] = []], } = extractContentHint(constraints.video);
             if (videoTrack) {
                 videoTrack.contentHint = contentHint ?? '';
@@ -586,6 +610,13 @@ export const createGetUserMediaProcess = ({ getUserMedia, getCurrentDevices, sig
                 track: videoTrack,
                 input: videoInput,
                 expectedInput: findExpectedInput(devices, constraints.video, videoInput, 'videoinput'),
+                overrideMute: stopVideoTrackAsMute(),
+                get muted() {
+                    return isTrackMuted(videoTrack);
+                },
+                mute(toMute, self) {
+                    releaseTrackAsMute(self, toMute);
+                },
                 constraints: constraints.video,
                 signals,
             });

package/dist/utils.d.ts

@@ -28,6 +28,7 @@ export declare const findExpectedInput: (devices: IndexedDevices, constraints: I
  * there is no track to check
  */
 export declare const isTrackMuted: (track: MediaStreamTrack | undefined) => boolean | undefined;
+export declare const isTrackEnded: (track: MediaStreamTrack) => boolean;
 export declare const buildMedia: (mediaInit: MediaInit, onDevicesChanged?: import("@pexip/signal").Signal<IndexedDevices, IndexedDevices>) => Media;
 /**
  * Shallow copy the provided object and override with provided overriding
@@ -58,11 +59,12 @@ export declare const mergeSettings: (settingsA: ExtendedMediaTrackSettings | und
  * @param percentage - The percentage of image height to calculate the blur
  * kernel size
  * @param height - The image height
+ * @param lowestProcessingHeight - The lowest image height that is processed by the consumer, used to adjust the blur kernel size across different resolutions
  * @param max - The upper bound
  *
  * @returns blur kernel size
  */
-export declare const getBlurKernelSize: (percentage: number, height: number, max?: number) => number;
+export declare const getBlurKernelSize: (percentage: number, height: number, lowestProcessingHeight?: number, max?: number) => number;
 /**
  * Apply the content hint to the track
  *

package/dist/utils.js

@@ -19,6 +19,10 @@ export const createMediaTrack = (trackInit) => {
         (trackInit.kind === trackInit.input?.kind &&
             trackInit.kind === toMediaDeviceInputKind(trackInit.track));
     assert(trackConsistency, `Inconsistent track kind: ${trackInit.input?.kind} ${trackInit.track && toMediaDeviceInputKind(trackInit.track)} vs ${trackInit.kind}`);
+    assert(!trackInit.overrideMute ||
+        (trackInit.overrideMute &&
+            Object.hasOwn(trackInit, 'mute') &&
+            Object.hasOwn(trackInit, 'muted')), 'Inconsistent overrideMute');
     const currentConstraints = typeof trackInit.constraints === 'boolean' ? {} : trackInit.constraints;
     // Find the original source track through the linked list
     let sourceMediaTrack = trackInit.previousMediaTrack;
@@ -52,9 +56,10 @@ export const createMediaTrack = (trackInit) => {
             return trackInit.track;
         },
         get input() {
-            return trackInit.track?.readyState !== 'live'
-                ? undefined
-                : trackInit.input;
+            if (!trackInit.track) {
+                return undefined;
+            }
+            return trackInit.input;
         },
         get expectedInput() {
             return trackInit.expectedInput;
@@ -69,23 +74,26 @@ export const createMediaTrack = (trackInit) => {
             if (trackInit.overrideMute) {
                 return trackInit.muted;
             }
-            return (
-            // If the source track muted, the following processed track will
-            // be muted as well since there is no data to process
-            !!isTrackMuted(this.source.track) ||
-                isTrackMuted(trackInit.track));
+            // The source is itself, just access the track's state
+            if (this.source === this) {
+                return isTrackMuted(trackInit.track);
+            }
+            return this.source.muted;
+        },
+        get stopped() {
+            return trackInit.track ? isTrackEnded(trackInit.track) : true;
         },
         get source() {
             return sourceMediaTrack ?? mediaTrack;
         },
         mute(toMute) {
             if (trackInit.overrideMute) {
-                return trackInit.mute?.(toMute);
+                return trackInit.mute?.(toMute, this);
             }
-            trackInit.previousMediaTrack?.mute(toMute);
             if (trackInit.track) {
                 trackInit.track.enabled = !toMute;
             }
+            trackInit.previousMediaTrack?.mute(toMute);
         },
         getSettings,
         getConstraints() {
@@ -96,6 +104,9 @@ export const createMediaTrack = (trackInit) => {
                 ...trackInit,
                 constraints: getConstraints(),
                 track: trackInit.track?.clone(),
+                // When Cloning a MediaTrack, overrideMute should be turned off since
+                // it might corrupt the logic of its original media pipeline
+                overrideMute: false,
                 signals,
             });
         },
@@ -161,7 +172,7 @@ export const createTrackProcessingPipeline = (processors) => async (track) => {
     let lastTrack = track;
     for (const process of processors) {
         if (lastTrack.track?.readyState !== 'live') {
-            return lastTrack;
+            continue;
         }
         lastTrack = await process(lastTrack);
     }
@@ -208,11 +219,12 @@ export const findExpectedInput = (devices, constraints, input, kind) => {
  * there is no track to check
  */
 export const isTrackMuted = (track) => {
-    if (!track || track.readyState === 'ended') {
+    if (!track) {
         return undefined;
     }
     return track.muted || !track.enabled;
 };
+export const isTrackEnded = (track) => track.readyState === 'ended';
 export const buildMedia = (mediaInit, onDevicesChanged = internalSignals.onDevicesChanged) => {
     const props = {
         originalConstraints: mediaInit.originalConstraints ?? mediaInit.constraints,
@@ -360,13 +372,13 @@ export const buildMedia = (mediaInit, onDevicesChanged = internalSignals.onDevic
                     props.devices.size('videoinput') > 0));
         },
         muteAudio(mute) {
-            if (!props.audioTrack) {
+            if (!props.audioTrack || props.audioTrack.muted === mute) {
                 return;
             }
             muteTrack(props.audioTrack, mute);
         },
         muteVideo(mute) {
-            if (!props.videoTrack) {
+            if (!props.videoTrack || props.videoTrack.muted === mute) {
                 return;
             }
             muteTrack(props.videoTrack, mute);
@@ -403,20 +415,19 @@ export const buildMedia = (mediaInit, onDevicesChanged = internalSignals.onDevic
                     return [];
                 }
                 const cloned = track.source.clone(signals);
-                // Restore the enabled state for all cloned track
-                cloned.mute(false);
                 return cloned;
             });
             const stream = this.stream &&
                 new MediaStream(tracks.flatMap(track => (track.track ? [track.track] : [])));
             const clonedMedia = buildMedia({
-                tracks,
-                devices: this.devices,
-                status: this.status,
-                stream,
                 constraints: this.getConstraints(),
+                devices: this.devices,
                 originalConstraints: this.getOriginalConstraints(),
                 permission: mediaInit.permission,
+                signals,
+                status: this.status,
+                stream,
+                tracks,
             });
             return clonedMedia;
         },
@@ -634,15 +645,20 @@ export const mergeSettings = (settingsA, settingsB) => {
  * @param percentage - The percentage of image height to calculate the blur
  * kernel size
  * @param height - The image height
+ * @param lowestProcessingHeight - The lowest image height that is processed by the consumer, used to adjust the blur kernel size across different resolutions
  * @param max - The upper bound
  *
  * @returns blur kernel size
  */
-export const getBlurKernelSize = (percentage, height, max = calculateMaxBlurPass(height)) => {
+export const getBlurKernelSize = (percentage, height, lowestProcessingHeight, max = calculateMaxBlurPass(height)) => {
     if (height <= 0 || percentage <= 0 || max <= 0) {
         return 0;
     }
-    return Math.min(Math.ceil(percentage * 0.01 * max), max);
+    const minHeightMaxBlurPass = lowestProcessingHeight
+        ? calculateMaxBlurPass(lowestProcessingHeight)
+        : max;
+    return Math.min(Math.ceil(percentage * 0.01 * max) +
+        Math.max(0, max - minHeightMaxBlurPass), max);
 };
 /**
  * Apply the content hint to the track

package/dist/videoProcessor.d.ts

@@ -18,12 +18,14 @@ interface VideoStreamProcessOptions extends Partial<VideoRenderParams>, Omit<Pro
      * Whether or to enable this processor
      */
     shouldEnable: () => boolean;
+    lowestProcessingHeight?: number;
     processingWidth: number;
     processingHeight: number;
     hasInitializedDeps?: boolean;
     width?: number;
     height?: number;
     label?: string;
+    stopAsMute?: () => boolean;
     dynamicProcessingDimensions?: () => boolean;
     gpuAPI?: () => RenderBackend;
 }
@@ -35,5 +37,5 @@ declare const FEATURE_KEYS: readonly ["backgroundBlurAmount", "backgroundImageUr
 type FeaturePropKeys = (typeof FEATURE_KEYS)[number];
 type FeatureProps = Pick<Partial<VideoStreamProcessProps>, FeaturePropKeys>;
 export declare const updateFeatureProps: (constraints: MediaDeviceRequest["video"], props: FeatureProps) => FeatureProps;
-export declare const createVideoStreamProcess: ({ trackProcessorAPI, processingWidth, processingHeight, shouldEnable, frameRate, videoSegmentation, foregroundThreshold, backgroundImageUrl, maskCombineRatio, edgeBlurAmount, label, dynamicProcessingDimensions, gpuAPI, ...options }: VideoStreamProcessOptions) => TrackProcessor;
+export declare const createVideoStreamProcess: ({ backgroundImageUrl, dynamicProcessingDimensions, edgeBlurAmount, foregroundThreshold, frameRate, gpuAPI, label, lowestProcessingHeight, maskCombineRatio, processingHeight, processingWidth, shouldEnable, stopAsMute, trackProcessorAPI, videoSegmentation, ...options }: VideoStreamProcessOptions) => TrackProcessor;
 export {};

package/dist/videoProcessor.js

@@ -94,7 +94,7 @@ export const updateFeatureProps = (constraints, props) => {
         }
     }, {});
 };
-const applyFeatures = (transformer, features) => {
+const applyFeatures = (transformer, features, lowestProcessingHeight) => {
     for (const key in features) {
         const k = key;
         switch (k) {
@@ -110,7 +110,7 @@ const applyFeatures = (transformer, features) => {
             case 'backgroundBlurAmount': {
                 const value = features[k];
                 if (value !== undefined) {
-                    transformer[k] = getBlurKernelSize(value, transformer.height);
+                    transformer[k] = getBlurKernelSize(value, transformer.height, lowestProcessingHeight);
                 }
                 break;
             }
@@ -141,19 +141,15 @@ const getTrackProcessor = (shouldUseStreamTrackProcessor, ...params) => {
     }
     return createVideoTrackProcessorWithFallback(...params);
 };
-export const createVideoStreamProcess = ({ trackProcessorAPI = () => 'stream', processingWidth, processingHeight, shouldEnable, frameRate, 
-//backgroundBlurAmount,
-videoSegmentation, 
-//edgeBlurAmount,
-foregroundThreshold, backgroundImageUrl, maskCombineRatio, edgeBlurAmount, label = PROCESSOR_LABELS.VideoProcessor, dynamicProcessingDimensions = () => false, gpuAPI = () => 'webgl', // dynamically changing the config will not be picked up, not a priority for now
-...options }) => {
+export const createVideoStreamProcess = ({ backgroundImageUrl, dynamicProcessingDimensions = () => false, edgeBlurAmount, foregroundThreshold, frameRate, gpuAPI = () => 'webgl', // dynamically changing the config will not be picked up, not a priority for now
+label = PROCESSOR_LABELS.VideoProcessor, lowestProcessingHeight, maskCombineRatio, processingHeight, processingWidth, shouldEnable, stopAsMute = () => false, trackProcessorAPI = () => 'stream', videoSegmentation, ...options }) => {
     const videoSegmentationModel = options.videoSegmentationModel ?? 'selfie';
     const segmenter = options.segmenters[videoSegmentationModel];
     if (!segmenter) {
         throw new Error('Segmenter is undefined');
     }
     const backgroundBlurAmount = options.backgroundBlurAmount &&
-        getBlurKernelSize(options.backgroundBlurAmount, processingHeight);
+        getBlurKernelSize(options.backgroundBlurAmount, processingHeight, lowestProcessingHeight);
     const transformer = options.transformer ??
         createCanvasTransform(segmenter, {
             width: processingWidth,
@@ -199,29 +195,39 @@ foregroundThreshold, backgroundImageUrl, maskCombineRatio, edgeBlurAmount, label
         const features = updateFeatureProps(prevMediaTrack.getConstraints(), props);
         const shouldEnabled = shouldEnable();
         if (!shouldEnabled || !prevMediaTrack.track) {
-            logger.debug({ label, features, shouldEnabled }, 'Video processing is skipped');
+            logger.debug({
+                label,
+                features,
+                shouldEnabled,
+            }, 'Video processing is skipped');
             return prevMediaTrack;
         }
         if (!props.hasInitialized) {
             if (dynamicProcessingDimensions()) {
                 const { width, height } = prevMediaTrack.getSettings();
-                /**
-                 * when the processor is closed, the segmenter is not killed, but the track is released.
-                 * this means we can't listen on the track settings changes when we change quality
-                 * we need to update instead of open if the segmenter is already running
-                 */
-                if (props.transformer.segmenter.status === 'new') {
-                    await props.videoProcessor().open({
-                        processingWidth: width,
-                        processingHeight: height,
-                    });
-                    props.transformer.backend = gpuAPI();
-                }
-                else {
-                    props.transformer.update({
-                        processingWidth: width,
-                        processingHeight: height,
-                    });
+                if (width && height) {
+                    /**
+                     * when the processor is closed, the segmenter is not killed, but the track is released.
+                     * this means we can't listen on the track settings changes when we change quality
+                     * we need to update instead of open if the segmenter is already running
+                     */
+                    if (props.transformer.segmenter.status === 'new') {
+                        await props.videoProcessor().open({
+                            processingWidth: width,
+                            processingHeight: height,
+                        });
+                        props.transformer.backend = gpuAPI();
+                    }
+                    else {
+                        props.transformer.update({
+                            processingWidth: width,
+                            processingHeight: height,
+                        });
+                        if (props.backgroundBlurAmount !== undefined) {
+                            props.transformer.backgroundBlurAmount =
+                                getBlurKernelSize(props.backgroundBlurAmount, height, lowestProcessingHeight);
+                        }
+                    }
                 }
             }
             else {
@@ -230,7 +236,7 @@ foregroundThreshold, backgroundImageUrl, maskCombineRatio, edgeBlurAmount, label
             }
             props.hasInitialized = true;
         }
-        applyFeatures(props.transformer, features);
+        applyFeatures(props.transformer, features, lowestProcessingHeight);
         const model = features.videoSegmentationModel &&
             props.segmenters[features.videoSegmentationModel];
         if (features.videoSegmentationModel &&
@@ -257,8 +263,14 @@ foregroundThreshold, backgroundImageUrl, maskCombineRatio, edgeBlurAmount, label
             props.transformer.effects = mute
                 ? 'none'
                 : props.videoSegmentation ?? 'none';
-            prevMediaTrack.mute(mute);
             muteStreamTrack(stream)(mute, 'video');
+            if (mute && stopAsMute()) {
+                for (const track of stream.getVideoTracks()) {
+                    track.stop();
+                }
+                release();
+            }
+            prevMediaTrack.mute(mute);
         };
         return createMediaTrack({
             label,
@@ -279,7 +291,7 @@ foregroundThreshold, backgroundImageUrl, maskCombineRatio, edgeBlurAmount, label
                 if (isEmpty(features)) {
                     return;
                 }
-                applyFeatures(props.transformer, features);
+                applyFeatures(props.transformer, features, lowestProcessingHeight);
                 if (dynamicProcessingDimensions()) {
                     const acceptedSettings = prevMediaTrack.source.getSettings();
                     if (acceptedSettings.width && acceptedSettings.height) {
@@ -287,6 +299,10 @@ foregroundThreshold, backgroundImageUrl, maskCombineRatio, edgeBlurAmount, label
                             processingHeight: acceptedSettings.height,
                             processingWidth: acceptedSettings.width,
                         });
+                        if (props.backgroundBlurAmount !== undefined) {
+                            props.transformer.backgroundBlurAmount =
+                                getBlurKernelSize(props.backgroundBlurAmount, acceptedSettings.height, lowestProcessingHeight);
+                        }
                     }
                 }
                 const model = features.videoSegmentationModel &&

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pexip/media",
-  "version": "20.1.0",
+  "version": "20.2.0",
   "description": "Home for media related stuff",
   "homepage": "https://gitlab.com/pexip/zoo",
   "bugs": "https://gitlab.com/pexip/zoo/issues",
@@ -44,14 +44,14 @@
     "typecheck": "yarn tsc --noEmit -p ."
   },
   "dependencies": {
-    "@pexip/media-control": "20.1.0",
-    "@pexip/media-processor": "20.1.0",
-    "@pexip/signal": "16.8.0",
+    "@pexip/media-control": "20.2.0",
+    "@pexip/media-processor": "20.2.0",
+    "@pexip/signal": "16.9.0",
     "@pexip/utils": "17.0.0"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@pexip/bundler": "18.1.0",
+    "@pexip/bundler": "18.1.1",
     "@swc/core": "^1.10.12",
     "@swc/jest": "^0.2.37",
     "jest": "^29.5.12",

package/dist/tsconfig.build.tsbuildinfo

@@ -1 +0,0 @@
-{"root":["../src/audioMixingProcessor.ts","../src/audioProcessor.ts","../src/baseLogger.ts","../src/constants.ts","../src/displayMedia.ts","../src/index.ts","../src/logger.ts","../src/media.ts","../src/previewController.ts","../src/signals.ts","../src/status.ts","../src/typeGuard.ts","../src/types.ts","../src/userMedia.ts","../src/utils.ts","../src/videoProcessor.ts","../../../@types/globals.d.ts"],"version":"5.7.3"}