@openreplay/tracker 10.0.3 → 11.0.0

package/lib/modules/userTesting/index.js

@@ -0,0 +1,473 @@
+import * as styles from './styles.js';
+import Recorder, { Quality } from './recorder.js';
+import attachDND from './dnd.js';
+function createElement(tag, className, styles, textContent, id) {
+    const element = document.createElement(tag);
+    element.className = className;
+    Object.assign(element.style, styles);
+    if (textContent) {
+        element.textContent = textContent;
+    }
+    if (id) {
+        element.id = id;
+    }
+    return element;
+}
+export default class UserTestManager {
+    constructor(app, storageKey) {
+        this.app = app;
+        this.storageKey = storageKey;
+        this.bg = createElement('div', 'bg', styles.bgStyle, undefined, '__or_ut_bg');
+        this.container = createElement('div', 'container', styles.containerStyle, undefined, '__or_ut_ct');
+        this.widgetGuidelinesVisible = true;
+        this.widgetTasksVisible = false;
+        this.widgetVisible = true;
+        this.descriptionSection = null;
+        this.taskSection = null;
+        this.endSection = null;
+        this.stopButton = null;
+        this.test = null;
+        this.testId = null;
+        this.token = null;
+        this.durations = {
+            testStart: 0,
+            tasks: [],
+        };
+        this.signalTask = (taskId, status, answer) => {
+            if (!taskId)
+                return console.error('OR: no task id');
+            const taskStart = this.durations.tasks.find((t) => t.taskId === taskId);
+            const timestamp = this.app.timestamp();
+            const duration = taskStart ? timestamp - taskStart.started : 0;
+            const ingest = this.app.options.ingestPoint;
+            return fetch(`${ingest}/v1/web/uxt/signals/task`, {
+                method: 'POST',
+                headers: {
+                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                    Authorization: `Bearer ${this.token}`,
+                },
+                body: JSON.stringify({
+                    testId: this.testId,
+                    taskId,
+                    status,
+                    duration,
+                    timestamp,
+                    answer,
+                }),
+            });
+        };
+        this.signalTest = (status) => {
+            const timestamp = this.app.timestamp();
+            if (status === 'begin' && this.testId) {
+                this.app.localStorage.setItem(this.storageKey, this.testId.toString());
+                this.app.localStorage.setItem('or_uxt_test_start', timestamp.toString());
+            }
+            else {
+                this.app.localStorage.removeItem(this.storageKey);
+                this.app.localStorage.removeItem('or_uxt_task_index');
+                this.app.localStorage.removeItem('or_uxt_test_start');
+            }
+            const ingest = this.app.options.ingestPoint;
+            const start = this.durations.testStart || timestamp;
+            const duration = timestamp - start;
+            return fetch(`${ingest}/v1/web/uxt/signals/test`, {
+                method: 'POST',
+                headers: {
+                    // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
+                    Authorization: `Bearer ${this.token}`,
+                },
+                body: JSON.stringify({
+                    testId: this.testId,
+                    status,
+                    duration,
+                    timestamp,
+                }),
+            });
+        };
+        this.getTest = (id, token, inProgress) => {
+            this.testId = id;
+            this.token = token;
+            const ingest = this.app.options.ingestPoint;
+            fetch(`${ingest}/v1/web/uxt/test/${id}`, {
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                },
+            })
+                .then((res) => res.json())
+                .then(({ test }) => {
+                this.test = test;
+                this.createGreeting(test.title, test.reqMic, test.reqCamera);
+                if (inProgress) {
+                    if (test.reqMic || test.reqCamera) {
+                        void this.userRecorder.startRecording(30, Quality.Standard, test.reqMic, test.reqCamera);
+                    }
+                    this.showWidget(test.description, test.tasks, true);
+                    this.showTaskSection();
+                }
+            })
+                .catch((err) => {
+                console.log('OR: Error fetching test', err);
+            });
+        };
+        this.hideTaskSection = () => false;
+        this.showTaskSection = () => true;
+        this.collapseWidget = () => false;
+        this.removeGreeting = () => false;
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        this.toggleDescriptionVisibility = () => { };
+        this.currentTaskIndex = 0;
+        this.userRecorder = new Recorder(app);
+        const sessionId = this.app.getSessionID();
+        const savedSessionId = this.app.localStorage.getItem('or_uxt_session_id');
+        if (sessionId !== savedSessionId) {
+            this.app.localStorage.removeItem(this.storageKey);
+            this.app.localStorage.removeItem('or_uxt_session_id');
+            this.app.localStorage.removeItem('or_uxt_test_id');
+            this.app.localStorage.removeItem('or_uxt_task_index');
+            this.app.localStorage.removeItem('or_uxt_test_start');
+        }
+        const taskIndex = this.app.localStorage.getItem('or_uxt_task_index');
+        if (taskIndex) {
+            this.currentTaskIndex = parseInt(taskIndex, 10);
+            this.durations.testStart = parseInt(this.app.localStorage.getItem('or_uxt_test_start'), 10);
+        }
+    }
+    createGreeting(title, micRequired, cameraRequired) {
+        const titleElement = createElement('div', 'title', styles.titleStyle, title);
+        const descriptionElement = createElement('div', 'description', styles.descriptionStyle, 'Welcome, this session will be recorded. You have complete control, and can stop the session at any time.');
+        const noticeElement = createElement('div', 'notice', styles.noticeStyle, `Please note that your ${micRequired ? 'audio,' : ''} ${cameraRequired ? 'video,' : ''} ${micRequired || cameraRequired ? 'and' : ''} screen will be recorded for research purposes during this test.`);
+        const buttonElement = createElement('div', 'button', styles.buttonStyle, 'Read guidelines to begin');
+        this.removeGreeting = () => {
+            // this.container.innerHTML = ''
+            if (micRequired || cameraRequired) {
+                void this.userRecorder.startRecording(30, Quality.Standard, micRequired, cameraRequired);
+            }
+            this.container.removeChild(buttonElement);
+            this.container.removeChild(noticeElement);
+            this.container.removeChild(descriptionElement);
+            this.container.removeChild(titleElement);
+            return false;
+        };
+        buttonElement.onclick = () => {
+            var _a, _b;
+            this.removeGreeting();
+            this.durations.testStart = this.app.timestamp();
+            void this.signalTest('begin');
+            this.showWidget(((_a = this.test) === null || _a === void 0 ? void 0 : _a.guidelines) || '', ((_b = this.test) === null || _b === void 0 ? void 0 : _b.tasks) || []);
+        };
+        this.container.append(titleElement, descriptionElement, noticeElement, buttonElement);
+        this.bg.appendChild(this.container);
+        document.body.appendChild(this.bg);
+    }
+    showWidget(guidelines, tasks, inProgress) {
+        this.container.innerHTML = '';
+        Object.assign(this.bg.style, {
+            position: 'fixed',
+            zIndex: 99999999999999,
+            right: '8px',
+            left: 'unset',
+            width: 'fit-content',
+            top: '8px',
+            height: 'fit-content',
+            background: 'unset',
+            display: 'unset',
+            alignItems: 'unset',
+            justifyContent: 'unset',
+        });
+        // Create title section
+        const titleSection = this.createTitleSection();
+        Object.assign(this.container.style, styles.containerWidgetStyle);
+        const descriptionSection = this.createDescriptionSection(guidelines);
+        const tasksSection = this.createTasksSection(tasks);
+        const stopButton = createElement('div', 'stop_bn_or', styles.stopWidgetStyle, 'Abort Session');
+        this.container.append(titleSection, descriptionSection, tasksSection, stopButton);
+        this.taskSection = tasksSection;
+        this.descriptionSection = descriptionSection;
+        this.stopButton = stopButton;
+        stopButton.onclick = () => {
+            this.userRecorder.discard();
+            void this.signalTest('skipped');
+            document.body.removeChild(this.bg);
+        };
+        if (!inProgress) {
+            this.hideTaskSection();
+        }
+        else {
+            this.toggleDescriptionVisibility();
+        }
+    }
+    createTitleSection() {
+        var _a;
+        const title = createElement('div', 'title', styles.titleWidgetStyle);
+        const leftIcon = generateGrid();
+        const titleText = createElement('div', 'title_text', {}, (_a = this.test) === null || _a === void 0 ? void 0 : _a.title);
+        const rightIcon = generateChevron();
+        title.append(leftIcon, titleText, rightIcon);
+        const toggleWidget = (isVisible) => {
+            this.widgetVisible = isVisible;
+            Object.assign(this.container.style, this.widgetVisible
+                ? styles.containerWidgetStyle
+                : { border: 'none', background: 'none', padding: 0 });
+            if (this.taskSection) {
+                Object.assign(this.taskSection.style, this.widgetVisible ? styles.descriptionWidgetStyle : { display: 'none' });
+            }
+            if (this.descriptionSection) {
+                Object.assign(this.descriptionSection.style, this.widgetVisible ? styles.descriptionWidgetStyle : { display: 'none' });
+            }
+            if (this.endSection) {
+                Object.assign(this.endSection.style, this.widgetVisible ? styles.descriptionWidgetStyle : { display: 'none' });
+            }
+            if (this.stopButton) {
+                Object.assign(this.stopButton.style, this.widgetVisible ? styles.stopWidgetStyle : { display: 'none' });
+            }
+            return isVisible;
+        };
+        rightIcon.onclick = () => {
+            Object.assign(rightIcon.style, {
+                transform: this.widgetVisible ? 'rotate(0deg)' : 'rotate(180deg)',
+            });
+            toggleWidget(!this.widgetVisible);
+        };
+        attachDND(this.bg, leftIcon);
+        this.collapseWidget = () => toggleWidget(false);
+        return title;
+    }
+    createDescriptionSection(guidelines) {
+        const section = createElement('div', 'description_section_or', styles.descriptionWidgetStyle);
+        const titleContainer = createElement('div', 'description_s_title_or', styles.sectionTitleStyle);
+        const title = createElement('div', 'title', {}, 'Introduction & Guidelines');
+        const icon = createElement('div', 'icon', styles.symbolIcon, '-');
+        const content = createElement('div', 'content', styles.contentStyle);
+        const descriptionC = createElement('div', 'text_description', {
+            maxHeight: '250px',
+            overflowY: 'auto',
+            whiteSpace: 'pre-wrap',
+        });
+        descriptionC.innerHTML = guidelines;
+        const button = createElement('div', 'button_begin_or', styles.buttonWidgetStyle, 'Begin Test');
+        titleContainer.append(title, icon);
+        content.append(descriptionC, button);
+        section.append(titleContainer, content);
+        const toggleDescriptionVisibility = () => {
+            this.widgetGuidelinesVisible = !this.widgetGuidelinesVisible;
+            icon.textContent = this.widgetGuidelinesVisible ? '-' : '+';
+            Object.assign(content.style, this.widgetGuidelinesVisible ? styles.contentStyle : { display: 'none' });
+        };
+        titleContainer.onclick = toggleDescriptionVisibility;
+        this.toggleDescriptionVisibility = () => {
+            this.widgetGuidelinesVisible = false;
+            icon.textContent = this.widgetGuidelinesVisible ? '-' : '+';
+            Object.assign(content.style, this.widgetGuidelinesVisible ? styles.contentStyle : { display: 'none' });
+            content.removeChild(button);
+        };
+        button.onclick = () => {
+            toggleDescriptionVisibility();
+            if (this.test) {
+                if (this.durations.tasks.findIndex((t) => this.test && t.taskId === this.test.tasks[0].task_id) === -1) {
+                    this.durations.tasks.push({
+                        taskId: this.test.tasks[0].task_id,
+                        started: this.app.timestamp(),
+                    });
+                }
+                void this.signalTask(this.test.tasks[0].task_id, 'begin');
+            }
+            this.showTaskSection();
+            content.removeChild(button);
+        };
+        return section;
+    }
+    createTasksSection(tasks) {
+        const section = createElement('div', 'task_section_or', styles.descriptionWidgetStyle);
+        const titleContainer = createElement('div', 'description_t_title_or', styles.sectionTitleStyle);
+        const title = createElement('div', 'title', {}, 'Tasks');
+        const icon = createElement('div', 'icon', styles.symbolIcon, '-');
+        const content = createElement('div', 'content', styles.contentStyle);
+        const pagination = createElement('div', 'pagination', styles.paginationStyle);
+        const leftArrow = createElement('span', 'leftArrow', {}, '<');
+        const rightArrow = createElement('span', 'rightArrow', {}, '>');
+        const taskCard = createElement('div', 'taskCard', styles.taskDescriptionCard);
+        const taskText = createElement('div', 'taskText', styles.taskTextStyle);
+        const taskDescription = createElement('div', 'taskDescription', styles.taskDescriptionStyle);
+        const taskButtons = createElement('div', 'taskButtons', styles.taskButtonsRow);
+        const inputTitle = createElement('div', 'taskText', styles.taskTextStyle);
+        inputTitle.textContent = 'Your answer';
+        const inputArea = createElement('textarea', 'taskDescription', {
+            resize: 'vertical',
+        });
+        const inputContainer = createElement('div', 'inputArea', styles.taskDescriptionCard);
+        inputContainer.append(inputTitle, inputArea);
+        const closePanelButton = createElement('div', 'closePanelButton', styles.taskButtonStyle, 'Collapse panel');
+        const nextButton = createElement('div', 'nextButton', styles.taskButtonBorderedStyle, 'Done, next');
+        titleContainer.append(title, icon);
+        taskCard.append(taskText, taskDescription);
+        taskButtons.append(closePanelButton, nextButton);
+        content.append(pagination, taskCard, inputContainer, taskButtons);
+        section.append(titleContainer, content);
+        const updateTaskContent = () => {
+            const task = tasks[this.currentTaskIndex];
+            taskText.textContent = task.title;
+            taskDescription.textContent = task.description;
+            if (task.allow_typing) {
+                inputContainer.style.display = 'flex';
+            }
+            else {
+                inputContainer.style.display = 'none';
+            }
+        };
+        pagination.appendChild(leftArrow);
+        tasks.forEach((_, index) => {
+            const pageNumber = createElement('span', `or_task_${index}`, {}, (index + 1).toString());
+            pageNumber.id = `or_task_${index}`;
+            pagination.append(pageNumber);
+        });
+        pagination.appendChild(rightArrow);
+        const toggleTasksVisibility = () => {
+            this.widgetTasksVisible = !this.widgetTasksVisible;
+            icon.textContent = this.widgetTasksVisible ? '-' : '+';
+            Object.assign(content.style, this.widgetTasksVisible ? styles.contentStyle : { display: 'none' });
+        };
+        this.hideTaskSection = () => {
+            icon.textContent = '+';
+            Object.assign(content.style, {
+                display: 'none',
+            });
+            this.widgetTasksVisible = false;
+            return false;
+        };
+        this.showTaskSection = () => {
+            icon.textContent = '-';
+            Object.assign(content.style, styles.contentStyle);
+            this.widgetTasksVisible = true;
+            return true;
+        };
+        const highlightActive = () => {
+            const activeTaskEl = document.getElementById(`or_task_${this.currentTaskIndex}`);
+            if (activeTaskEl) {
+                Object.assign(activeTaskEl.style, styles.taskNumberActive);
+            }
+            for (let i = 0; i < this.currentTaskIndex; i++) {
+                const taskEl = document.getElementById(`or_task_${i}`);
+                if (taskEl) {
+                    Object.assign(taskEl.style, styles.taskNumberDone);
+                }
+            }
+        };
+        titleContainer.onclick = toggleTasksVisibility;
+        closePanelButton.onclick = this.collapseWidget;
+        nextButton.onclick = () => {
+            const textAnswer = tasks[this.currentTaskIndex].allow_typing ? inputArea.value : undefined;
+            inputArea.value = '';
+            void this.signalTask(tasks[this.currentTaskIndex].task_id, 'done', textAnswer);
+            if (this.currentTaskIndex < tasks.length - 1) {
+                this.currentTaskIndex++;
+                updateTaskContent();
+                if (this.durations.tasks.findIndex((t) => t.taskId === tasks[this.currentTaskIndex].task_id) === -1) {
+                    this.durations.tasks.push({
+                        taskId: tasks[this.currentTaskIndex].task_id,
+                        started: this.app.timestamp(),
+                    });
+                }
+                void this.signalTask(tasks[this.currentTaskIndex].task_id, 'begin');
+                highlightActive();
+            }
+            else {
+                this.showEndSection();
+            }
+            this.app.localStorage.setItem('or_uxt_task_index', this.currentTaskIndex.toString());
+        };
+        setTimeout(() => {
+            const firstTaskEl = document.getElementById('or_task_0');
+            if (firstTaskEl) {
+                Object.assign(firstTaskEl.style, styles.taskNumberActive);
+            }
+            updateTaskContent();
+            highlightActive();
+        }, 1);
+        return section;
+    }
+    showEndSection() {
+        var _a, _b, _c, _d, _e, _f;
+        let isLoading = true;
+        void this.signalTest('done');
+        const section = createElement('div', 'end_section_or', styles.endSectionStyle);
+        const title = createElement('div', 'end_title_or', {
+            fontSize: '1.25rem',
+            fontWeight: '500',
+        }, ((_a = this.test) === null || _a === void 0 ? void 0 : _a.reqMic) || ((_b = this.test) === null || _b === void 0 ? void 0 : _b.reqCamera) ? 'Uploading test recording...' : 'Thank you! 👍');
+        const description = createElement('div', 'end_description_or', {}, (_d = (_c = this.test) === null || _c === void 0 ? void 0 : _c.conclusion) !== null && _d !== void 0 ? _d : 'Thank you for participating in our usability test. Your feedback has been captured and will be used to enhance our website. \n' +
+            '\n' +
+            'We appreciate your time and valuable input.');
+        const button = createElement('div', 'end_button_or', styles.buttonWidgetStyle, 'Uploading session...');
+        if (((_e = this.test) === null || _e === void 0 ? void 0 : _e.reqMic) || ((_f = this.test) === null || _f === void 0 ? void 0 : _f.reqCamera)) {
+            void this.userRecorder.sendToAPI().then(() => {
+                title.textContent = 'Thank you! 👍';
+                button.textContent = 'End Session';
+                isLoading = false;
+            });
+        }
+        if (this.taskSection) {
+            this.container.removeChild(this.taskSection);
+        }
+        if (this.descriptionSection) {
+            this.container.removeChild(this.descriptionSection);
+        }
+        if (this.stopButton) {
+            this.container.removeChild(this.stopButton);
+        }
+        button.onclick = () => {
+            if (isLoading)
+                return;
+            window.close();
+            document.body.removeChild(this.bg);
+        };
+        section.append(title, description, button);
+        this.endSection = section;
+        this.container.append(section);
+    }
+}
+function generateGrid() {
+    const grid = document.createElement('div');
+    grid.className = 'grid';
+    for (let i = 0; i < 16; i++) {
+        const cell = document.createElement('div');
+        Object.assign(cell.style, {
+            width: '2px',
+            height: '2px',
+            borderRadius: '10px',
+            background: 'white',
+        });
+        cell.className = 'cell';
+        grid.appendChild(cell);
+    }
+    Object.assign(grid.style, {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(4, 1fr)',
+        gridTemplateRows: 'repeat(4, 1fr)',
+        gap: '2px',
+        cursor: 'grab',
+    });
+    return grid;
+}
+function generateChevron() {
+    const triangle = document.createElement('div');
+    Object.assign(triangle.style, {
+        width: '0',
+        height: '0',
+        borderLeft: '7px solid transparent',
+        borderRight: '7px solid transparent',
+        borderBottom: '7px solid white',
+    });
+    const container = document.createElement('div');
+    container.appendChild(triangle);
+    Object.assign(container.style, {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '16px',
+        height: '16px',
+        cursor: 'pointer',
+        marginLeft: 'auto',
+        transform: 'rotate(180deg)',
+    });
+    return container;
+}

