Camera

This session introduces methods and events to control and interact with the camera of the device enabling users to take pictures. See the example below:

In this example, the camera is turned on and off according to the events show and hide of the modal. Refer to bootstrap documentation for more details about the modal plugin.

Source code
<div class="form-group">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-camera">
    <i class="fa fa-camera"></i> Take a picture
  </button>
</div>

<img id="snapshot-preview" src="unknown.png" class="img-thumbnail">

<div id="modal-camera" class="modal" tabindex="-1" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="fa fa-camera"></i> Camera
        </h5>
      </div>
      <div class="modal-body">
        <video id="camera" class="camera" data-size="320x240"></video>
      </div>
      <div class="modal-footer">
        <button id="button-snapshot" type="button" class="btn btn-info">Take a picture</button>
        <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Turn off</button>
      </div>
    </div>
  </div>
</div>
$('#modal-camera')
  .on('shown.bs.modal', function () {
    $('#camera').camera('play');
  })
  .on('hidden.bs.modal', function () {
    $('#camera').camera('stop');
  });

$('#button-snapshot').on('click', function () {
  $('#camera').camera('snapshot');
});

$('#camera').on('camera:snapshot', function (e, blob) {
  $('#snapshot-preview').attr('src', blob.dataURL);
  $('#modal-camera').modal('hide');
});
Browser compatibility

IE 11 and below currently does not support getUserMedia. However, there is some polyfills available that you can explore.

Options

Options can be passed via data attributes.

Options
OptionTypeDefaultDescription
data-sizestring320x240The size of the picture. Invalid size will be converted to default size.
Source code
<video class="camera" data-size="320x240"></video>

Methods

A few methods are available to control the camera.

Methods
MethodDescription
camera('play')Starts the camera. Triggers the event camera:play or camera:error.
camera('stop')Stop the camera. Triggers the event camera:stop.
camera('snapshot')Take a picture from the camera. Triggers the event camera:snapshot.
Source code
$('#myCamera').camera('start');
$('#myCamera').camera('stop');
$('#myCamera').camera('snapshot');

Events

Events triggered from the camera can be listened to write custom logic.

Events
EventDescription
camera:playTriggered after the camera starts to play.
camera:errorTriggered if any error occur during the start of the camera.
camera:notSupportedTriggered if the browser does not support camera.
camera:stopTriggered after the camera stop.
camera:snapshotTriggered after a picture is taken. Blob and data URL are ready.
Source code
$('#myCamera').on('camera:play', function (e) {
  console.log('Camera is playing.');
});

$('#myCamera').on('camera:error', function (e, error) {
  console.log('Could not start the camera: ' + error); // Original error from browser
});

$('#myCamera').on('camera:notSupported', function (e, error) {
  console.log('Camera not supported.');
});

$('#myCamera').on('camera:stop', function (e) {
  console.log('Camera is stopped.');
});

$('#myCamera').on('camera:snapshot', function (e, blob) {
  console.log('Base64 picture URL: ' + blob.dataURL);
});