sample-xmonitor-js 0.0.4 → 1.0.1

package/lib/Monitor.d.ts

@@ -8,42 +8,18 @@ export declare interface Setup {
      */
     classify?: string;
     /**
-     * 其他参数
+     * 是否开启调试
      */
-    [key: string]: any;
-}
-export declare interface DefaultSetup extends Setup {
-    audio?: false;
+    debug?: true;
     /**
-     * [点击文档](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia)
-     * 视频配置信息
-     * min: 最小画像宽度 max 最大画像宽度 ideal： 推荐的理想画质宽度
-     *
-     * user: 前置摄像头 environment：后置摄像头
-     * frameRate: 设置帧率 ideal 推荐帧率 max 最大帧率 受限带宽传输时，低帧率可能更适宜 eg: frameRate: { ideal: 10, max: 15 }
+     * 其他参数
      */
-    video?: true | {
-        frameRate: {
-            ideal: number;
-            max: number;
-        };
-        facingMode: 'user' | 'environment';
-        width: number | {
-            min: number;
-            ideal: number;
-            max: number;
-        };
-        height: number | {
-            min: number;
-            ideal: number;
-            max: number;
-        };
-    };
+    [key: string]: any;
 }
 declare class Watcher {
     private readonly monitor;
     private readonly driver;
-    private readonly name;
+    private readonly type;
     constructor(monitor: Monitor);
     clean(): Promise<unknown>;
     shot(sharpness?: number): Promise<any>;
@@ -58,7 +34,16 @@ export declare class ScreenTypeError extends Error {
     readonly code: string;
     constructor(message: any, code?: any);
 }
-export type MonitorType = 'default:desktop' | 'default:camera';
+export type Device = 'screen' | 'camera' | 'mobile';
+export type Provider = 'default' | 'txrtc';
+export type DeviceProvider = 'default:screen' | 'default:camera' | 'default:mobile' | 'txrtc:screen' | 'txrtc:camera' | 'txrtc:mobile';
+export declare class MonitorType {
+    readonly provider: Provider;
+    readonly device: Device;
+    constructor(provider: Provider, device: Device);
+    toString(): string;
+    static parse(str: DeviceProvider): MonitorType;
+}
 /**
  * cancel 用户取消 不给授权 禁用摄像头
  * start 开始录制
@@ -68,8 +53,8 @@ export type MonitorType = 'default:desktop' | 'default:camera';
  * error 发生错误
  * changed 状态改变
  */
-export type MonitorEvent = 'cancel' | 'start' | 'playing' | 'pause' | 'shot' | 'stop' | 'error' | 'changed';
-export declare const MonitorEvents: Array<string>;
+export type MonitorEvent = 'cancel' | 'start' | 'playing' | 'pause' | 'shot' | 'stop' | 'error' | 'changed' | 'message';
+export declare const MonitorEvents: Array<MonitorEvent>;
 export type MonitorEventObject = {
     event: MonitorEvent;
     target: Monitor;
@@ -78,10 +63,7 @@ export type MonitorEventObject = {
 };
 export declare class MObject {
     /**
-     * 所属活动
-     */
-    readonly activity: string;
-    /**
+     /**
      * 所属房间
      */
     readonly room: string;
@@ -90,7 +72,7 @@ export declare class MObject {
      */
     readonly id: string;
     private constructor();
-    static create({ room, id, activity }: Record<string, any>): MObject;
+    static create({ room, id }: Record<string, any>): MObject;
     toString(): string;
 }
 export interface MonitorEventListener {
@@ -100,7 +82,7 @@ export type MonitorOptions = {
     object: MObject;
     type: MonitorType;
     element: HTMLDivElement;
-    setup?: DefaultSetup;
+    setup?: Setup;
 };
 /**
  * 监视器
@@ -119,12 +101,18 @@ export default class Monitor {
      * 启动监控
      */
     start(): any;
+    send(message: string): void;
     /**
      * 停止监控
      */
     stop(): any;
     addEventListener(event: MonitorEvent, listener: MonitorEventListener): void;
     protected dispatchEvent(event: MonitorEvent, data?: any, error?: any): void;
+    switch(option: {
+        deviceId?: string;
+        useFrontCamera?: boolean;
+        [key: string]: any;
+    }): Promise<void>;
     removeEventListener(event: MonitorEvent): void;
 }
 export {};

package/lib/Monitor.js

@@ -2,10 +2,10 @@ import Driver from 'xdriver';
 class Watcher {
     constructor(monitor) {
         this.monitor = monitor;
-        this.name = monitor.type;
+        this.type = monitor.type;
         let driver = new Driver('x-monitor');
         driver.initialize(() => {
-            driver.createTables(['desktop', 'camera'], {
+            driver.createTables(['screen', 'camera'], {
                 primaryKey: 'id',
                 autoIncrement: true
             });
@@ -18,7 +18,6 @@ class Watcher {
         return this.driver.drop();
     }
     shot(sharpness = 0.3) {
-        var _a;
         if (sharpness > 1)
             sharpness = 1;
         if (sharpness < 0)
@@ -42,16 +41,12 @@ class Watcher {
         img.no = this.monitor.no;
         img.name = name;
         img.data = canvas.toDataURL('jpg');
-        img.type = this.name;
-        img.classify = (_a = this.monitor.options.setup) === null || _a === void 0 ? void 0 : _a.classify;
-        let table = this.name;
-        if (table.indexOf(':') !== -1) {
-            table = table.split(':')[1];
-        }
-        return this.driver.insert(table, [img]).then(res => img);
+        img.type = this.type.device;
+        img.classify = this.monitor.options.setup?.classify;
+        return this.driver.insert(this.type.device, [img]).then(res => img);
     }
     select() {
-        return this.driver.query(this.name);
+        return this.driver.query(this.type.device);
     }
 }
 export class NotSupportError extends Error {
@@ -66,18 +61,30 @@ export class ScreenTypeError extends Error {
         this.code = code;
     }
 }
+export class MonitorType {
+    constructor(provider, device) {
+        this.provider = provider;
+        this.device = device;
+    }
+    toString() {
+        return `${this.provider}:${this.device}`;
+    }
+    static parse(str) {
+        let [type, device] = str.split(':');
+        return new MonitorType(type, device);
+    }
+}
 export const MonitorEvents = ['cancel', 'start', 'playing', 'pause', 'shot', 'stop', 'error', 'changed'];
 export class MObject {
-    constructor(room, id, activity = 'default') {
-        this.activity = activity;
+    constructor(room, id) {
         this.room = room;
         this.id = id;
     }
-    static create({ room, id, activity }) {
-        return new MObject(room, id, activity);
+    static create({ room, id }) {
+        return new MObject(room, id);
     }
     toString() {
-        return `${this.activity}-${this.room}-${this.id}`;
+        return `${this.room}-${this.id}`;
     }
 }
 /**
@@ -96,8 +103,7 @@ export default class Monitor {
         return this.element.paused;
     }
     shot() {
-        var _a;
-        return this.watcher.shot((_a = this.options.setup) === null || _a === void 0 ? void 0 : _a.sharpness).then(img => {
+        return this.watcher.shot(this.options.setup?.sharpness).then(img => {
             this.dispatchEvent('shot', img);
             return img;
         });
@@ -107,6 +113,9 @@ export default class Monitor {
      */
     start() {
     }
+    send(message) {
+        throw new NotSupportError('不支持发送消息');
+    }
     /**
      * 停止监控
      */
@@ -123,6 +132,9 @@ export default class Monitor {
         }
         console.log(event, data, error);
     }
+    async switch(option) {
+        throw new NotSupportError('不支持设备切换');
+    }
     removeEventListener(event) {
         this.eventPool.delete(event);
     }

package/lib/default/index.d.ts

@@ -0,0 +1,54 @@
+import Monitor, { Device, MObject, MonitorOptions, Setup } from "../Monitor";
+export interface DefaultSetup extends Setup {
+    audio?: false;
+    /**
+     * [点击文档](https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia)
+     * 视频配置信息
+     * min: 最小画像宽度 max 最大画像宽度 ideal： 推荐的理想画质宽度
+     *
+     * user: 前置摄像头 environment：后置摄像头
+     * frameRate: 设置帧率 ideal 推荐帧率 max 最大帧率 受限带宽传输时，低帧率可能更适宜 eg: frameRate: { ideal: 10, max: 15 }
+     */
+    video?: true | {
+        deviceId?: string;
+        frameRate?: {
+            ideal: number;
+            max: number;
+        };
+        facingMode?: 'user' | 'environment' | {
+            exact: "environment";
+        };
+        width?: number | {
+            min: number;
+            ideal: number;
+            max: number;
+        };
+        height?: number | {
+            min: number;
+            ideal: number;
+            max: number;
+        };
+    };
+}
+export default class DefaultMonitor extends Monitor {
+    private stream;
+    private active;
+    constructor(options: MonitorOptions);
+    protected getMedia(setup: DefaultSetup): any;
+    start(): Promise<any>;
+    stop(): Promise<any>;
+    static getMonitor(device: Device, object: MObject, element: HTMLDivElement, setup?: Setup): DefaultMonitor;
+}
+export declare class DefaultScreenMonitor extends DefaultMonitor {
+    constructor(object: MObject, element: HTMLDivElement, setup?: DefaultSetup);
+    start(): Promise<any>;
+    protected getMedia(setup: DefaultSetup): any;
+}
+export declare class DefaultCameraMonitor extends DefaultMonitor {
+    constructor(object: MObject, element: HTMLDivElement, setup?: DefaultSetup);
+    protected getMedia(setup: DefaultSetup): any;
+    switch(option: {
+        cameraId?: string;
+        useFrontCamera?: boolean;
+    }): Promise<void>;
+}

package/lib/default/index.js

@@ -0,0 +1,149 @@
+import Monitor, { MonitorType, NotSupportError, ScreenTypeError } from "../Monitor";
+let win = window;
+const navigator = win.navigator;
+if (!navigator.mediaDevices) {
+    navigator["mediaDevices"] = {
+        getUserMedia: (constraints) => {
+            return navigator.getUserMedia ? new Promise((resolve, reject) => {
+                navigator.getUserMedia(constraints, resolve, reject);
+            }) : Promise.reject(new NotSupportError('This browser not support getUserMedia'));
+        }
+    };
+}
+const { mediaDevices } = navigator;
+if (!mediaDevices.getDisplayMedia) {
+    mediaDevices.getDisplayMedia = (options) => {
+        return Promise.reject(new NotSupportError('This browser not support getDisplayMedia'));
+    };
+}
+export default class DefaultMonitor extends Monitor {
+    constructor(options) {
+        super(options);
+        this.active = false;
+    }
+    getMedia(setup) { }
+    async start() {
+        if (this.active)
+            return;
+        let video = document.createElement('video');
+        video.setAttribute('autoplay', 'true');
+        // 该属性的作用是在ios下video可以播放 否则会显示黑屏
+        video.setAttribute('playsinline', '');
+        video.style.width = "100%";
+        video.style.height = "100%";
+        this.options.element?.appendChild(video);
+        this.element = video;
+        let stream;
+        try {
+            stream = await this.getMedia({ audio: false, video: true, ...this.options.setup });
+        }
+        catch (e) {
+            /*
+             * AbortError［中止错误］
+             * 尽管用户和操作系统都授予了访问设备硬件的权利，而且未出现可能抛出NotReadableError异常的硬件问题，但仍然有一些问题的出现导致了设备无法被使用。
+             * NotAllowedError［拒绝错误］
+             * 用户拒绝了当前的浏览器实例的访问请求；或者用户拒绝了当前会话的访问；或者用户在全局范围内拒绝了所有媒体访问请求。
+             * NotFoundError［找不到错误］
+             * 找不到满足请求参数的媒体类型。
+             * NotReadableError［无法读取错误］
+             * 尽管用户已经授权使用相应的设备，操作系统上某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问。
+             * OverconstrainedError［无法满足要求错误］
+             * 指定的要求无法被设备满足，此异常是一个类型为OverconstrainedError的对象，拥有一个constraint属性，这个属性包含了当前无法被满足的constraint对象，还拥有一个message属性，包含了阅读友好的字符串用来说明情况。
+             *SecurityError［安全错误］
+             * 在getUserMedia() 被调用的 Document 上面，使用设备媒体被禁止。这个机制是否开启或者关闭取决于单个用户的偏好设置。
+             * TypeError［类型错误］
+             *constraints 对象未设置［空］，或者都被设置为false。
+             *
+             * */
+            if (!(e instanceof NotSupportError)) {
+                this.dispatchEvent('error', void 0, e);
+                return;
+            }
+            throw e;
+        }
+        let { element } = this;
+        element.srcObject = stream;
+        this.stream = stream;
+        let track = stream.getTracks()[0];
+        if (this.options.type.device === 'screen' && !/^screen/i.test(track.label)) {
+            await this.stop();
+            this.dispatchEvent('error', null, new ScreenTypeError('Screen share type error', 'ScreenTypeError'));
+            return;
+        }
+        track.onended = e => {
+            this.active = false;
+            this.dispatchEvent('cancel');
+        };
+        element.onloadedmetadata = () => {
+            element.play();
+            this.dispatchEvent('start');
+        };
+        element.onplaying = () => {
+            this.dispatchEvent('playing');
+            this.active = true;
+        };
+        element.onended = () => {
+            this.active = false;
+            this.dispatchEvent('stop');
+        };
+        return track;
+    }
+    async stop() {
+        this.active = false;
+        if (this.stream) {
+            this.element.pause();
+            this.stream.getTracks().forEach((track) => track.stop());
+            this.stream = void 0;
+        }
+        this.element.remove();
+        super.stop();
+    }
+    static getMonitor(device, object, element, setup) {
+        if (device === 'screen') {
+            return new DefaultScreenMonitor(object, element, setup);
+        }
+        else if (device === 'camera' || device === 'mobile') {
+            return new DefaultCameraMonitor(object, element, setup);
+        }
+        throw new NotSupportError(`Device ${device} not support`, 'NotSupportError');
+    }
+}
+export class DefaultScreenMonitor extends DefaultMonitor {
+    constructor(object, element, setup) {
+        super({ type: new MonitorType('default', 'screen'), object, element, setup });
+    }
+    async start() {
+        return super.start();
+    }
+    getMedia(setup) {
+        return mediaDevices.getDisplayMedia(setup);
+    }
+}
+export class DefaultCameraMonitor extends DefaultMonitor {
+    constructor(object, element, setup) {
+        super({ type: new MonitorType('default', 'camera'), element, object, setup });
+    }
+    getMedia(setup) {
+        return mediaDevices.getUserMedia(setup);
+    }
+    async switch(option) {
+        await this.stop();
+        let video = {
+            ...this.options.setup?.video,
+            deviceId: option.cameraId
+        };
+        if (typeof video !== 'boolean' && video) {
+            if (option.useFrontCamera === true) {
+                video.facingMode = 'user';
+            }
+            else if (option.useFrontCamera === false) {
+                video.facingMode = 'environment';
+            }
+        }
+        this.options.setup = {
+            ...this.options.setup,
+            video
+        };
+        await this.start();
+    }
+}

package/lib/index.d.ts

@@ -1,9 +1,7 @@
-import Monitor, { DefaultSetup, MObject, MonitorEvent, MonitorEventListener, MonitorType, Setup } from "./Monitor";
+import Monitor, { DeviceProvider, MObject, MonitorEvent, MonitorEventListener, MonitorType, Setup } from "./Monitor";
+import { DefaultSetup } from "./default";
+import { TxrtcSetup } from "./txrtc";
 export default class MonitorFactory {
-    /**
-     * 监控
-     */
-    static INSTANCE?: MonitorFactory;
     private readonly monitorMap;
     private readonly pointer;
     private readonly eventPool;
@@ -23,11 +21,11 @@ export default class MonitorFactory {
      * @param {HTMLDivElement} element 视频所在div元素
      * @param {any} setup 监视器相关的参数
      */
-    init(type: MonitorType, element: HTMLDivElement, setup?: Setup): Monitor;
+    init(type: MonitorType, element: HTMLDivElement, setup?: Setup): Promise<Monitor>;
     /**
      * 启动所有监视器
      */
-    start(interval?: number): Promise<void>;
+    start(interval?: number): void;
     /**
      * 停用监视器
      */
@@ -38,12 +36,11 @@ export declare function reset(): void;
  * 初始化监控
  */
 export declare function getInstance(options?: {
-    id: any;
-    room: any;
-    activity: any;
+    id: string;
+    room: string;
     monitors: Array<{
-        type: MonitorType;
+        provider: DeviceProvider;
         element: any;
-        setup?: DefaultSetup;
+        setup?: DefaultSetup | Omit<TxrtcSetup, 'roomId' | 'userId'>;
     }>;
 }): MonitorFactory;

package/lib/index.js

@@ -1,14 +1,6 @@
-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());
-    });
-};
-import { MObject, MonitorEvents } from "./Monitor";
-import { CameraMonitor, DesktopMonitor } from "./DefaultMonitor";
+import { MObject, MonitorEvents, MonitorType, NotSupportError } from "./Monitor";
+import DefaultMonitor from "./default";
+import TxrtcMonitor from "./txrtc";
 export default class MonitorFactory {
     constructor(pointer) {
         this.monitorMap = new Map();
@@ -35,98 +27,89 @@ export default class MonitorFactory {
      * @param {HTMLDivElement} element 视频所在div元素
      * @param {any} setup 监视器相关的参数
      */
-    init(type, element, setup) {
+    async init(type, element, setup) {
         let monitor;
-        switch (type) {
-            case "default:camera":
-                monitor = new CameraMonitor(this.pointer, element, setup);
-                break;
-            case "default:desktop":
-                monitor = new DesktopMonitor(this.pointer, element, setup);
-                break;
-            default:
-                throw new Error(`Not support monitor type ${type}`);
+        if (type.provider === 'default') {
+            monitor = DefaultMonitor.getMonitor(type.device, this.pointer, element, setup);
         }
-        MonitorEvents.forEach((evt) => {
+        else if (type.provider === 'txrtc') {
+            monitor = TxrtcMonitor.getMonitor(type.device, this.pointer, element, setup);
+        }
+        else {
+            throw new NotSupportError(`不支持的监视器类型${type.toString()}`, 'not_support');
+        }
+        for (const evt of MonitorEvents) {
             monitor.addEventListener(evt, event => {
-                var _a;
                 // 监视器截图
-                (_a = this.eventPool.get(evt)) === null || _a === void 0 ? void 0 : _a.call(monitor, event);
+                this.eventPool.get(evt)?.call(monitor, event);
             });
-        });
-        this.monitorMap.set(type, monitor);
+        }
+        this.monitorMap.set(type.toString(), monitor);
         return monitor;
     }
     /**
      * 启动所有监视器
      */
-    start() {
-        return __awaiter(this, arguments, void 0, function* (interval = 10000) {
-            if (interval < 5000) {
-                throw new Error('定时捕捉画面时间间隔不能少于5秒');
+    start(interval = 10000) {
+        if (interval < 5000) {
+            throw new Error('定时捕捉画面时间间隔不能少于5秒');
+        }
+        clearInterval(this.intervalId);
+        // 启动timer定时截图
+        console.log(`开启定时截图，时间间隔${interval}ms`);
+        this.intervalId = setInterval(async () => {
+            try {
+                // 调用所有监视器截图
+                for (let [, monitor] of this.monitorMap) {
+                    if (monitor.isPaused())
+                        continue;
+                    await monitor.shot();
+                }
             }
-            // 启动所有监视器
-            for (let [, monitor] of this.monitorMap) {
-                yield monitor.start();
+            catch (e) {
+                console.log(e);
             }
-            clearInterval(this.intervalId);
-            // 启动timer定时截图
-            this.intervalId = setInterval(() => __awaiter(this, void 0, void 0, function* () {
-                try {
-                    // 调用所有监视器截图
-                    for (let [, monitor] of this.monitorMap) {
-                        if (monitor.isPaused())
-                            continue;
-                        yield monitor.shot();
-                    }
-                }
-                catch (e) {
-                    console.log(e);
-                }
-            }), interval);
-        });
+        }, interval);
+        // 启动所有监视器
+        for (let monitor of this.monitorMap.values()) {
+            console.log(`启动监视器 >>> ${monitor.type.toString()}`);
+            monitor.start();
+        }
+        console.log('所有监视器启动完成');
     }
     /**
      * 停用监视器
      */
-    stop() {
-        return __awaiter(this, void 0, void 0, function* () {
-            clearInterval(this.intervalId);
-            // 启动所有监视器
-            for (let [, monitor] of this.monitorMap) {
-                yield monitor.stop();
-            }
-        });
+    async stop() {
+        clearInterval(this.intervalId);
+        // 启动所有监视器
+        for (let [, monitor] of this.monitorMap) {
+            await monitor.stop();
+        }
     }
 }
+let factory = undefined;
 export function reset() {
-    var _a;
-    (_a = MonitorFactory.INSTANCE) === null || _a === void 0 ? void 0 : _a.stop();
-    MonitorFactory.INSTANCE = undefined;
+    factory?.stop();
+    factory = undefined;
 }
 /**
  * 初始化监控
  */
 export function getInstance(options) {
-    if (!MonitorFactory.INSTANCE) {
+    if (!factory) {
         if (!options) {
             throw new Error('实例尚未创建，参数不能为空');
         }
-        let factory = new MonitorFactory(MObject.create(options));
-        const types = [];
-        for (let { element, type, setup } of options.monitors) {
+        factory = new MonitorFactory(MObject.create(options));
+        Promise.all(options.monitors.map(({ element, provider = 'default:camera', setup }) => {
             if (typeof element === 'string') {
                 element = document.getElementById(element);
             }
-            if (types.indexOf(type) !== -1) {
-                throw new Error(`重复的监视器类型 ${type}`);
-            }
-            else {
-                types.push(type);
-            }
-            factory.init(type, element, setup);
-        }
-        MonitorFactory.INSTANCE = factory;
+            return factory.init(MonitorType.parse(provider), element, setup);
+        })).then((monitors) => {
+            console.log(monitors);
+        });
     }
-    return MonitorFactory.INSTANCE;
+    return factory;
 }

package/lib/txrtc/index.d.ts

@@ -0,0 +1,38 @@
+import Monitor, { Device, MObject, MonitorOptions, Setup } from "../Monitor";
+import TRTC, { LocalVideoConfig } from "trtc-sdk-v5";
+export interface TxrtcSetup extends Setup {
+    userId: string;
+    roomId: string;
+    sdkAppId: number;
+    userSig: string;
+    userDefineRecordId?: string;
+}
+export default class TxrtcMonitor extends Monitor {
+    private active;
+    protected readonly trtc: TRTC;
+    protected readonly setup: TxrtcSetup;
+    constructor(options: MonitorOptions);
+    start(): Promise<any>;
+    initEvent(): Promise<Boolean>;
+    /**
+     * 发送自定义消息
+     * @param message
+     */
+    send(message: string): void;
+    stop(): Promise<any>;
+    static getMonitor(device: Device, object: MObject, element: HTMLDivElement, setup?: Setup): TxrtcMonitor;
+}
+export declare class TxrtcScreenMonitor extends TxrtcMonitor {
+    constructor(object: MObject, element: HTMLDivElement, setup?: Setup);
+    start(): Promise<any>;
+    stop(): Promise<any>;
+}
+export declare class TxrtcCameraMonitor extends TxrtcMonitor {
+    constructor(object: MObject, element: HTMLDivElement, setup?: Setup);
+    start(): Promise<any>;
+    /**
+     * 切换摄像头
+     */
+    switch(option: LocalVideoConfig['option']): Promise<void>;
+    stop(): Promise<any>;
+}

package/lib/txrtc/index.js

@@ -0,0 +1,144 @@
+import Monitor, { MonitorType, NotSupportError, ScreenTypeError } from "../Monitor";
+import TRTC, { LOG_LEVEL } from "trtc-sdk-v5";
+import { CDNStreaming, PublishMode } from 'trtc-sdk-v5/plugins/cdn-streaming';
+export default class TxrtcMonitor extends Monitor {
+    constructor(options) {
+        super(options);
+        this.active = false;
+        this.setup = options.setup;
+        this.trtc = TRTC.create({ plugins: [CDNStreaming] });
+        if (this.setup.debug) {
+            TRTC.setLogLevel(LOG_LEVEL.DEBUG);
+        }
+    }
+    async start() {
+        let streamId = `${this.setup.roomId}_${this.setup.userId}_${this.type.device}`;
+        console.debug(`Start ${this.type.device} TxrtcMonitor with streamId ${streamId}`);
+        if (this.active)
+            return;
+        let publishMode = PublishMode.PublishMainStreamToCDN;
+        if (this.type.device === 'screen') {
+            publishMode = PublishMode.PublishSubStreamToCDN;
+        }
+        await this.trtc.startPlugin('CDNStreaming', {
+            target: { publishMode, streamId }
+        });
+        let params = {
+            userId: this.setup.userId,
+            strRoomId: this.setup.roomId,
+            userSig: this.setup.userSig,
+            sdkAppId: this.setup.sdkAppId
+        };
+        if (this.setup.userDefineRecordId) {
+            params.userDefineRecordId = this.setup.userDefineRecordId;
+        }
+        await this.trtc.enterRoom(params);
+    }
+    async initEvent() {
+        return new Promise((resolve) => {
+            this.trtc.on(TRTC.EVENT.ERROR, (error) => {
+                let err = error;
+                if (this.options.type.device === 'screen') {
+                    err = new ScreenTypeError(error.message, 'ScreenTypeError');
+                }
+                this.dispatchEvent('error', null, err);
+                this.stop();
+                resolve(false);
+            }).on(TRTC.EVENT.SCREEN_SHARE_STOPPED, () => {
+                this.dispatchEvent('cancel');
+                this.stop();
+            }).on(TRTC.EVENT.TRACK, () => {
+                +this.dispatchEvent('start');
+                this.active = true;
+                this.element = this.options.element.querySelector('video');
+                resolve(true);
+            }).on(TRTC.EVENT.VIDEO_PLAY_STATE_CHANGED, ({ state }) => {
+                if (state === 'STOPPED') {
+                    this.dispatchEvent('stop');
+                }
+                else if (state === 'PLAYING') {
+                    this.dispatchEvent('playing');
+                }
+            }).on(TRTC.EVENT.CUSTOM_MESSAGE, (message) => {
+                let decoder = new TextDecoder('utf-8');
+                let payload = decoder.decode(message.data);
+                this.dispatchEvent('message', payload);
+            });
+        });
+    }
+    /**
+     * 发送自定义消息
+     * @param message
+     */
+    send(message) {
+        this.trtc.sendCustomMessage({
+            cmdId: Math.ceil(Math.random() * 100),
+            data: new TextEncoder().encode(message).buffer
+        });
+    }
+    async stop() {
+        this.active = false;
+        await this.trtc.exitRoom();
+        await this.trtc.destroy();
+        super.stop();
+    }
+    static getMonitor(device, object, element, setup) {
+        if (device === 'screen') {
+            return new TxrtcScreenMonitor(object, element, setup);
+        }
+        else if (device === 'camera' || device === 'mobile') {
+            return new TxrtcCameraMonitor(object, element, setup);
+        }
+        throw new NotSupportError(`Device ${device} not support`, 'NotSupportError');
+    }
+}
+export class TxrtcScreenMonitor extends TxrtcMonitor {
+    constructor(object, element, setup) {
+        super({
+            type: new MonitorType('txrtc', 'screen'), object, element, setup: {
+                ...setup,
+                userId: object.id,
+                roomId: object.room
+            }
+        });
+    }
+    async start() {
+        await super.start();
+        await this.trtc.startScreenShare({ publish: true, view: this.options.element });
+        await this.initEvent();
+    }
+    async stop() {
+        await this.trtc.stopScreenShare();
+        await super.stop();
+    }
+}
+export class TxrtcCameraMonitor extends TxrtcMonitor {
+    constructor(object, element, setup) {
+        super({
+            type: new MonitorType('txrtc', 'camera'), element, object, setup: {
+                ...setup,
+                userId: object.id,
+                roomId: object.room
+            }
+        });
+    }
+    async start() {
+        await super.start();
+        await this.trtc.startLocalAudio({ publish: true });
+        await this.trtc.startLocalVideo({ publish: true, view: this.options.element });
+        await this.initEvent();
+    }
+    /**
+     * 切换摄像头
+     */
+    async switch(option) {
+        if (option?.cameraId || option?.useFrontCamera) {
+            await this.trtc.updateLocalVideo({ option });
+        }
+    }
+    async stop() {
+        await this.trtc.stopLocalAudio();
+        await this.trtc.stopLocalVideo();
+        await super.stop();
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-xmonitor-js",
-  "version": "0.0.4",
+  "version": "1.0.1",
   "description": "",
   "main": "./lib/index",
   "files": [
@@ -21,7 +21,6 @@
   "author": "xs",
   "license": "ISC",
   "devDependencies": {
-    "@types/node": "^16.11.15",
     "babel-cli": "^6.26.0",
     "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.24.1",
@@ -31,6 +30,7 @@
     "webpack-cli": "^4.9.1"
   },
   "dependencies": {
+    "trtc-sdk-v5": "^5.8.6",
     "xdriver": "^1.1.1"
   }
 }

package/lib/DefaultMonitor.d.ts

@@ -1,19 +0,0 @@
-import Monitor, { DefaultSetup, MObject, MonitorOptions } from "./Monitor";
-declare class DefaultMonitor extends Monitor {
-    private stream;
-    private active;
-    constructor(options: MonitorOptions);
-    protected getMedia(setup: DefaultSetup): any;
-    start(): Promise<any>;
-    stop(): Promise<any>;
-}
-export declare class DesktopMonitor extends DefaultMonitor {
-    constructor(object: MObject, element: HTMLDivElement, setup?: DefaultSetup);
-    start(): Promise<any>;
-    protected getMedia(setup: DefaultSetup): any;
-}
-export declare class CameraMonitor extends DefaultMonitor {
-    constructor(object: MObject, element: HTMLDivElement, setup?: DefaultSetup);
-    protected getMedia(setup: DefaultSetup): any;
-}
-export {};

package/lib/DefaultMonitor.js

@@ -1,141 +0,0 @@
-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());
-    });
-};
-import Monitor, { NotSupportError, ScreenTypeError } from "./Monitor";
-let win = window;
-const navigator = win.navigator;
-if (!navigator.mediaDevices) {
-    navigator["mediaDevices"] = {
-        getUserMedia: (constraints) => {
-            return navigator.getUserMedia ? new Promise((resolve, reject) => {
-                navigator.getUserMedia(constraints, resolve, reject);
-            }) : Promise.reject(new NotSupportError('This browser not support getUserMedia'));
-        }
-    };
-}
-const { mediaDevices } = navigator;
-if (!mediaDevices.getDisplayMedia) {
-    mediaDevices.getDisplayMedia = (options) => {
-        return Promise.reject(new NotSupportError('This browser not support getDisplayMedia'));
-    };
-}
-class DefaultMonitor extends Monitor {
-    constructor(options) {
-        super(options);
-        this.active = false;
-        let video = document.createElement('video');
-        video.setAttribute('autoplay', 'true');
-        // 该属性的作用是在ios下video可以播放 否则会显示黑屏
-        video.setAttribute('playsinline', '');
-        video.style.width = "100%";
-        video.style.height = "100%";
-        options.element.appendChild(video);
-        this.element = video;
-    }
-    getMedia(setup) { }
-    start() {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (this.active)
-                return;
-            let stream;
-            try {
-                stream = yield this.getMedia(Object.assign({ audio: false, video: true }, this.options.setup));
-            }
-            catch (e) {
-                /*
-                 * AbortError［中止错误］
-                 * 尽管用户和操作系统都授予了访问设备硬件的权利，而且未出现可能抛出NotReadableError异常的硬件问题，但仍然有一些问题的出现导致了设备无法被使用。
-                 * NotAllowedError［拒绝错误］
-                 * 用户拒绝了当前的浏览器实例的访问请求；或者用户拒绝了当前会话的访问；或者用户在全局范围内拒绝了所有媒体访问请求。
-                 * NotFoundError［找不到错误］
-                 * 找不到满足请求参数的媒体类型。
-                 * NotReadableError［无法读取错误］
-                 * 尽管用户已经授权使用相应的设备，操作系统上某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问。
-                 * OverconstrainedError［无法满足要求错误］
-                 * 指定的要求无法被设备满足，此异常是一个类型为OverconstrainedError的对象，拥有一个constraint属性，这个属性包含了当前无法被满足的constraint对象，还拥有一个message属性，包含了阅读友好的字符串用来说明情况。
-                 *SecurityError［安全错误］
-                 * 在getUserMedia() 被调用的 Document 上面，使用设备媒体被禁止。这个机制是否开启或者关闭取决于单个用户的偏好设置。
-                 * TypeError［类型错误］
-                 *constraints 对象未设置［空］，或者都被设置为false。
-                 *
-                 * */
-                if (!(e instanceof NotSupportError)) {
-                    this.dispatchEvent('error', void 0, e);
-                    return;
-                }
-                throw e;
-            }
-            let { element } = this;
-            element.srcObject = stream;
-            this.stream = stream;
-            let track = stream.getTracks()[0];
-            if (this.options.type === 'default:desktop' && !/^screen/i.test(track.label)) {
-                yield this.stop();
-                this.dispatchEvent('error', null, new ScreenTypeError('Screen share type error', 'ScreenTypeError'));
-                return;
-            }
-            track.onended = e => {
-                this.active = false;
-                this.dispatchEvent('cancel');
-            };
-            element.onloadedmetadata = () => {
-                element.play();
-                this.dispatchEvent('start');
-            };
-            element.onplaying = () => {
-                this.dispatchEvent('playing');
-                this.active = true;
-            };
-            element.onended = () => {
-                this.active = false;
-                this.dispatchEvent('stop');
-            };
-            return track;
-        });
-    }
-    stop() {
-        const _super = Object.create(null, {
-            stop: { get: () => super.stop }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            this.active = false;
-            if (this.stream) {
-                this.element.pause();
-                this.stream.getTracks().forEach((track) => track.stop());
-                this.stream = void 0;
-            }
-            this.element.remove();
-            _super.stop.call(this);
-        });
-    }
-}
-export class DesktopMonitor extends DefaultMonitor {
-    constructor(object, element, setup) {
-        super({ type: 'default:desktop', object, element, setup });
-    }
-    start() {
-        const _super = Object.create(null, {
-            start: { get: () => super.start }
-        });
-        return __awaiter(this, void 0, void 0, function* () {
-            return _super.start.call(this);
-        });
-    }
-    getMedia(setup) {
-        return mediaDevices.getDisplayMedia(setup);
-    }
-}
-export class CameraMonitor extends DefaultMonitor {
-    constructor(object, element, setup) {
-        super({ type: 'default:camera', element, object, setup });
-    }
-    getMedia(setup) {
-        return mediaDevices.getUserMedia(setup);
-    }
-}