sample-xmonitor-js 0.0.1

package/lib/DefaultMonitor.d.ts

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,140 @@
+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.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);
+    }
+}

package/lib/Monitor.d.ts

@@ -0,0 +1,130 @@
+export declare interface Setup {
+    /**
+     *控制视频截图清晰度
+     */
+    sharpness?: number;
+    /**
+     * 图像分类
+     */
+    classify?: string;
+    /**
+     * 其他参数
+     */
+    [key: string]: any;
+}
+export declare 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 | {
+        frameRate: {
+            ideal: number;
+            max: number;
+        };
+        facingMode: 'user' | 'environment';
+        width: number | {
+            min: number;
+            ideal: number;
+            max: number;
+        };
+        height: number | {
+            min: number;
+            ideal: number;
+            max: number;
+        };
+    };
+}
+declare class Watcher {
+    private readonly monitor;
+    private readonly driver;
+    private readonly name;
+    constructor(monitor: Monitor);
+    clean(): Promise<unknown>;
+    shot(sharpness?: number): Promise<any>;
+    select(): any;
+}
+export type NotSupportType = 'device' | 'browser' | 'element';
+export declare class NotSupportError extends Error {
+    readonly code: string;
+    constructor(message: any, code?: any);
+}
+export declare class ScreenTypeError extends Error {
+    readonly code: string;
+    constructor(message: any, code?: any);
+}
+export type MonitorType = 'default:desktop' | 'default:camera';
+/**
+ * cancel 用户取消 不给授权 禁用摄像头
+ * start 开始录制
+ * pause 暂停录制
+ * shot 截图
+ * stop 录制停止
+ * error 发生错误
+ * changed 状态改变
+ */
+export type MonitorEvent = 'cancel' | 'start' | 'playing' | 'pause' | 'shot' | 'stop' | 'error' | 'changed';
+export declare const MonitorEvents: Array<string>;
+export type MonitorEventObject = {
+    event: MonitorEvent;
+    target: Monitor;
+    data?: any;
+    error?: any;
+};
+export declare class MObject {
+    /**
+     * 所属活动
+     */
+    readonly activity: string;
+    /**
+     * 所属房间
+     */
+    readonly room: string;
+    /**
+     * 所属ID
+     */
+    readonly id: string;
+    private constructor();
+    static create({ room, id, activity }: Record<string, any>): MObject;
+    toString(): string;
+}
+export interface MonitorEventListener {
+    (evt: MonitorEventObject): void;
+}
+export type MonitorOptions = {
+    object: MObject;
+    type: MonitorType;
+    element: HTMLDivElement;
+    setup?: DefaultSetup;
+};
+/**
+ * 监视器
+ */
+export default class Monitor {
+    readonly options: MonitorOptions;
+    readonly no: string;
+    element: HTMLVideoElement;
+    readonly type: MonitorType;
+    readonly watcher: Watcher;
+    private eventPool;
+    constructor(options: MonitorOptions);
+    isPaused(): boolean;
+    shot(): Promise<any>;
+    /**
+     * 启动监控
+     */
+    start(): any;
+    /**
+     * 停止监控
+     */
+    stop(): any;
+    addEventListener(event: MonitorEvent, listener: MonitorEventListener): void;
+    protected dispatchEvent(event: MonitorEvent, data?: any, error?: any): void;
+    removeEventListener(event: MonitorEvent): void;
+}
+export {};

package/lib/Monitor.js

@@ -0,0 +1,129 @@
+import Driver from 'xdriver';
+class Watcher {
+    constructor(monitor) {
+        this.monitor = monitor;
+        this.name = monitor.type;
+        let driver = new Driver('x-monitor');
+        driver.initialize(() => {
+            driver.createTables(['desktop', 'camera'], {
+                primaryKey: 'id',
+                autoIncrement: true
+            });
+        }).open().then(() => {
+            console.debug('Shot');
+        });
+        this.driver = driver;
+    }
+    clean() {
+        return this.driver.drop();
+    }
+    shot(sharpness = 0.3) {
+        var _a;
+        if (sharpness > 1)
+            sharpness = 1;
+        if (sharpness < 0)
+            sharpness = 0.1;
+        let { videoWidth, videoHeight } = this.monitor.element;
+        let name = Date.now() + '.jpg';
+        let canvas = document.createElement("canvas");
+        canvas.width = videoWidth * sharpness;
+        canvas.height = videoHeight * sharpness;
+        canvas.getContext('2d').drawImage(this.monitor.element, 0, 0, videoWidth * sharpness, videoHeight * sharpness);
+        let img = { name };
+        Object.defineProperty(img, "blob", {
+            get() {
+                return new Promise((resolve) => {
+                    canvas.toBlob((blob) => {
+                        resolve(blob);
+                    }, this.type, sharpness);
+                });
+            }
+        });
+        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);
+    }
+    select() {
+        return this.driver.query(this.name);
+    }
+}
+export class NotSupportError extends Error {
+    constructor(message, code) {
+        super(message);
+        this.code = code;
+    }
+}
+export class ScreenTypeError extends Error {
+    constructor(message, code) {
+        super(message);
+        this.code = code;
+    }
+}
+export const MonitorEvents = ['cancel', 'start', 'playing', 'pause', 'shot', 'stop', 'error', 'changed'];
+export class MObject {
+    constructor(room, id, activity = 'default') {
+        this.activity = activity;
+        this.room = room;
+        this.id = id;
+    }
+    static create({ room, id, activity }) {
+        return new MObject(room, id, activity);
+    }
+    toString() {
+        return `${this.activity}-${this.room}-${this.id}`;
+    }
+}
+/**
+ * 监视器
+ */
+export default class Monitor {
+    constructor(options) {
+        this.eventPool = new Map();
+        this.options = options;
+        this.type = options.type;
+        this.no = `${options.object}`;
+        this.element = document.createElement('video');
+        this.watcher = new Watcher(this);
+    }
+    isPaused() {
+        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 => {
+            this.dispatchEvent('shot', img);
+            return img;
+        });
+    }
+    /**
+     * 启动监控
+     */
+    start() {
+    }
+    /**
+     * 停止监控
+     */
+    stop() {
+        this.dispatchEvent('stop');
+    }
+    addEventListener(event, listener) {
+        this.eventPool.set(event, listener);
+    }
+    dispatchEvent(event, data, error) {
+        let listener = this.eventPool.get(event);
+        if (listener) {
+            return listener({ event, target: this, data, error });
+        }
+        console.log(event, data, error);
+    }
+    removeEventListener(event) {
+        this.eventPool.delete(event);
+    }
+}

