sample-xmonitor-js 1.0.10 → 2.0.0

package/lib/Monitor.d.ts

@@ -1,3 +1,11 @@
+export declare const logger: {
+    trace: boolean;
+    debug(msg: string, ...args: any[]): void;
+    warn(msg: string, ...args: any[]): void;
+    info(msg: string, ...args: any[]): void;
+    error(msg: string, ...args: any[]): void;
+    success(msg: string, ...args: any[]): void;
+};
 export declare interface Setup {
     /**
      *控制视频截图清晰度
@@ -34,6 +42,10 @@ export declare class ScreenTypeError extends Error {
     readonly code: string;
     constructor(message: any, code?: any);
 }
+export declare class NetworkError extends Error {
+    readonly code: string;
+    constructor(message: any, code?: any);
+}
 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';
@@ -52,8 +64,9 @@ export declare class MonitorType {
  * stop 录制停止
  * error 发生错误
  * changed 状态改变
+ * statistics 通话质量统计
  */
-export type MonitorEvent = 'cancel' | 'start' | 'playing' | 'pause' | 'shot' | 'stop' | 'error' | 'changed' | 'message';
+export type MonitorEvent = 'cancel' | 'start' | 'playing' | 'pause' | 'shot' | 'stop' | 'error' | 'changed' | 'message' | 'statistics';
 export declare const MonitorEvents: Array<MonitorEvent>;
 export type MonitorEventObject = {
     event: MonitorEvent;
@@ -90,7 +103,7 @@ export type MonitorOptions = {
 export default class Monitor {
     readonly options: MonitorOptions;
     readonly no: string;
-    element: HTMLVideoElement;
+    element: HTMLVideoElement | HTMLCanvasElement;
     readonly type: MonitorType;
     readonly watcher: Watcher;
     private eventPool;
@@ -115,4 +128,14 @@ export default class Monitor {
     }): Promise<void>;
     removeEventListener(event: MonitorEvent): void;
 }
+/**
+ * @returns 频次控制函数
+ * @param handle
+ * @param timeWindow
+ * @param threshold
+ */
+export declare function createFrequencyController<T extends any[]>(handle: (...args: T) => void, timeWindow?: number, threshold?: number): {
+    (...args: T): void;
+    reset(): void;
+};
 export {};

package/lib/Monitor.js

@@ -1,4 +1,33 @@
 import Driver from 'xdriver';
+function print(fn, ...args) {
+    if (logger.trace) {
+        console.trace(...args);
+        return;
+    }
+    fn(...args);
+}
+function getFormatDate() {
+    const date = new Date();
+    return `[${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}.${date.getMilliseconds()}] xmonitor`;
+}
+export const logger = {
+    trace: false,
+    debug(msg, ...args) {
+        print(console.debug, `%c${getFormatDate()} 🐞 ${msg}`, "color: gray;", ...args);
+    },
+    warn(msg, ...args) {
+        print(console.warn, `%c${getFormatDate()} 🔔 ${msg}`, "color: #FFCC00;", ...args);
+    },
+    info(msg, ...args) {
+        print(console.info, `${getFormatDate()} ℹ️ ${msg}`, ...args);
+    },
+    error(msg, ...args) {
+        print(console.error, `%c${getFormatDate()} ❌ ${msg}`, "color: #EF4444;", ...args);
+    },
+    success(msg, ...args) {
+        print(console.log, `%c${getFormatDate()} ✅ ${msg}`, "color: #10B981;", ...args);
+    }
+};
 class Watcher {
     constructor(monitor) {
         this.monitor = monitor;
@@ -10,7 +39,7 @@ class Watcher {
                 autoIncrement: true
             });
         }).open().then(() => {
-            console.debug('Shot');
+            logger.debug('Shot');
         });
         this.driver = driver;
     }
@@ -22,12 +51,22 @@ class Watcher {
             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);
