Display a Video Stream from 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.

JSDoc can be found at https://techming.github.io/web-video-canvas



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

Static Import

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

Source Code

Source code is available at https://github.com/Techming/web-video-canvas. Pull requests should be made to the develop branch.


Please send bug reports to the GitHub Issue Tracker.

Wiki: web_video_canvas (last edited 2022-11-22 23:40:31 by hmeng29)