sample-xmonitor-js 1.0.9 → 1.0.12

package/lib/Monitor.d.ts

@@ -90,7 +90,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;

package/lib/Monitor.js

@@ -22,12 +22,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() {
@@ -100,7 +110,7 @@ export default class Monitor {
         this.watcher = new Watcher(this);
     }
     isPaused() {
-        return this.element.paused;
+        return this.element instanceof HTMLVideoElement && this.element.paused;
     }
     shot() {
         return this.watcher.shot(this.options.setup?.sharpness).then(img => {

package/lib/txrtc/index.js

@@ -42,9 +42,9 @@ export default class TxrtcMonitor extends Monitor {
         }).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,6 +53,9 @@ export default class TxrtcMonitor extends Monitor {
                 this.dispatchEvent('playing');
             }
             this.element = this.options.element.querySelector('video');
+            if (!this.element) {
+                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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-xmonitor-js",
-  "version": "1.0.9",
+  "version": "1.0.12",
   "description": "",
   "main": "./lib/index",
   "files": [