+        if (this.monitor.element instanceof HTMLVideoElement) {
+            let { videoWidth, videoHeight } = this.monitor.element;
+            canvas.width = videoWidth * sharpness;
+            canvas.height = videoHeight * sharpness;
+            // @ts-ignore
+            canvas.getContext('2d').drawImage(this.monitor.element, 0, 0, canvas.width, canvas.height);
+        }
+        else if (this.monitor.element instanceof HTMLCanvasElement) {
+            let sourceCanvas = this.monitor.element;
+            canvas.width = sourceCanvas.width * sharpness;
+            canvas.height = sourceCanvas.height * sharpness;
+            // @ts-ignore
+            canvas.getContext('2d').drawImage(sourceCanvas, 0, 0, canvas.width, canvas.height);
+        }
         let img = { name };
         Object.defineProperty(img, "blob", {
             get() {
@@ -61,6 +100,12 @@ export class ScreenTypeError extends Error {
         this.code = code;
     }
 }
+export class NetworkError extends Error {
+    constructor(message, code) {
+        super(message);
+        this.code = code;
+    }
+}
 export class MonitorType {
     constructor(provider, device) {
         this.provider = provider;
@@ -74,7 +119,7 @@ export class MonitorType {
         return new MonitorType(type, device);
     }
 }
-export const MonitorEvents = ['cancel', 'start', 'playing', 'pause', 'shot', 'stop', 'error', 'changed', 'message'];
+export const MonitorEvents = ['cancel', 'start', 'playing', 'pause', 'shot', 'stop', 'error', 'changed', 'message', 'statistics'];
 export class MObject {
     constructor(room, id) {
         this.room = room;
@@ -130,7 +175,7 @@ export default class Monitor {
         if (listener) {
             return listener({ event, target: this, data, error });
         }
-        console.log(event, data, error);
+        logger.debug(event, data, error);
     }
     async switch(option) {
         throw new NotSupportError('不支持设备切换');
@@ -139,3 +184,47 @@ export default class Monitor {
         this.eventPool.delete(event);
     }
 }
+/**
+ * @returns 频次控制函数
+ * @param handle
+ * @param timeWindow
+ * @param threshold
+ */
+export function createFrequencyController(handle, timeWindow = 10000, threshold = 3) {
+    // 初始化状态：调用次数、首次调用时间
+    let callCount = 0;
+    let firstCallTime = null;
+    /**
+     * 频次控制的核心函数
+     * @param args 透传给触发回调的参数
+     */
+    const frequencyController = (...args) => {
+        const now = Date.now();
+        // 1. 检查是否超出时间窗口，超出则重置状态
+        if (firstCallTime && now - firstCallTime > timeWindow) {
+            callCount = 0;
+            firstCallTime = null;
+        }
+        // 2. 首次调用时记录时间
+        if (firstCallTime === null) {
+            firstCallTime = now;
+        }
+        // 3. 累加调用次数
+        callCount += 1;
+        // 4. 判断是否达到触发条件（次数 > 阈值）
+        if (callCount > threshold) {
+            handle(...args);
+            // 可选：触发后重置状态（避免同一窗口内多次触发），根据需求可注释
+            callCount = 0;
+            firstCallTime = null;
+        }
+    };
+    /**
+     * 手动重置状态（可选扩展）
+     */
+    frequencyController.reset = () => {
+        callCount = 0;
+        firstCallTime = null;
+    };
+    return frequencyController;
+}

package/lib/index.d.ts

@@ -1,6 +1,7 @@
-import Monitor, { DeviceProvider, MObject, MonitorEvent, MonitorEventListener, MonitorType, Setup } from "./Monitor";
+import Monitor, { DeviceProvider, logger, MObject, MonitorEvent, MonitorEventListener, MonitorType, Setup } from "./Monitor";
 import { DefaultSetup } from "./default";
 import { TxrtcSetup } from "./txrtc";
+import { LOG_LEVEL, PermissionOption } from "trtc-sdk-v5";
 export default class MonitorFactory {
     private readonly monitorMap;
     private readonly pointer;
@@ -58,4 +59,89 @@ export declare function getSpeakerList(requestPermission?: boolean): Promise<Med
 export declare function setCurrentSpeaker(speakerId: string): Promise<void>;
 export declare function getMicrophoneList(requestPermission?: boolean): Promise<MediaDeviceInfo[]>;
 export declare function getCameraList(requestPermission?: boolean): Promise<MediaDeviceInfo[]>;
-export declare function isSupported(): Promise<any>;
+export declare function isSupported(): Promise<CheckSystemResult>;
+export declare function getPermissions(option: PermissionOption): Promise<import("trtc-sdk-v5").PermissionResult>;
+export declare function setLog(level: LOG_LEVEL, enableUploadLog?: boolean): void;
+/**
+ * 系统能力检测结果的顶层接口
+ */
+interface CheckSystemResult {
+    /**
+     * 综合检测结果
+     * @type {boolean}
+     * @description 如果为 true，表示当前浏览器环境满足 SDK 运行的最低要求；
+     *              如果为 false，则意味着当前浏览器无法正常使用该 SDK 的核心功能。
+     */
+    result: boolean;
+    /**
+     * 详细的子项检测详情
+     * @type {CheckSystemDetail}
+     */
+    detail: CheckSystemDetail;
+}
+/**
+ * 浏览器各项具体能力的详细检测结果
+ */
+interface CheckSystemDetail {
+    /**
+     * 浏览器支持度
+     * @type {boolean}
+     * @description 检测当前浏览器（及其版本）是否在 SDK 支持的列表中（例如是否为太旧的 IE 浏览器）。
+     */
+    isBrowserSupported: boolean;
+    /**
+     * WebRTC 核心支持
+     * @type {boolean}
+     * @description 检测浏览器是否原生支持 WebRTC 标准 API，这是音视频通话的基础。
+     */
+    isWebRTCSupported: boolean;
+    /**
+     * WebCodecs 支持
+     * @type {boolean}
+     * @description 检测是否支持 WebCodecs API，这通常用于更底层的音视频数据处理和高性能编解码。
+     */
+    isWebCodecsSupported: boolean;
+    /**
+     * 媒体设备访问支持
+     * @type {boolean}
+     * @description 检测是否支持通过 `navigator.mediaDevices` 获取摄像头和麦克风列表及音视频流。
+     */
+    isMediaDevicesSupported: boolean;
+    /**
+     * 屏幕共享支持
+     * @type {boolean}
+     * @description 检测当前浏览器是否支持屏幕共享功能（通常需要检测 `getDisplayMedia` API）。
+     */
+    isScreenShareSupported: boolean;
+    /**
+     * 小流支持
+     * @type {boolean}
+     * @description 通常指是否支持发送低分辨率、低码率的视频流（用于低性能设备或弱网环境）。
+     */
+    isSmallStreamSupported: boolean;
+    /**
+     * H264 上行编码支持
+     * @type {boolean}
+     * @description 检测摄像头采集的视频是否能使用 H264 编码格式推送到服务器。
+     */
+    isH264EncodeSupported: boolean;
+    /**
+     * H264 下行解码支持
+     * @type {boolean}
+     * @description 检测浏览器是否能解码服务器下发的 H264 格式的视频流。
+     */
+    isH264DecodeSupported: boolean;
+    /**
+     * VP8 上行编码支持
+     * @type {boolean}
+     * @description 检测摄像头采集的视频是否能使用 VP8 编码格式推送到服务器。
+     */
+    isVp8EncodeSupported: boolean;
+    /**
+     * VP8 下行解码支持
+     * @type {boolean}
+     * @description 检测浏览器是否能解码服务器下发的 VP8 格式的视频流。
+     */
+    isVp8DecodeSupported: boolean;
+}
+export { logger };

package/lib/index.js

@@ -1,4 +1,4 @@
-import { MObject, MonitorEvents, MonitorType, NotSupportError } from "./Monitor";
+import { logger, MObject, MonitorEvents, MonitorType, NotSupportError } from "./Monitor";
 import DefaultMonitor from "./default";
 import TxrtcMonitor from "./txrtc";
 import TRTC from "trtc-sdk-v5";
@@ -65,7 +65,7 @@ export default class MonitorFactory {
         }
         clearInterval(this.intervalId);
         // 启动timer定时截图
-        console.log(`开启定时截图，时间间隔${interval}ms`);
+        logger.info(`开启定时截图，时间间隔${interval}ms`);
         this.intervalId = setInterval(async () => {
             try {
                 // 调用所有监视器截图
@@ -76,15 +76,15 @@ export default class MonitorFactory {
                 }
             }
             catch (e) {
-                console.log(e);
+                logger.error('监视器启动出错', e);
             }
         }, interval);
         // 启动所有监视器
         for (let monitor of this.monitorMap.values()) {
-            console.log(`启动监视器 >>> ${monitor.type.toString()}`);
+            logger.info(`启动监视器 >>> ${monitor.type.toString()}`);
             monitor.start();
         }
-        console.log('所有监视器启动完成');
+        logger.info('所有监视器启动完成');
     }
     /**
      * 停用监视器
@@ -117,7 +117,7 @@ export function getInstance(options) {
             }
             return factory.init(MonitorType.parse(provider), element, setup);
         })).then((monitors) => {
-            console.log(monitors);
+            logger.info('监视器启动完成', monitors);
         });
     }
     return factory;
@@ -143,3 +143,10 @@ export function getCameraList(requestPermission) {
 export function isSupported() {
     return TRTC.isSupported();
 }
+export function getPermissions(option) {
+    return TRTC.getPermissions(option);
+}
+export function setLog(level, enableUploadLog) {
+    TRTC.setLogLevel(level, enableUploadLog);
+}
+export { logger };

package/lib/txrtc/index.d.ts

@@ -1,5 +1,6 @@
 import Monitor, { Device, MObject, MonitorOptions, Setup } from "../Monitor";
 import TRTC, { LocalVideoConfig, ScreenShareConfig } from "trtc-sdk-v5";
+import { WatermarkOptions } from 'trtc-sdk-v5/plugins/video-effect/watermark';
 export interface TxrtcSetup extends Setup {
     userId: string;
     roomId: string;
@@ -7,6 +8,26 @@ export interface TxrtcSetup extends Setup {
     userSig: string;
     userDefineRecordId?: string;
     option?: LocalVideoConfig['option'] | ScreenShareConfig['option'];
+    /**
+     * trtc-sdk-v5/assets 目录放到cdn上 某些插件会依赖静态资源
+     * eg: 'https://xxxx/assets'
+     */
+    assetsPath?: string;
+    deviceDetector?: boolean;
+    /**
+     * 开启人脸检测
+     */
+    faceDetection?: {
+        onFaceDetectionStateChanged: (hasFace: boolean) => void;
+        detectionInterval?: number;
+        minConfidence?: number;
+        missingTimeout?: number;
+    };
+    /**
+     * 开启水印
+     * 设置水平图片路径
+     */
+    watermark?: WatermarkOptions;
 }
 export default class TxrtcMonitor extends Monitor {
     private active;

package/lib/txrtc/index.js

@@ -1,19 +1,48 @@
-import Monitor, { MonitorType, NotSupportError, ScreenTypeError } from "../Monitor";
-import TRTC, { LOG_LEVEL } from "trtc-sdk-v5";
+import Monitor, { createFrequencyController, logger, MonitorType, NetworkError, NotSupportError, ScreenTypeError } from "../Monitor";
+import TRTC from "trtc-sdk-v5";
 import { CDNStreaming, PublishMode } from 'trtc-sdk-v5/plugins/cdn-streaming';
+import { FaceDetection } from 'trtc-sdk-v5/plugins/video-effect/face-detection';
+import { Watermark } from 'trtc-sdk-v5/plugins/video-effect/watermark';
+import { DeviceDetector } from 'trtc-sdk-v5/plugins/device-detector';
 export default class TxrtcMonitor extends Monitor {
     constructor(options) {
         super(options);
         this.active = false;
         this.setup = options.setup;
-        this.trtc = TRTC.create({ plugins: [CDNStreaming] });
+        const trtcOptions = {
+            plugins: [CDNStreaming, DeviceDetector]
+        };
+        if (this.setup?.deviceDetector) {
+            trtcOptions.plugins?.push(DeviceDetector);
+        }
+        if (this.setup?.faceDetection) {
+            if (!this.setup.assetsPath) {
+                throw new Error('Please set setup.assetsPath');
+            }
+            trtcOptions.assetsPath = this.setup.assetsPath;
+            trtcOptions.plugins?.push(FaceDetection);
+        }
+        if (this.setup?.watermark) {
+            trtcOptions.plugins?.push(Watermark);
+        }
+        this.trtc = TRTC.create(trtcOptions);
         if (this.setup.debug) {
-            TRTC.setLogLevel(LOG_LEVEL.DEBUG);
+            TRTC.setLogLevel(1 /* LOG_LEVEL.DEBUG */);
         }
     }
     async start() {
+        if (this.setup?.deviceDetector) {
+            const options = {
+                networkDetect: { sdkAppId: this.setup.sdkAppId, userId: this.setup.userId, userSig: this.setup.userSig }
+            };
+            // @ts-ignore
+            const resultWithNetwork = await this.trtc.startPlugin('DeviceDetector', options);
+            if (resultWithNetwork) {
+                logger.info('DeviceDetector >>> ', resultWithNetwork);
+            }
+        }
         let streamId = `${this.setup.roomId}_${this.setup.userId}`;
-        console.debug(`Start ${this.type.device} TxrtcMonitor with streamId ${streamId}`);
+        logger.info(`Start ${this.type.device} TxrtcMonitor with streamId ${streamId}`);
         if (this.active)
             return;
         let publishMode = PublishMode.PublishMainStreamToCDN;
@@ -32,19 +61,32 @@ export default class TxrtcMonitor extends Monitor {
         if (this.setup.userDefineRecordId) {
             params.userDefineRecordId = this.setup.userDefineRecordId;
         }
+        // 尝试重连 10s 内超过5次重连之后抛出异常
+        const triggerNetworkDisconnect = createFrequencyController(() => {
+            const error = new NetworkError('Network disconnected', 'NetworkDisconnected');
+            logger.error('Network Error', error);
+            this.dispatchEvent('error', null, error);
+            this.stop();
+        });
         this.trtc.on(TRTC.EVENT.ERROR, (error) => {
             let err = error;
             if (this.options.type.device === 'screen') {
                 err = new ScreenTypeError(error.message, 'ScreenTypeError');
             }
+            else if (error.code === TRTC.ERROR_CODE.OPERATION_FAILED && error.extraCode === 5501) {
+                // 用户网络防火墙受限，会导致无法正常进行音视频通话。
+                // 此时引导用户更换网络 or 检查网络防火墙设置。
+                err = new NetworkError(error.message, 'FirewallRestriction');
+            }
+            logger.error('TRTCError', err);
             this.dispatchEvent('error', null, err);
             this.stop();
         }).on(TRTC.EVENT.SCREEN_SHARE_STOPPED, () => {
             this.dispatchEvent('cancel');
             this.stop();
-        }).on(TRTC.EVENT.TRACK, () => {
+        }).on(TRTC.EVENT.TRACK, (data) => {
             this.active = true;
-            this.dispatchEvent('start');
+            this.dispatchEvent('start', data);
         }).on(TRTC.EVENT.VIDEO_PLAY_STATE_CHANGED, ({ state }) => {
             if (state === 'STOPPED') {
                 this.dispatchEvent('stop');
@@ -53,10 +95,34 @@ export default class TxrtcMonitor extends Monitor {
                 this.dispatchEvent('playing');
             }
             this.element = this.options.element.querySelector('video');
+            if (!this.element) {
+                // 移动端使用的是canvas显示
+                this.element = this.options.element.querySelector('canvas');
+            }
         }).on(TRTC.EVENT.CUSTOM_MESSAGE, (message) => {
             let decoder = new TextDecoder('utf-8');
             let payload = decoder.decode(message.data);
             this.dispatchEvent('message', payload);
+        }).on(TRTC.EVENT.STATISTICS, statistics => {
+            logger.debug('TxrtcMonitor statistics', statistics);
+            this.dispatchEvent('statistics', statistics);
+        }).on(TRTC.EVENT.SEI_MESSAGE, event => {
+            this.dispatchEvent('message', event);
+        }).on(TRTC.EVENT.PUBLISH_STATE_CHANGED, event => {
+            if (event.error) {
+                logger.error('TxrtcMonitor publish error', event);
+                this.dispatchEvent('error', event, event.error);
+                this.stop();
+            }
+        }).on(TRTC.EVENT.CONNECTION_STATE_CHANGED, event => {
+            if (event.state === 'CONNECTING' && event.prevState === 'DISCONNECTED' && event.isReconnecting) {
+                // 尝试重连 10次之后抛出异常
+                triggerNetworkDisconnect();
+            }
+        }).on(TRTC.EVENT.NETWORK_QUALITY, event => {
+            logger.info(`[network-quality] uplinkNetworkQuality:${event.uplinkNetworkQuality}, downlinkNetworkQuality: ${event.downlinkNetworkQuality}`);
+            logger.info(`[network-quality] uplink rtt:${event.uplinkRTT} loss:${event.uplinkLoss}`);
+            logger.info(`[network-quality] downlink rtt:${event.downlinkRTT} loss:${event.downlinkLoss}`);
         });
         await this.trtc.enterRoom(params);
     }
@@ -134,6 +200,15 @@ export class TxrtcCameraMonitor extends TxrtcMonitor {
                 publish: true,
                 view: this.options.element
             });
+            // 检测人脸 需要在调用本地摄像头之后启动该插件
+            if (this.setup.faceDetection) {
+                // @ts-ignore
+                await this.trtc.startPlugin('FaceDetection', this.setup.faceDetection);
+            }
+            // 开启水印
+            if (this.setup?.watermark) {
+                await this.trtc.startPlugin('Watermark', this.setup?.watermark);
+            }
         }
         catch (e) {
             this.dispatchEvent('error', null, e);
@@ -153,6 +228,15 @@ export class TxrtcCameraMonitor extends TxrtcMonitor {
         }
     }
     async stop() {
+        // 如果启动了人脸检测插件 则停止
+        if (this.setup.faceDetection) {
+            // @ts-ignore
+            await this.trtc.stopPlugin('FaceDetection');
+        }
+        // 如果开启了水印
+        if (this.setup?.watermark) {
+            await this.trtc.stopPlugin('Watermark');
+        }
         await this.trtc.stopLocalAudio();
         await this.trtc.stopLocalVideo();
         await super.stop();

package/package.json

@@ -1,36 +1,36 @@
-{
-  "name": "sample-xmonitor-js",
-  "version": "1.0.10",
-  "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": {
-    "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": {
-    "trtc-sdk-v5": "^5.8.6",
-    "xdriver": "^1.1.1"
-  }
-}
+{
+  "name": "sample-xmonitor-js",
+  "version": "2.0.0",
+  "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": {
+    "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": {
+    "trtc-sdk-v5": "^5.15.1",
+    "xdriver": "^1.1.1"
+  }
+}