package/lib/modules/userTesting/recorder.d.ts

@@ -0,0 +1,24 @@
+import App from '../../app/index.js';
+export declare const Quality: {
+    Standard: {
+        width: number;
+        height: number;
+    };
+    High: {
+        width: number;
+        height: number;
+    };
+};
+export default class Recorder {
+    private readonly app;
+    private mediaRecorder;
+    private recordedChunks;
+    private stream;
+    private recStartTs;
+    constructor(app: App);
+    startRecording(fps: number, quality: (typeof Quality)[keyof typeof Quality], micReq: boolean, camReq: boolean): Promise<void>;
+    stopRecording(): Promise<Blob>;
+    sendToAPI(): Promise<void | Response>;
+    saveToFile(fileName?: string): Promise<void>;
+    discard(): void;
+}

package/lib/modules/userTesting/recorder.js

@@ -0,0 +1,115 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+export const Quality = {
+    Standard: { width: 1280, height: 720 },
+    High: { width: 1920, height: 1080 },
+};
+export default class Recorder {
+    constructor(app) {
+        this.app = app;
+        this.mediaRecorder = null;
+        this.recordedChunks = [];
+        this.stream = null;
+        this.recStartTs = null;
+    }
+    startRecording(fps, quality, micReq, camReq) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.recStartTs = this.app.timestamp();
+            const videoConstraints = quality;
+            try {
+                this.stream = yield navigator.mediaDevices.getUserMedia({
+                    video: camReq ? Object.assign(Object.assign({}, videoConstraints), { frameRate: { ideal: fps } }) : false,
+                    audio: micReq,
+                });
+                this.mediaRecorder = new MediaRecorder(this.stream, {
+                    mimeType: 'video/webm;codecs=vp9',
+                });
+                this.recordedChunks = [];
+                this.mediaRecorder.ondataavailable = (event) => {
+                    if (event.data.size > 0) {
+                        this.recordedChunks.push(event.data);
+                    }
+                };
+                this.mediaRecorder.start();
+            }
+            catch (error) {
+                console.error(error);
+            }
+        });
+    }
+    stopRecording() {
+        return __awaiter(this, void 0, void 0, function* () {
+            return new Promise((resolve) => {
+                if (!this.mediaRecorder)
+                    return;
+                this.mediaRecorder.onstop = () => {
+                    const blob = new Blob(this.recordedChunks, {
+                        type: 'video/webm',
+                    });
+                    resolve(blob);
+                };
+                this.mediaRecorder.stop();
+            });
+        });
+    }
+    sendToAPI() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const blob = yield this.stopRecording();
+            // const formData = new FormData()
+            // formData.append('file', blob, 'record.webm')
+            // formData.append('start', this.recStartTs?.toString() ?? '')
+            return fetch(`${this.app.options.ingestPoint}/v1/web/uxt/upload-url`, {
+                headers: {
+                    Authorization: `Bearer ${this.app.session.getSessionToken()}`,
+                },
+            })
+                .then((r) => {
+                if (r.ok) {
+                    return r.json();
+                }
+                else {
+                    throw new Error('Failed to get upload url');
+                }
+            })
+                .then(({ url }) => {
+                return fetch(url, {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'video/webm',
+                    },
+                    body: blob,
+                });
+            })
+                .catch(console.error)
+                .finally(() => {
+                this.discard();
+            });
+        });
+    }
+    saveToFile(fileName = 'recorded-video.webm') {
+        return __awaiter(this, void 0, void 0, function* () {
+            const blob = yield this.stopRecording();
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.style.display = 'none';
+            a.href = url;
+            a.download = fileName;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            document.body.removeChild(a);
+        });
+    }
+    discard() {
+        var _a, _b;
+        (_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.stop();
+        (_b = this.stream) === null || _b === void 0 ? void 0 : _b.getTracks().forEach((track) => track.stop());
+    }
+}