@potch/camera

a getUserMedia powered camera helper class

npm install @potch/camera

Camera Class

new Camera(options)

creates new Camera object.

options is an object with the following properties:

name | required? | type | default | description ---|---|---|---|--- selfie | no | Boolean | false | should the helper attempt to open the front-facing camera of the device first, if available? shape | no | String | auto | shape to crop images to. Accepts auto, 4:3, 3:4, and square constraints | no | Object | {} | additional constraints to request from the system when getting access to the camera.

Properties

.preview

The element that provides the camera viewfinder preview.

  let c = new Camera();
  document.body.appendChild(c.preview);

.selfie

Whether the camera preview is of the front-facing camera (true if it is). Read-only.

To change which camera is being previewed, use flip()

.paused

true/false Whether the camera preview is paused. Read-only.

Use pause() and resume() to change the preview status.

Methods

These are the intended public methods of the class. Other methods are available, but are subject to change.

init()

Starts the camera. Needs to be called in response to user action (like a click event) to avoid being blocked by the browser.

snap()

Returns a <canvas> containing the current frame as a still image.

flip()

Switches between the rear-facing and front-facing camera, if available.

Note: it's not possible to detect which cameras are available. If only one camera is available, flip will have no effect.

pause()

Pause the live camera preview.

resume()

Resume the live camera preview.

stop()

Pause the preview and fully close the getUserMedia session.