MJPEG/JPEG client for JavaScript

Client to provide authenticated MJPEG/JPEG streams and snapshot.

The <img> tag are unable to do authentication (e.g. http://user:pass@ip:port/path.mjpg) due to browser limitations.

Inspired by this project we improve JPEG client,allowing authenticated MJPEG streams and enabling continuous frame request, emulating stream playback for cameras that only have snapshot feature.

How to use

Add the mjpeg.js script to your HTML page:

<script src="mjpeg.js"></script>

Create the player and set connection parameters/events as needed:

var player = new MJPEG.Player("player", "http://<address>:<port>/<path>", "<username>", "<password>", {onError:  onErr, onStart: onStarted, onStop: onStopped, onFrame: onFrame, onLoad: onLoad});

Parameters available:

1. container element
2. URL
3. Username (optional)
4. Password (optional)
5. Options

• Timeout (in ms)
• Refresh Rate
• Events (see below)

Methods

• start()
• stop()
• snapshot()

start()

Start sequential capture, if the content is a static JPEG image, or perform authentication and play MJPEG stream:

var player = new MJPEG.Player("player", "http://<address>:<port>/<path>", "<username>", "<password>", {onStart: onStarted});
player.start();

stop()

Stop sequential capture or abort current connection:

var player = new MJPEG.Player("player", "http://<address>:<port>/<path>", "<username>", "<password>", {onStop: onStopped});
player.stop();

snapshot()

Take snapshot (unavailable for MJPEG streams):

var player = new MJPEG.Player("player", "http://<address>:<port>/<path>", "<username>", "<password>", {onError:  onErr, onStart: onStarted, onStop: onStopped});
player.snapshot();

Events

Events are assigned at object creation:

• onStart
• onStop
• onError(status code, payload)
  • status code: Response / arbitrary status codes;
  • payload: Displays detailed error message.
• onFrame
  • raw frame: Raw blob data.
• onLoad
  • event: Triggered by <img> onload.

function onErr(status, payload) {
  console.error(status);
  console.error(payload);

  player.stop();
}

function onStarted() {
  console.log('Started');
}

function onStopped() {
  console.warn('Stopped');
}

function onFrame(frame) {
  console.log('New frame',frame);
}

function onLoad(e) {
  e.preventDefault();
  e.stopPropagation();

  console.log('Image loaded',e);

  if (e.target instanceof Image) e.target.onload = undefined;
}