package/lib/index.d.ts

@@ -0,0 +1,47 @@
+import Monitor, { DefaultSetup, MObject, MonitorEvent, MonitorEventListener, MonitorType, Setup } from "./Monitor";
+export default class MonitorFactory {
+    /**
+     * 监控
+     */
+    static INSTANCE: MonitorFactory;
+    private readonly MonitorFactory;
+    private readonly pointer;
+    private readonly eventPool;
+    private intervalId;
+    constructor(pointer: MObject);
+    /**
+     * 添加事件监听
+     * 必须在start之前调用
+     * @param {MonitorEvent} event
+     * @param {Function} handler
+     */
+    on(event: MonitorEvent, handler: MonitorEventListener): this;
+    /**
+     * 初始化监视器
+     * @param {MonitorType} type 监视器类型
+     * @param {HTMLDivElement} element 视频所在div元素
+     * @param {any} setup 监视器相关的参数
+     */
+    init(type: MonitorType, element: HTMLDivElement, setup?: Setup): Monitor;
+    /**
+     * 启动所有监视器
+     */
+    start(interval?: number): Promise<void>;
+    /**
+     * 停用监视器
+     */
+    stop(): Promise<void>;
+}
+/**
+ * 初始化监控
+ */
+export declare function getInstance(options?: {
+    id: any;
+    room: any;
+    activity: any;
+    monitors: Array<{
+        type: MonitorType;
+        element: any;
+        setup?: DefaultSetup;
+    }>;
+}): MonitorFactory;

package/lib/index.js

@@ -0,0 +1,124 @@
+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";
+export default class MonitorFactory {
+    constructor(pointer) {
+        this.MonitorFactory = new Map();
+        this.eventPool = new Map();
+        this.intervalId = 0;
+        this.pointer = pointer;
+    }
+    /**
+     * 添加事件监听
+     * 必须在start之前调用
+     * @param {MonitorEvent} event
+     * @param {Function} handler
+     */
+    on(event, handler) {
+        this.eventPool.set(event, handler);
+        return this;
+    }
+    /**
+     * 初始化监视器
+     * @param {MonitorType} type 监视器类型
+     * @param {HTMLDivElement} element 视频所在div元素
+     * @param {any} setup 监视器相关的参数
+     */
+    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}`);
+        }
+        MonitorEvents.forEach((evt) => {
+            monitor.addEventListener(evt, event => {
+                var _a;
+                // 监视器截图
+                (_a = this.eventPool.get(evt)) === null || _a === void 0 ? void 0 : _a.call(monitor, event);
+            });
+        });
+        this.MonitorFactory.set(type, monitor);
+        return monitor;
+    }
+    /**
+     * 启动所有监视器
+     */
+    start() {
+        return __awaiter(this, arguments, void 0, function* (interval = 10000) {
+            if (interval < 5000) {
+                throw new Error('定时捕捉画面时间间隔不能少于5秒');
+            }
+            // 启动所有监视器
+            for (let [, monitor] of this.MonitorFactory) {
+                yield monitor.start();
+            }
+            clearInterval(this.intervalId);
+            // 启动timer定时截图
+            this.intervalId = setInterval(() => __awaiter(this, void 0, void 0, function* () {
+                try {
+                    // 调用所有监视器截图
+                    for (let [, monitor] of this.MonitorFactory) {
+                        if (monitor.isPaused())
+                            continue;
+                        yield monitor.shot();
+                    }
+                }
+                catch (e) {
+                    console.log(e);
+                }
+            }), interval);
+        });
+    }
+    /**
+     * 停用监视器
+     */
+    stop() {
+        return __awaiter(this, void 0, void 0, function* () {
+            clearInterval(this.intervalId);
+            // 启动所有监视器
+            for (let [, monitor] of this.MonitorFactory) {
+                yield monitor.stop();
+            }
+        });
+    }
+}
+/**
+ * 初始化监控
+ */
+export function getInstance(options) {
+    if (!MonitorFactory.INSTANCE) {
+        if (!options) {
+            throw new Error('实例尚未创建，参数不能为空');
+        }
+        let factory = new MonitorFactory(MObject.create(options));
+        const types = [];
+        for (let { element, type, setup } of options.monitors) {
+            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 MonitorFactory.INSTANCE;
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "sample-xmonitor-js",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./lib/index",
+  "files": [
+    "lib/"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "build:babel": "tsc && babel lib --out-dir dist && cd lib && del *.js*",
+    "build:webpack": "tsc &&  webpack --mode production"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@codeup.aliyun.com:60b0836844816b8ed2335ed6/ui-modules/xmonitor.git"
+  },
+  "keywords": [
+    "monitor"
+  ],
+  "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",
+    "babel-preset-stage-2": "^6.24.1",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "webpack": "^5.64.2",
+    "webpack-cli": "^4.9.1"
+  },
+  "dependencies": {
+    "xdriver": "^1.1.1"
+  }
+}