@pexip/media-processor 21.0.0 → 22.1.0

package/dist/main/video/types.d.ts

@@ -1,9 +1,8 @@
 import type { ProcessStatus, RenderingEvents } from '../../common/constants';
-import type { ProcessInputType, VideoFrameLike } from '../../common/types/media';
+import type { ReadWritableStream } from '../../common/types/media';
 import type { RendererOptions } from '../../common/types/render';
 import type { SegmentationModelAsset } from '../../common/types/segmentation';
 import type { ProcessorOptions } from '../../common/types/processor';
-import type { Transform } from '../types';
 export type Color = {
     r: number;
     g: number;
@@ -16,10 +15,10 @@ export interface AsyncAssets {
     tfjsBackendLoaded: boolean;
     glueLoaded: boolean;
 }
-export interface Process {
+export interface Process<T> {
     status: ProcessStatus;
-    open(): Promise<void>;
-    close(): void;
+    open(): Promise<T>;
+    close(): Promise<void>;
     destroy(): Promise<void>;
 }
 export interface BackgroundImage {
@@ -28,21 +27,42 @@ export interface BackgroundImage {
 }
 type Unsubscribe = () => void;
 type Callback<T> = (args: T) => void;
-export interface Segmenter extends Process {
+export interface Segmenter extends Process<Partial<RendererOptions>> {
     modelAsset: SegmentationModelAsset;
     backgroundImage?: BackgroundImage;
-    open(options?: ProcessorOptions): Promise<void>;
-    update(options: ProcessorOptions): Promise<void>;
-    process(input: VideoFrameLike, options?: RendererOptions): Promise<VideoFrameLike | undefined>;
+    /**
+     * Initialize the Segmenter as well as the underlying worker.
+     * It is expected to be called once.
+     */
+    open(options?: ProcessorOptions): Promise<Partial<RendererOptions>>;
+    /**
+     * Update the processor options
+     */
+    update(options: ProcessorOptions): Promise<Partial<RendererOptions>>;
+    /**
+     * Mute/unmute the track in the worker
+     */
+    mute(muted: boolean): void;
+    /**
+     * Process provided input
+     */
+    process(input: MediaStreamTrack, options?: RendererOptions): Promise<MediaStreamTrack>;
+    process(input: ReadWritableStream<VideoFrame>, options?: RendererOptions): Promise<ReadWritableStream<VideoFrame> | undefined>;
+    process(input: MediaStreamTrack | ReadWritableStream<VideoFrame>, options?: RendererOptions): Promise<MediaStreamTrack | ReadWritableStream<VideoFrame> | undefined>;
+    /**
+     * Subscribe rendering events, @see RenderingEvents
+     */
     subscribe(event: RenderingEvents, callback: Callback<void>): Unsubscribe;
 }
-export interface Detector<T> extends Process {
-    detect(input: ProcessInputType): Promise<T>;
+export interface InputProcessAdaptor {
+    /**
+     * Adapt the provided input track based on browser capabilities.
+     */
+    adapt(track: MediaStreamTrack): MediaStreamTrack | ReadWritableStream<VideoFrame>;
+    /**
+     * The generated track from the `adapt` function, and only available
+     * after calling the `adapt` method otherwise `undefined`
+     */
+    outputTrack?: MediaStreamTrack;
 }
-export interface SegmentationParams extends RendererOptions {
-    segmenter: Segmenter;
-    width: number;
-    height: number;
-}
-export type SegmentationTransform = Transform<InputFrame, InputFrame> & SegmentationParams & Pick<Segmenter, 'update'> & Omit<Process, 'open'>;
 export {};

package/dist/main/video/utils.d.ts

@@ -58,13 +58,14 @@ export declare const toVideoElement: (input: MediaStream, width: number, height:
 export declare const playVideo: (video: HTMLVideoElement, { setTimeout, clearTimeout }?: {
     setTimeout?: (((handler: TimerHandler, timeout?: number, ...arguments: any[]) => number) & typeof globalThis.setTimeout) | undefined;
     clearTimeout?: (((id: number | undefined) => void) & typeof globalThis.clearTimeout) | undefined;
-}) => Promise<void>;
+}) => Promise<[void, void]> | undefined;
 /**
  * Load image with provided image element
  */
 export declare const loadImage: (image: HTMLImageElement, src: string) => Promise<void>;
 export declare const toNumber: (value: number | SVGAnimatedLength) => number;
-export declare const getCanvasRenderingContext2D: (canvas: Canvas, options?: CanvasRenderingContext2DSettings) => CanvasRenderingContext2D;
+export declare function getCanvasRenderingContext2D(canvas: HTMLCanvasElement, options?: CanvasRenderingContext2DSettings): CanvasRenderingContext2D;
+export declare function getCanvasRenderingContext2D(canvas: OffscreenCanvas, options?: CanvasRenderingContext2DSettings): OffscreenCanvasRenderingContext2D;
 export declare const hasVideoFrameSupport: () => boolean;
 export declare const isVideoFrame: (t: unknown) => t is VideoFrame;
 export declare const flipCanvasHorizontal: (canvas: Canvas) => void;
@@ -89,8 +90,8 @@ interface FrameCallbackRequestOptions {
  * @param frameRate - A fallback frame rate when we are not able to get the rate
  * from API
  */
-export declare const createFrameCallbackRequest: (callback: Callback<Promise<void>, [ProcessInputType]>, frameRate: number, { subscribeVisibilityChange, }?: FrameCallbackRequestOptions) => {
-    start: (input: ProcessInputType) => Promise<void>;
+export declare const createFrameCallbackRequest: <T>(callback: Callback<Promise<void>, [T]>, frameRate: number, { subscribeVisibilityChange, }?: FrameCallbackRequestOptions) => {
+    start: (input: T) => Promise<void>;
     stop: () => void;
     frameRate: number;
 };

package/dist/main/video/utils.js

@@ -126,52 +126,57 @@ var HTMLMediaElementReadyState;
     HTMLMediaElementReadyState[HTMLMediaElementReadyState["HaveFutureData"] = 3] = "HaveFutureData";
     HTMLMediaElementReadyState[HTMLMediaElementReadyState["HaveEnoughData"] = 4] = "HaveEnoughData";
 })(HTMLMediaElementReadyState || (HTMLMediaElementReadyState = {}));
-export const playVideo = async (video, { setTimeout = window.setTimeout, clearTimeout = window.clearTimeout } = {}) => {
+export const playVideo = (video, { setTimeout = window.setTimeout, clearTimeout = window.clearTimeout } = {}) => {
     if (video.autoplay) {
         return;
     }
-    if (video.readyState <
-        HTMLMediaElementReadyState.HaveCurrentData) {
-        // Not enough data, wait for the data and then play
-        await new Promise((resolve, reject) => {
-            const clearTimeoutTimer = () => {
-                clearTimeout(timeoutId);
-                timeoutId = 0;
-            };
-            const unsubscribe = () => {
-                video.removeEventListener('loadeddata', waitForEvent);
-                video.removeEventListener('error', handleError);
-                video.removeEventListener('stalled', handleStalled);
-                video.removeEventListener('ended', handleEnded);
-                clearTimeoutTimer();
-            };
-            const handleEnded = () => {
-                unsubscribe();
-                reject(new Error('VideoEnded', { cause: video }));
-            };
-            const handleStalled = () => {
-                unsubscribe();
-                reject(new Error('VideoStalled', { cause: video }));
-            };
-            const handleError = (error) => {
-                unsubscribe();
-                reject(error.error);
-            };
-            const waitForEvent = () => {
-                unsubscribe();
+    return Promise.all([
+        video.play(),
+        new Promise((resolve, reject) => {
+            if (video.readyState <
+                HTMLMediaElementReadyState.HaveCurrentData) {
+                // Not enough data, wait for the data and then play
+                const clearTimeoutTimer = () => {
+                    clearTimeout(timeoutId);
+                    timeoutId = 0;
+                };
+                const unsubscribe = () => {
+                    video.removeEventListener('loadeddata', waitForEvent);
+                    video.removeEventListener('error', handleError);
+                    video.removeEventListener('stalled', handleStalled);
+                    video.removeEventListener('ended', handleEnded);
+                    clearTimeoutTimer();
+                };
+                const handleEnded = () => {
+                    unsubscribe();
+                    reject(new Error('VideoEnded', { cause: video }));
+                };
+                const handleStalled = () => {
+                    unsubscribe();
+                    reject(new Error('VideoStalled', { cause: video }));
+                };
+                const handleError = (error) => {
+                    unsubscribe();
+                    reject(error.error);
+                };
+                const waitForEvent = () => {
+                    unsubscribe();
+                    resolve();
+                };
+                // Use setTimeout to prevent a race to `loadeddata` event
+                video.addEventListener('loadeddata', waitForEvent);
+                video.addEventListener('error', handleError);
+                video.addEventListener('stalled', handleStalled);
+                video.addEventListener('ended', handleEnded);
+                let timeoutId = setTimeout(() => {
+                    reject(new Error('PlayVideoTimeout', { cause: video }));
+                }, PLAY_VIDEO_TIMEOUT);
+            }
+            else {
                 resolve();
-            };
-            // Use setTimeout to prevent a race to `loadeddata` event
-            video.addEventListener('loadeddata', waitForEvent);
-            video.addEventListener('error', handleError);
-            video.addEventListener('stalled', handleStalled);
-            video.addEventListener('ended', handleEnded);
-            let timeoutId = setTimeout(() => {
-                reject(new Error('PlayVideoTimeout', { cause: video }));
-            }, PLAY_VIDEO_TIMEOUT);
-        });
-    }
-    return await video.play();
+            }
+        }),
+    ]);
 };
 /**
  * Load image with provided image element
@@ -184,13 +189,13 @@ export const loadImage = async (image, src) => {
     });
 };
 export const toNumber = (value) => value instanceof SVGAnimatedLength ? value.baseVal.value : value;
-export const getCanvasRenderingContext2D = (canvas, options) => {
+export function getCanvasRenderingContext2D(canvas, options) {
     const context = canvas.getContext('2d', options);
     if (!context) {
         throw new Error('Cannot get CanvasRenderingContext2D');
     }
     return context;
-};
+}
 export const hasVideoFrameSupport = () => 'VideoFrame' in window;
 export const isVideoFrame = (t) => {
     if (hasVideoFrameSupport() && t instanceof VideoFrame) {

package/dist/main/video/video.d.ts

@@ -1,20 +1,42 @@
-import type { Transform } from '../types';
-import type { InputFrame } from './types';
-import type { ProcessVideoTrack } from './videoStreamTrackProcessor';
-import type { ProcessorOptions } from '../../common';
+import type { ProcessorOptions, ProcessStatus, RendererOptions } from '../../common';
+import type { Segmenter, InputProcessAdaptor } from './types';
+export interface ProcessorUpdateOptions extends Omit<ProcessorOptions, 'renderOptions'> {
+    renderOptions?: Partial<RendererOptions>;
+}
 export interface VideoProcessor {
-    open(options?: ProcessorOptions): Promise<void>;
+    readonly status: ProcessStatus;
+    /**
+     * Initialize the video processor and related
+     */
+    open(options?: ProcessorUpdateOptions): Promise<void>;
+    /**
+     * Update the video processor with provided options
+     */
+    update(options: ProcessorUpdateOptions): Promise<void>;
+    mute(muted: boolean): void;
     /**
      * Process the video and return a MediaStream
      */
-    process: (source: MediaStream) => Promise<MediaStream>;
+    process: (source: MediaStreamTrack) => Promise<MediaStreamTrack>;
     /**
      * Stop the process of video segmentation
      */
-    close(): void;
+    close(): Promise<void>;
     /**
      * Destroy the segmentation wasm instance
      */
     destroy: () => Promise<void>;
+    /**
+     * Current renderer options
+     */
+    readonly renderOptions: RendererOptions;
+    /**
+     * Current processing width
+     */
+    readonly processingWidth: number;
+    /**
+     * Current processing height
+     */
+    readonly processingHeight: number;
 }
-export declare const createVideoProcessor: (transformers: Transform<InputFrame, InputFrame>[], processTrack: ProcessVideoTrack) => VideoProcessor;
+export declare const createVideoProcessor: (segmenter: Segmenter, inputProcessAdaptor: InputProcessAdaptor) => VideoProcessor;

package/dist/main/video/video.js

@@ -1,51 +1,357 @@
-import { stopStreamTracks } from '../utils';
-import { AbortReason } from './constants';
-export const createVideoProcessor = (transformers, processTrack) => {
+import { assert, isEmpty } from '@pexip/utils';
+import { BACKGROUND_BLUR_AMOUNT, BACKGROUND_THRESHOLD, DOWN_SAMPLE_FACTOR, EDGE_BLUR_AMOUNT, EXCLUDE_BYSTANDERS, FOREGROUND_THRESHOLD, LIGHT_WRAP_BLUR_AMOUNT, LIGHT_WRAP_EDGE_BAND, LIGHT_WRAP_INTENSITY, LIGHT_WRAP_TIGHTNESS, MASK_COMBINE_RATIO, MORPH_DILATE_RADIUS_PX, MORPH_ERODE_RADIUS_PX, MORPH_PASS, PERSON_CENTER, PROCESSING_HEIGHT, PROCESSING_WIDTH, SIGMA_RANGE, SIGMA_SPACE, } from '../../common/constants';
+import { clamping, createObjectUpdater, compareImageRecords, } from '../../common/utils';
+import { assertMediaStreamVideoTrack, isRenderEffects } from './typeGuards';
+const clampInRangeFrom0To1 = clamping(0, 1);
+const clampInRangeFrom0To9 = clamping(0, 9);
+const createRenderOptions = ({ foregroundThreshold = FOREGROUND_THRESHOLD, backgroundThreshold = BACKGROUND_THRESHOLD, backgroundBlurAmount = BACKGROUND_BLUR_AMOUNT, edgeBlurAmount = EDGE_BLUR_AMOUNT, maskCombineRatio = MASK_COMBINE_RATIO, backgroundImageUrl = '', sigmaSpace = SIGMA_SPACE, sigmaRangeLo = SIGMA_RANGE[0], sigmaRangeHi = SIGMA_RANGE[1], effects = 'none', backend = 'webgl', personCenter = PERSON_CENTER, excludeBystanders = EXCLUDE_BYSTANDERS, morphPass = MORPH_PASS, morphErodeRadiusPx = MORPH_ERODE_RADIUS_PX, morphDilateRadiusPx = MORPH_DILATE_RADIUS_PX, lightWrapIntensity = LIGHT_WRAP_INTENSITY, downSampleFactor = DOWN_SAMPLE_FACTOR, lightWrapTightness = LIGHT_WRAP_TIGHTNESS, lightWrapBlurAmount = LIGHT_WRAP_BLUR_AMOUNT, lightWrapEdgeBand = LIGHT_WRAP_EDGE_BAND, } = {}, onChange) => {
+    const props = {
+        foregroundThreshold,
+        backgroundThreshold,
+        backgroundBlurAmount,
+        edgeBlurAmount,
+        maskCombineRatio,
+        backgroundImageUrl,
+        sigmaSpace,
+        sigmaRangeLo,
+        sigmaRangeHi,
+        effects,
+        backend,
+        personCenter,
+        excludeBystanders,
+        morphPass,
+        morphErodeRadiusPx,
+        morphDilateRadiusPx,
+        lightWrapIntensity,
+        downSampleFactor,
+        lightWrapTightness,
+        lightWrapBlurAmount,
+        lightWrapEdgeBand,
+    };
+    return {
+        original: props,
+        proxy: new Proxy(props, {
+            get(target, p, receiver) {
+                return Reflect.get(target, p, receiver);
+            },
+            set(target, p, newValue, receiver) {
+                switch (p) {
+                    case 'backgroundThreshold': {
+                        const value = clamping(0, target.foregroundThreshold)(newValue);
+                        if (value !== target[p]) {
+                            Reflect.set(target, p, value, receiver);
+                            onChange(p, value);
+                        }
+                        break;
+                    }
+                    case 'foregroundThreshold': {
+                        const value = clamping(target.backgroundThreshold, 1)(newValue);
+                        if (value !== target[p]) {
+                            Reflect.set(target, p, value, receiver);
+                            onChange(p, value);
+                        }
+                        break;
+                    }
+                    case 'maskCombineRatio': {
+                        const value = clampInRangeFrom0To1(newValue);
+                        if (value !== target[p]) {
+                            Reflect.set(target, p, value, receiver);
+                            onChange(p, value);
+                        }
+                        break;
+                    }
+                    case 'lightWrapBlurAmount':
+                    case 'backgroundBlurAmount':
+                    case 'edgeBlurAmount': {
+                        // Expecting integer number
+                        const value = Math.trunc(clampInRangeFrom0To9(newValue));
+                        if (value !== target[p]) {
+                            Reflect.set(target, p, value, receiver);
+                            onChange(p, value);
+                        }
+                        break;
+                    }
+                    case 'backgroundImageUrl': {
+                        if (newValue !== target[p]) {
+                            Reflect.set(target, p, newValue, receiver);
+                            onChange(p, newValue);
+                        }
+                        break;
+                    }
+                    case 'effects': {
+                        if (isRenderEffects(newValue) &&
+                            newValue !== target[p]) {
+                            Reflect.set(target, p, newValue, receiver);
+                            onChange(p, newValue);
+                        }
+                        break;
+                    }
+                    case 'backend': {
+                        if ((newValue === 'webgl' || newValue === 'webgpu') &&
+                            newValue !== target[p]) {
+                            Reflect.set(target, p, newValue, receiver);
+                            onChange(p, newValue);
+                        }
+                        break;
+                    }
+                    case 'sigmaSpace': {
+                        // less than 0 is unknown behavior, more than 12 is too much
+                        const value = clamping(0, 12)(newValue);
+                        if (value !== target.sigmaSpace) {
+                            Reflect.set(target, p, value, receiver);
+                            onChange(p, value);
+                        }
+                        break;
+                    }
+                    case 'sigmaRangeLo': {
+                        const value = clamping(0, target.sigmaRangeHi)(newValue);
+                        if (value !== target.sigmaRangeLo) {
+                            Reflect.set(target, p, value, receiver);
+                            onChange(p, value);
+                        }
+                        break;
+                    }
+                    case 'sigmaRangeHi': {
+                        const value = clamping(target.sigmaRangeLo, 1)(newValue);
+                        if (value !== target.sigmaRangeHi) {
+                            Reflect.set(target, p, value, receiver);
+                            onChange(p, value);
+                        }
+                        break;
+                    }
+                    case 'personCenter': {
+                        if (Array.isArray(newValue)) {
+                            const [x, y] = newValue.map(clampInRangeFrom0To1);
+                            if (x !== undefined &&
+                                y !== undefined &&
+                                (x !== target.personCenter[0] ||
+                                    y !== target.personCenter[1])) {
+                                Reflect.set(target, p, [x, y], receiver);
+                                onChange(p, [x, y]);
+                            }
+                        }
+                        break;
+                    }
+                    case 'excludeBystanders': {
+                        if (newValue !== target[p]) {
+                            Reflect.set(target, p, newValue, receiver);
+                            onChange(p, newValue);
+                        }
+                        break;
+                    }
+                    case 'morphDilateRadiusPx':
+                    case 'morphErodeRadiusPx': {
+                        const value = clamping(0, 12)(newValue);
+                        if (value !== target[p]) {
+                            Reflect.set(target, p, value, receiver);
+                            onChange(p, value);
+                        }
+                        break;
+                    }
+                    case 'morphPass': {
+                        // Expecting integer number
+                        const value = Math.trunc(clamping(0, 10)(newValue));
+                        if (value !== target[p]) {
+                            Reflect.set(target, p, value, receiver);
+                            onChange(p, value);
+                        }
+                        break;
+                    }
+                    case 'lightWrapIntensity': {
+                        const value = clampInRangeFrom0To1(newValue);
+                        if (value !== target[p]) {
+                            Reflect.set(target, p, value, receiver);
+                            onChange(p, value);
+                        }
+                        break;
+                    }
+                    case 'lightWrapTightness': {
+                        // According to the doc
+                        const value = clamping(0.5, 4)(newValue);
+                        if (value !== target[p]) {
+                            Reflect.set(target, p, value, receiver);
+                            onChange(p, value);
+                        }
+                        break;
+                    }
+                    case 'lightWrapEdgeBand': {
+                        const value = clamping(0, (target.foregroundThreshold -
+                            target.backgroundThreshold) /
+                            2)(newValue);
+                        if (value !== target[p]) {
+                            Reflect.set(target, p, value, receiver);
+                            onChange(p, value);
+                        }
+                        break;
+                    }
+                    case 'downSampleFactor': {
+                        // NOTE: There is no impl other than 2 and 4, so we just hardcode it here
+                        if ((newValue === 2 || newValue === 4) &&
+                            newValue !== target[p]) {
+                            Reflect.set(target, p, newValue, receiver);
+                            onChange(p, newValue);
+                        }
+                        break;
+                    }
+                    default: {
+                        // Catch all the unknown keys, and just ignore the set operation
+                        return false;
+                    }
+                }
+                // No throw
+                return true;
+            },
+        }),
+    };
+};
+export const createVideoProcessor = (segmenter, inputProcessAdaptor) => {
+    const canUpdate = () => segmenter.status !== 'new';
     const props = {
         processing: false,
     };
-    const open = async (options) => {
-        await Promise.all(transformers.map(transformer => transformer.init(options)));
+    let changedRenderOptions = {};
+    const initRenderOptions = () => createRenderOptions({}, (k, v) => {
+        changedRenderOptions[k] = v;
+    });
+    let renderOptions = initRenderOptions();
+    let processorOptions = {
+        renderOptions: renderOptions.original,
+        processingWidth: PROCESSING_WIDTH,
+        processingHeight: PROCESSING_HEIGHT,
     };
-    const process = async (source) => {
-        const [track] = source.getVideoTracks();
-        if (!track) {
-            return source;
+    const updateRendererOptions = createObjectUpdater(renderOptions.proxy);
+    const updateChangedRendererOptions = (changed) => {
+        for (const [k, v] of Object.entries(changed)) {
+            //@ts-expect-error
+            processorOptions.renderOptions[k] = v;
+        }
+    };
+    const updateProcessorOptions = async (options) => {
+        const _processorOptions = {};
+        if (options?.renderOptions) {
+            updateRendererOptions(options.renderOptions);
+            if (!isEmpty(changedRenderOptions)) {
+                changedRenderOptions = {};
+                _processorOptions.renderOptions =
+                    processorOptions.renderOptions;
+            }
+        }
+        if (options?.backgroundImage &&
+            !compareImageRecords(options.backgroundImage, processorOptions.backgroundImage)) {
+            processorOptions.backgroundImage = options.backgroundImage;
+            _processorOptions.backgroundImage =
+                processorOptions.backgroundImage;
+        }
+        if (options.processingWidth) {
+            processorOptions.processingWidth = options.processingWidth;
+            _processorOptions.processingWidth =
+                processorOptions.processingWidth;
+        }
+        if (options.processingHeight) {
+            processorOptions.processingHeight = options.processingHeight;
+            _processorOptions.processingHeight =
+                processorOptions.processingHeight;
+        }
+        if (options.imageSegmenterOptions) {
+            processorOptions.imageSegmenterOptions = {
+                ...processorOptions.imageSegmenterOptions,
+                ...options.imageSegmenterOptions,
+            };
+            _processorOptions.imageSegmenterOptions =
+                processorOptions.imageSegmenterOptions;
+        }
+        if (canUpdate() && !isEmpty(_processorOptions)) {
+            const changed = await segmenter.update(_processorOptions);
+            updateChangedRendererOptions(changed);
         }
-        if (props.processing) {
-            throw new Error('Cannot process when it is already processing');
-        }
-        props.abortController = new AbortController();
-        const trackGenerated = await processTrack(track, transformers, {
-            signal: props.abortController.signal,
-        });
-        props.outputStream = new MediaStream([
-            trackGenerated,
-            ...source.getAudioTracks().map(track => track.clone()),
-        ]);
-        props.processing = true;
-        return props.outputStream;
     };
-    const close = () => {
-        if (!props.processing) {
-            return;
+    const open = async (options) => {
+        if (options) {
+            await updateProcessorOptions(options);
+        }
+        if (segmenter.status === 'new') {
+            const changed = await segmenter.open(processorOptions);
+            updateChangedRendererOptions(changed);
         }
-        props.abortController?.abort(AbortReason.Close);
-        stopStreamTracks(props.outputStream);
-        props.outputStream = undefined;
+    };
+    const update = async (options) => {
+        await updateProcessorOptions(options);
+    };
+    // Serialization lock: `process()` and `close()` mutate the same worker
+    // pipeline (segmenter + transferred tracks). If they overlap, the worker
+    // can tear down a writable stream while the main thread is still feeding
+    // it, surfacing as `InvalidStateError: Stream closed`. Chain every
+    // public mutation through this promise so they always run end-to-end.
+    let serialized = Promise.resolve();
+    const runSerialized = (fn) => {
+        const next = serialized.then(fn, fn);
+        serialized = next.catch(() => undefined);
+        return next;
+    };
+    const closeImpl = async () => {
+        await segmenter.close();
+        props.outputTrack?.stop();
+        props.outputTrack = undefined;
         props.processing = false;
-        for (const transformer of transformers) {
-            transformer.close();
+    };
+    const processImpl = async (source) => {
+        if (props.processing) {
+            await closeImpl();
+        }
+        assertMediaStreamVideoTrack(source);
+        if (segmenter.status === 'new') {
+            await segmenter.open(processorOptions);
+            // @ts-expect-error -- Segmenter status could be changed to Error if anything went wrong
+            if (segmenter.status === 'Error') {
+                return source;
+            }
         }
+        const processed = await segmenter.process(inputProcessAdaptor.adapt(source), processorOptions.renderOptions);
+        props.outputTrack = inputProcessAdaptor.outputTrack;
+        if (processed instanceof MediaStreamTrack) {
+            props.outputTrack = processed;
+        }
+        else if (!props.outputTrack) {
+            props.outputTrack = source;
+        }
+        assert(props.outputTrack, 'Segmenter failed to generate output track');
+        props.processing = true;
+        return props.outputTrack;
     };
+    const process = source => runSerialized(() => processImpl(source));
+    const close = () => runSerialized(closeImpl);
     const destroy = async () => {
-        close();
-        await Promise.all(transformers.map(transformer => transformer.destroy()));
+        await close();
+        processorOptions?.backgroundImage?.image?.close();
+        renderOptions = initRenderOptions();
+        changedRenderOptions = {};
+        processorOptions = {
+            renderOptions: renderOptions.original,
+            processingWidth: PROCESSING_WIDTH,
+            processingHeight: PROCESSING_HEIGHT,
+        };
+        await segmenter.destroy();
     };
     return {
         open,
+        update,
         process,
+        mute(muted) {
+            segmenter.mute(muted);
+        },
         close,
         destroy,
+        get status() {
+            return segmenter.status;
+        },
+        get renderOptions() {
+            return processorOptions.renderOptions;
+        },
+        get processingWidth() {
+            return processorOptions.processingWidth;
+        },
+        get processingHeight() {
+            return processorOptions.processingHeight;
+        },
     };
 };