Merge pull request #16 from Techming/develop

Added unmount method and update documentation

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 For change log from mjpegcanvas, please refer to: https://github.com/rctoris/mjpegcanvasjs/blob/develop/CHANGELOG.md
 
+For change log starting from version 0.1.6, please refer to the [release page](https://github.com/Techming/web-video-canvas/releases).
+
 2022-11-17 - **0.1.5**
 
 - Fix type declaration

README.md

@@ -1,12 +1,11 @@
-# web-video-canvas [![Build Status](https://img.shields.io/github/workflow/status/techming/web-video-canvas/CI)](https://github.com/Techming/web-video-canvas/actions) [![NPM Version](https://img.shields.io/npm/v/@techming/web-video-canvas)](https://www.npmjs.com/package/@techming/web-video-canvas) ![License](https://img.shields.io/npm/l/@techming/web-video-canvas)
+# web-video-canvas [![Build Status](https://img.shields.io/github/actions/workflow/status/techming/web-video-canvas/main.yml?branch=master)](https://github.com/Techming/web-video-canvas/actions) [![NPM Version](https://img.shields.io/npm/v/@techming/web-video-canvas)](https://www.npmjs.com/package/@techming/web-video-canvas) ![License](https://img.shields.io/npm/l/@techming/web-video-canvas)
 
 **Display a Video Stream from the ROS web_video_server Inside of a HTML5 Canvas**
 
 This repo is a fork from and developed based on [mjpegcanvas](https://github.com/rctoris/mjpegcanvasjs) by [Russell Toris](https://github.com/rctoris) ([email protected]). Thanks for all the previous effort.
 
-JSDoc can be found in [here](https://techming.github.io/web-video-canvas). 
 
-For full documentation, see [the ROS wiki](https://wiki.ros.org/web_video_canvas).
+For full documentation, see [the ROS wiki](https://wiki.ros.org/web_video_canvas). JSDoc can be found [here](https://techming.github.io/web-video-canvas/).
 
 ## Usage
 
@@ -35,6 +34,10 @@ const viewer = new Viewer({
 });
 ```
 
+- To close HTTP connection and clear any timer used internally before unmount the viewer object, you can call `viewer.unmount()` method.
+- `canvas` parameter in the construtor can be used to pass a canvas element to draw the video feed on.
+- For other parameters usage, please refer to the [JSDoc](https://techming.github.io/web-video-canvas/).
+
 ### Static Import
 
 Pre-built files can be found in [webvideocanvas.js](build/webvideocanvas.js) and [webvideocanvas.min.js](build/webvideocanvas.min.js)

build/webvideocanvas.js

@@ -2714,7 +2714,7 @@ class Viewer extends (eventemitter2_default()) {
     this.changeStream(this.topic);
 
     // call draw with the given interval or rate
-    setInterval(this.draw.bind(this), drawInterval);
+    this.timer = setInterval(this.draw.bind(this), drawInterval);
   }
 
   /**
@@ -2776,6 +2776,14 @@ class Viewer extends (eventemitter2_default()) {
     // emit an event for the change
     this.emit('change', topic);
   }
+
+  /**
+   * Remove interval and image src to close HTTP connection.
+   */
+  unmount() {
+    clearInterval(this.timer);
+    this.image.src = '';
+  }
 }
 /* harmony default export */ const visualization_Viewer = (Viewer);
 ;// CONCATENATED MODULE: ./src/visualization/models/Button.js

package.json

@@ -2,7 +2,7 @@
   "name": "@techming/web-video-canvas",
   "homepage": "http://robotwebtools.org",
   "description": "Display a Video Stream from the ROS web_video_server Inside of a HTML5 Canvas",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "license": "BSD-3-Clause",
   "repository": "https://github.com/Techming/web-video-canvas",
   "bugs": {

src/visualization/Viewer.js

@@ -71,7 +71,7 @@ class Viewer extends EventEmitter2 {
     this.changeStream(this.topic);
 
     // call draw with the given interval or rate
-    setInterval(this.draw.bind(this), drawInterval);
+    this.timer = setInterval(this.draw.bind(this), drawInterval);
   }
 
   /**
@@ -141,6 +141,14 @@ class Viewer extends EventEmitter2 {
     // emit an event for the change
     this.emit('change', topic);
   }
+
+  /**
+   * Remove interval and image src to close HTTP connection.
+   */
+  unmount() {
+    clearInterval(this.timer);
+    this.image.src = '';
+  }
 }
 
 export default Viewer;