<capture-photo>

A custom element that implements the MediaDevices.getUserMedia() method of the MediaDevices interface to capture a photo in the browser.

API documentation • Demo

Install

$ npm install --save @georapbox/capture-photo-element

Usage

Script

import { CapturePhoto } from './node_modules/@georapbox/capture-photo-element/dist/capture-photo.js';

// Manually define the element.
CapturePhoto.defineCustomElement();

Alternatively, you can import the automatically defined custom element.

import './node_modules/@georapbox/capture-photo-element/dist/capture-photo-defined.js';

Markup

<capture-photo facing-mode="environment" camera-resolution="320x240"></capture-photo>

Style

By default, the component is style-free to remain as less opinionated as possible. However, you can style the various elements of the component using the ::part() CSS pseudo-elements provided for this purpose. Below are demonstrated all available parts for styling.

capture-photo::part(video) {
  /* The video element */
}

capture-photo::part(actions-container) {
  /* Actions container element - where actions buttons are placed */
}

capture-photo::part(capture-button) {
  /* The button responsible to take picture */
}

capture-photo::part(facing-mode-button) {
  /* The button responsible to change camera's facing mode */
}

capture-photo::part(output-container) {
  /* Output container - where the final output photo is placed */  
}

capture-photo::part(output-image) {
  /* The generated photo */
}

API

Properties

1 Changing any of these properties/attributes may not always guarantee the desired result, because they all depend on the camera hardware support. For example, zoom=3 might not result to the camera to zoom if the camera hardware does not support zooming. Using getTrackCapabilities() and getTrackSettings() can prove helpful to check the campera hardware support.

Slots

Slots usage examples

Override the default buttons with your own elements

<capture-photo>
  <button slot="capture-button" type="button">
    Take picture
  </button>
  
  <a slot="facing-mode-button" href="#" role="button">
    Change camera
  </a>
</capture-photo>

Override just the content of the default buttons

<capture-photo>
  <span slot="capture-button-content">Take picture</span>
  <span slot="facing-mode-button-content">Change camera</span>
</capture-photo>

CSS Parts

Methods

1 Instance methods are only available after the component has been defined. To ensure the component is defined, you can use whenDefined method of the CustomElementRegistry interface, eg customElements.whenDefined('capture-photo').then(() => { /* call methods here */ });

Events

Changelog

For API updates and breaking changes, check the CHANGELOG.

Development setup

Prerequisites

The project requires Node.js and npm to be installed on your environment. Preferrably, use nvm Node Version Manager and use the version of Node.js specified in the .nvmrc file by running nvm use.

Install dependencies

Install the project dependencies by running the following command.

npm install

Build for development

Watch for changes and start a development server by running the following command.

npm start

Linting

Lint the code by running the following command.

npm run lint

Testing

Run the tests by running any of the following commands.

npm test
npm run test:watch # watch mode

Build for production

Create a production build by running the following command.

npm run build

License

The MIT License (MIT)