JPEG client for JavaScript

Client to get sequential images from URL and take snapshots with auth basic support.

Using the standard tag, we are unable to include authentication (e.g. http://user:pass@ip:port/path), if necessary, due to browser limitations.

To solve this problem we adapted this client, enabling continuous frame request, emulating stream playback for cameras that only have snapshot feature.

For MJPEG streams

New features and bugfixes will be available here, which also supports MJPEG streams.

How to use

Add the jpeg.js script to your HTML page:

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

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

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

Parameters available:

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

• Image class
• Image alternative text
• Image title
• Timeout (in ms)
• Refresh Rate
• Events (see below)

Methods

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

start()

Start sequential capture:

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

stop()

Stop sequential capture or abort current connection:

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

snapshot()

Take snapshot:

var player = new JPEG.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(JSON)
  • JSON: Displays the returned status code and request body text.
• onFrame
• event: Event triggered by onload.

function onErr(text) {
  console.error(text);
  player.stop();
}

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

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

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

  console.log('New frame',e);
}