getUserMedia powered camera helper class

Usage no npm install needed!

<script type="module">
  import potchCamera from 'https://cdn.skypack.dev/@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.



The element that provides the camera viewfinder preview.

  let c = new Camera();


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()


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

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


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


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


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


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 the live camera preview.


Resume the live camera preview.


Pause the preview and fully close the getUserMedia session.