Camera Preview Web Component

This component opens the camera using getUserMedia. We can use third-party libraries to add extra frame analysing functions like barcode scanning to it.

Online demo which scans barcodes using Dynamsoft Barcode Reader.

Usage

In your HTML, add the component:

<camera-preview></camera-preview>

You can define the props and events like this:

const cameraElement = document.querySelector('camera-preview');
const onOpened = () => {
  console.log("opened");
}
const onClosed = () => {
  console.log("closed");
}
cameraElement.addEventListener("opened",onOpened);
cameraElement.addEventListener("closed",onClosed);
cameraElement.drawOverlay = true;
cameraElement.desiredCamera = "founder";
cameraElement.facingMode = "environment";
cameraElement.active = true;
cameraElement.desiredResolution = {width:1280,height:720};

You can get the inner video element using the getVideoElement method:

const video = await cameraElement.getVideoElement();

You can take a photo using the takePhoto method:

const blob = await cameraElement.takePhoto(true); //pass true to try to use the ImageCapture API if supported

You can learn more about the usage by checking out the demos.

Install this component

Script tag

• Put a script tag similar to this

  <script type="module">
    import { defineCustomElements } from 'https://cdn.jsdelivr.net/npm/camera-preview-component/dist/esm/loader.js';
    defineCustomElements();
  </script>

  in the head of your index.html

• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install camera-preview-component --save

• Put a script tag similar to this

  <script type="module">
    import { defineCustomElements } from 'node_modules/camera-preview-component/dist/esm/loader.js';
    defineCustomElements();
  </script>

  in the head of your index.html

• Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

• Run npm install camera-preview-component --save
• Add an import to the npm packages import camera-preview-component;
• Then you can use the element anywhere in your template, JSX, html etc

FAQ

How to specify which camera to use?

1. Use the desiredCamera prop. If one of the camera's name contains it, then it will be used. You can get the devices list using the getAllCameras method.
2. Use the facingMode prop. Set it to environment to use the back camera. Set it to user to use the front camera. Please note that this is not supported on Desktop.

You can use the two props together.