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 ([email protected]). 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.

Static Import

Pre-built files can be found in webvideocanvas.js and webvideocanvas.min.js

Build

Checkout CONTRIBUTING.md for details on building.

License

web-video-canvas is released with a BSD license. For full terms and conditions, see the LICENSE file.

Authors

See the AUTHORS.md file for a full list of contributors.