@pexip/media 20.1.0 → 20.3.0

package/dist/previewController.js

@@ -1,6 +1,6 @@
-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';
@@ -46,20 +46,22 @@ 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 = () => ({}), signals, }) => {
     const queue = createAsyncQueue(queueOptions);
     const eventHandlers = {};
     const internalProps = {
         media: undefined,
-        updatingPreview: false,
+        updatingPreviewAudio: false,
+        updatingPreviewVideo: false,
         updatingMain: false,
         discardMedia: false,
         initialized: false,
+        signals,
     };
     const logger = createModuleLogger({
         module: 'PreviewStreamController',
@@ -102,7 +104,8 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
                     return true;
                 }
                 case 'updatingMain':
-                case 'updatingPreview': {
+                case 'updatingPreviewVideo':
+                case 'updatingPreviewAudio': {
                     if (typeof value !== 'boolean') {
                         return false;
                     }
@@ -116,10 +119,74 @@ export const createPreviewStreamController = ({ getCurrentDevices, getCurrentMed
             }
         },
     });
+    const subscriptions = [
+        props.signals.onMediaTrackMuted?.add(track => {
+            if (track.kind === 'audioinput') {
+                eventHandlers.audioMuted?.(track.muted);
+            }
+            else {
+                eventHandlers.videoMuted?.(track.muted);
+            }
+        }),
+        props.signals.onMediaTrackSuspended?.add(track => {
+            if (track.kind === 'audioinput') {
+                eventHandlers.audioSuspended?.(track.suspended);
+            }
+            else {
+                eventHandlers.videoSuspended?.(track.suspended);
+            }
+        }),
+        props.signals.onMediaTrackResumed?.add(track => {
+            if (track.kind === 'audioinput') {
+                eventHandlers.audioSuspended?.(track.suspended);
+            }
+            else {
+                eventHandlers.videoSuspended?.(track.suspended);
+            }
+        }),
+        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 +194,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 +202,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 +218,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, 'Preview');
             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 +261,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 +271,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 +288,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 +325,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 +345,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 +460,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 +488,13 @@ 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'),
+        onAudioSuspended: toEvenHandler('audioSuspended'),
+        onVideoSuspended: toEvenHandler('videoSuspended'),
         applyChanges,
         revertChanges,
         cleanup,

package/dist/types.d.ts

@@ -127,8 +127,9 @@ export interface Media extends MediaAttributes {
     getAudioTracks(): MediaTrack[];
     getVideoTracks(): MediaTrack[];
     addTrack(track: MediaTrack): void;
+    isCurrentTrack(track: MediaTrack): boolean;
     removeTrack(track: MediaTrack): void;
-    clone(signals?: MediaSignals): Media;
+    clone(signals?: MediaSignals, label?: string): Media;
 }
 export interface MediaInit {
     constraints: MediaDeviceRequest;
@@ -149,25 +150,35 @@ export interface MediaTrack {
      * `track` is available otherwise it uses the `id` from the construction or the
      * `kind`. @see MediaTrackInit
      */
-    id: string;
-    kind: 'audioinput' | 'videoinput';
-    label?: string;
-    previousMediaTrack?: MediaTrack;
+    readonly id: string;
+    /**
+     * It maps to MediaStreamTrack['readyState']
+     * When `true` the track's `readyState` is `ended`, `false` means `live` otherwise the track is not available
+     */
+    readonly stopped?: boolean;
+    /**
+     * Indicate that the media has been suspended by the User Agent, and it could happen at any time.
+     * `undefined` means the track is not available
+     */
+    readonly suspended?: boolean;
+    readonly kind: 'audioinput' | 'videoinput';
+    readonly label?: string;
+    readonly previousMediaTrack?: MediaTrack;
     /**
      * The MediaStreamTrack object representing the track
      * @see https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack
      */
-    track?: MediaStreamTrack;
+    readonly track?: MediaStreamTrack;
     /**
      * The `MediaDeviceInfo` object representing the device that the track is
      * connected to. @see https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo
      */
-    input?: MediaDeviceInfoLike;
+    readonly input?: MediaDeviceInfoLike;
     /**
      * The `MediaDeviceInfo` object representing the device that the track is
      * expected to be connected to. @see https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo
      */
-    expectedInput?: MediaDeviceInfoLike;
+    readonly expectedInput?: MediaDeviceInfoLike;
     /**
      * The current mute state of the track. `undefined` means the track is not available
      */
@@ -175,22 +186,38 @@ export interface MediaTrack {
     /**
      * The source track that it is originated from
      */
-    source: MediaTrack;
-    mute(toMute: boolean): void;
+    readonly source: MediaTrack;
+    /**
+     * Mute the track
+     *
+     * @param toMute - `true` to mute the track, `false` to unmute
+     * @param soft - `true` to indicate a soft mute i.e. setting the track to NOT `enabled`
+     * `false` or `undefined` for default mute
+     */
+    mute(toMute: boolean, soft?: boolean): void;
     getSettings(): ExtendedMediaTrackSettings;
     getConstraints(): InputDeviceConstraint;
     applyConstraints(constraints: InputDeviceConstraint): Promise<void>;
     release(): Promise<void>;
-    clone(signals?: MediaSignals): MediaTrack;
+    clone(signals?: MediaSignals, label?: string): 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;
+    /**
+     * Overriding Mute the track
+     *
+     * @param toMute - `true` to mute the track, `false` to unmute
+     * @param self - The media track itself
+     * @param soft - `true` to indicate a soft mute i.e. setting the track to NOT `enabled`
+     * `false` or `undefined` for default mute
+     */
+    mute?: (toMute: boolean, self: MediaTrack, soft?: boolean) => void;
 }
 export type Process<T> = (a: T) => Promise<MediaTrack>;
 export type TrackProcessor = Process<MediaTrack>;
@@ -444,6 +471,7 @@ export interface MediaOptions {
      */
     audioProcessors: TrackProcessor[];
     videoProcessors: TrackProcessor[];
+    stopVideoTrackAsMute?: () => boolean;
     /**
      * A function to get the devices' mute state
      */
@@ -469,10 +497,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
      */
@@ -516,51 +546,24 @@ export type VideoRenderParams = Omit<RendererOptions, 'effects'> & {
     tilt?: boolean;
     zoom?: boolean;
 };
-export interface StreamTrackSignals {
-    /**
-     * MediaStreamTrack events: mute
-     * https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack#events
-     */
-    onStreamTrackMuted: Signal<MediaStreamTrack>;
-    /**
-     * MediaStreamTrack events: unmute
-     * https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack#events
-     */
-    onStreamTrackUnmuted: Signal<MediaStreamTrack>;
-    /**
-     * MediaStreamTrack events: ended
-     * https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack#events
-     */
-    onStreamTrackEnded: Signal<MediaStreamTrack>;
-    /**
-     * Emit `MediaStreamTrack` whenever a call to `Media['muteAudio']` or
-     * `Media['muteVideo']`
-     */
-    onStreamTrackEnabled: Signal<MediaStreamTrack>;
-}
-/**
- * Track state signals that used for the final track that the media pipeline
- * produced
- */
-export type StreamTrackSignalFinals = {
-    [key in keyof StreamTrackSignals as `${key}Final`]: Signal<MediaStreamTrack>;
-};
 export interface MediaChangesSignals {
     onAddTrack: Signal<MediaStreamTrack>;
-    onAudioMuteStateChanged: Signal<boolean | undefined>;
-    onTrackReleased: Signal<MediaStreamTrack>;
     onDevicesChanged: Signal<IndexedDevices>;
     onMediaChanged: Signal<Media | undefined>;
+    onMediaTrackMuted: Signal<MediaTrack>;
+    onMediaTrackResumed: Signal<MediaTrack>;
+    onMediaTrackStopped: Signal<MediaTrack>;
+    onMediaTrackSuspended: Signal<MediaTrack>;
     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>;
     onSilentDetected: Signal<boolean>;
 }
-export type MediaSignalsOptional = Omit<Partial<MediaChangesSignals>, 'onMediaChanged'> & Partial<StreamTrackSignals> & Partial<StreamTrackSignalFinals>;
+export type MediaSignalsOptional = Omit<Partial<MediaChangesSignals>, 'onMediaChanged'>;
 export type MediaSignalsRequired = Pick<MediaChangesSignals, 'onMediaChanged'> & AudioDetectionSignals;
 export type MediaSignals = MediaSignalsRequired & MediaSignalsOptional;
 export declare enum DeniedDevices {

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, 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,16 +556,50 @@ export const createGetUserMediaProcess = ({ getUserMedia, getCurrentDevices, sig
         let audioMediaTrack;
         let videoMediaTrack;
         const extractContentHint = extractConstraintsWithKeys(['contentHint']);
+        let trackReleaseTimeoutID = 0;
+        /**
+         * Release the track as mute
+         */
+        const releaseTrackAsMute = async (track, toMute, soft) => {
+            if (!track?.track || track.muted === toMute) {
+                return;
+            }
+            track.track.enabled = !toMute;
+            if (soft) {
+                return;
+            }
+            if (toMute) {
+                if (!track.stopped) {
+                    // Track cannot be stopped immediately as we need to ensure
+                    // the last frame is black to avoid frozen frame in a gateway call
+                    trackReleaseTimeoutID = window.setTimeout(() => {
+                        track.release();
+                        trackReleaseTimeoutID = 0;
+                    }, 500);
+                }
+            }
+            else {
+                if (trackReleaseTimeoutID) {
+                    window.clearTimeout(trackReleaseTimeoutID);
+                    trackReleaseTimeoutID = 0;
+                }
+                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 ?? '';
             }
             audioMediaTrack = createMediaTrack({
-                label: PROCESSOR_LABELS.GetUserMedia,
+                label: [scope, PROCESSOR_LABELS.GetUserMedia].join('|'),
                 kind: 'audioinput',
                 track: audioTrack,
                 input: audioInput,
@@ -575,17 +612,26 @@ 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 ?? '';
             }
             videoMediaTrack = createMediaTrack({
-                label: PROCESSOR_LABELS.GetUserMedia,
+                label: [scope, PROCESSOR_LABELS.GetUserMedia].join('|'),
                 kind: 'videoinput',
                 track: videoTrack,
                 input: videoInput,
                 expectedInput: findExpectedInput(devices, constraints.video, videoInput, 'videoinput'),
+                get overrideMute() {
+                    return stopVideoTrackAsMute();
+                },
+                get muted() {
+                    return !videoTrack?.enabled;
+                },
+                mute(toMute, self, soft) {
+                    releaseTrackAsMute(self, toMute, soft);
+                },
                 constraints: constraints.video,
                 signals,
             });