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="icon-camera"></i> Take a picture

<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="icon-camera"></i> Camera
      <div class="modal-body">
        <video id="camera" class="camera" data-size="320x240"></video>
      <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>
  .on('', function () {
  .on('', function () {

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

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

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


Options can be passed via data attributes:

data-sizestring320x240The size of the picture. Invalid size will be converted to default size.
Source code


A few methods are available to control the camera:

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


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

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