@techming/web-video-canvas NPM

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 by Russell Toris (russell.toris@gmail.com). Thanks for all the previous effort.

For full documentation, see the ROS wiki. JSDoc can be found here.

Usage

npm

It is recommended that you import this package via npm or yarn. Simply run

npm install @techming/web-video-canvas // or
yarn add @techming/web-video-canvas

Once you installed the package, you can import the View or MultiStreamViewer in your file:

import { View } from '@techming/web-video-canvas';

const viewer = new Viewer({
  divID: 'mjpeg',
  host: 'localhost',
  port: '8080', // web_video_server default port
  width: 640,
  height: 480,
  topic: '/usb_cam_node/image_raw',
  type: 'png', // you can change to mjpeg, png, or ros_compressed
});

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.