Skip to content

Latest commit

 

History

History
217 lines (158 loc) · 4.17 KB

camera.md

File metadata and controls

217 lines (158 loc) · 4.17 KB

Camera Plugin

The camera plugin allows to capture images with your computer webcam or phone camera. Works only on the browsers that support the Stream Api.

Basic Usage

HTML:

<!-- Camera button -->
<button type="button" class="camera-show">Camera</button>

<!-- Camera container -->
<div class="camera-container" style="display: none;">
    <div class="camera-preview"></div>
    <button type="button" class="camera-hide">Cancel</button>
    <button type="button" class="camera-capture">Take picture</button>
</div>

JavaScript:

<script src="assets/js/filepicker-camera.js"></script>

$('#filepicker').filePicker({
    // options...
    plugins: ['camera'], // <=
    camera: {
        showBtn: $('.camera-show'),
        container: $('.camera-container'),
    }
});

Bootstrap Modal

Requires Bootstrap.

HTML:

<!-- Camera button -->
<button type="button" class="btn btn-info camera-show">Camera</button>

<!-- Camera Modal -->
<div id="camera-modal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" data-dismiss="modal">&times;</span>
                <h4 class="modal-title">Take a picture</h4>
            </div>
            <div class="modal-body">
                <div class="camera-preview"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left camera-hide" 
                    data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success camera-capture">Take picture</button>
            </div>
        </div>
    </div>
</div>

JavaScript:

<script src="assets/js/filepicker-camera.js"></script>

$('#filepicker').filePicker({
    // options...
    plugins: ['camera'], // <=
});

Options

The camera plugin options must be passed inside the camera object:

$('#filepicker').filePicker({
    // options...
    camera: {
        flipHorizontal: false,
        // more camera options
    }
}
});

container

The jQuery object for the camera container or Bootstrap modal.

  • Type: jQuery Object
  • Default: $('#camera-modal')

preview

The jQuery object for the camera preview.

  • Type: jQuery Object
  • Default: container.find('.camera-preview')

showBtn

The jQuery object for the button that shows the camera container / modal.

  • Type: jQuery Object
  • Default: element.find('.camera-show')

hideBtn

The jQuery object for the button that hides the camera container / modal.

  • Type: jQuery Object
  • Default: container.find('.camera-hide')

captureBtn

The jQuery object for the button that captures the image.

  • Type: jQuery Object
  • Default: container.find('.camera-capture')

constraints

The getUserMedia video constraints.

  • Type: Object
  • Default: {}

flipHorizontal

Whether to flip the camera horizontal.

  • Type: Boolean
  • Default: true

selectors

An object of selectors.

  • Type: Object
  • Default:
{
    show: '.camera-show',
    hide: '.camera-hide',
    container: '#camera-modal',
    capture: '.camera-capture',
    preview: '.camera-preview'
}

Handlers

camerafallback

The camera fallback handler.


/**
 * @param {Object} e
 * @param {String} message
 */
camerafallback: function (e, message) { }

cameracapture

The camera capture handler.

/**
 * @param {Object} e
 * @param {Object} data
 */
cameracapture: function (e, data) { }

camerasuccess

The camera success handler.

/**
 * @param {Object} e
 * @param {MediaStream} stream
 */
camerasuccess: function (e, stream) { }

cameraerror

The camera error handler.

/**
 * @param {Object} e
 * @param {Object} error
 */
cameraerror: function (e, error) { }