Merge pull request #10 from apivideo/destroy-method

feat: add destroy() method

Author: olivier-lando

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 All changes to this project will be documented in this file.
 
+## [0.1.7] - 2022-09-29
+- add destroy() method
+- automatically remove expired drawing from drawings array
+
 ## [0.1.6] - 2022-09-16
 - Fix screencast stream size ratio issue
 

README.md

@@ -44,6 +44,7 @@
     - [`setDrawingSettings(settings: Partial<DrawingSettings>): void`](#setdrawingsettingssettings-partialdrawingsettings-void)
     - [`clearDrawing(): void`](#cleardrawing-void)
     - [`addEventListener(event: string, listener: Function)`](#addeventlistenerevent-string-listener-function)
+    - [`destroy()`](#destroy)
 - [Full examples](#full-examples)
   - ["Loom-like"](#loom-like)
 
@@ -486,7 +487,9 @@ Define an event listener for the media recorder. The following events are availa
     });
 ```
 
+### `destroy()`
 
+Destroys all streams and releases all resources in use.
 
 # Full examples 
 

dist/index.js

@@ -72,8 +72,11 @@ export declare class MediaStreamComposer {
     private drawingSettings;
     private drawings;
     private lastStreamId;
+    private drawingsCleanerInterval?;
     constructor(options: Partial<Options>);
     startRecording(options: RecordingOptions): void;
+    destroy(): void;
+    private destroyIfNeeded;
     addEventListener(type: EventType, callback: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions | undefined): void;
     stopRecording(): Promise<VideoUploadResponse>;
     updateStream(streamId: string, options: StreamOptions): void;

dist/src/index.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "@api.video/media-stream-composer",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "api.video media stream composer",
   "repository": {
     "type": "git",

package-lock.json

@@ -103,6 +103,7 @@ export class MediaStreamComposer {
     }
     private drawings: ({ coords: [number, number][], startTime: number, } & DrawingSettings)[] = [];
     private lastStreamId = 0;
+    private drawingsCleanerInterval?: any;
 
     constructor(options: Partial<Options>) {
         this.eventTarget = new EventTarget();
@@ -131,6 +132,26 @@ export class MediaStreamComposer {
         this.recorder.start();
     }
 
+    public destroy() {
+        Object.keys(this.streams).forEach(streamId => this.removeStream(streamId));
+        Object.keys(this.audioSources).forEach(streamId => this.removeStream(streamId));
+        this.merger?.removeStream("drawing");
+        this.clearDrawing();
+        this.merger?.destroy();
+        if (this.drawingsCleanerInterval) {
+            clearInterval(this.drawingsCleanerInterval);
+            this.drawingsCleanerInterval = undefined;
+        }
+        this.canvas?.parentElement?.removeChild(this.canvas);
+        this.merger = undefined;
+    }
+
+    private destroyIfNeeded() {
+        if (this.drawings.length === 0 && Object.keys(this.audioSources).length === 0 && Object.keys(this.streams).length === 0) {
+            this.destroy();
+        }
+    }
+
     public addEventListener(type: EventType, callback: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions | undefined): void {
         this.eventTarget.addEventListener(type, callback, options);
     }
@@ -181,6 +202,7 @@ export class MediaStreamComposer {
         if (stream) {
             this.merger?.removeStream(stream.stream);
             delete this.streams[id];
+            stream.stream.getTracks().forEach(x => x.stop());
         }
         this.cleanIndexes();
     }
@@ -210,6 +232,7 @@ export class MediaStreamComposer {
         if (audioSource) {
             this.merger?.removeStream(audioSource.stream);
             delete this.audioSources[id];
+            audioSource.stream.getTracks().forEach(x => x.stop());
         }
     }
 
@@ -653,6 +676,14 @@ export class MediaStreamComposer {
             this.result = this.merger.result;
             this.createDrawingStream(this.merger);
 
+            const d = this;
+
+            this.drawingsCleanerInterval = setInterval(() => {
+                const currentTime = new Date().getTime();
+                d.drawings = d.drawings.filter((drawing) => drawing.autoEraseDelay === 0 || (currentTime - drawing.startTime) / 1000 <= drawing.autoEraseDelay);
+                d.destroyIfNeeded();
+            }, 1000);
+
             const mouseEventListener = new MouseEventListener(this.canvas!, this.streams);
             mouseEventListener.onClick((e) => e.stream?.options.onClick && e.stream.options.onClick(e.stream.id, { x: e.x, y: e.y }));
             mouseEventListener.onDrag((e) => this.onMouseDrag(e));