## 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](https://singular-madeleine-557145.netlify.app/) using [Dynamsoft Barcode Reader](https://www.dynamsoft.com/barcode-reader/overview/).
### Usage
In your HTML, add the component:
```html
```
You can define the props and events like this:
```js
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:
```js
const video = await cameraElement.getVideoElement();
```
You can take a photo using the `takePhoto` method:
```js
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](https://github.com/xulihang/camera-preview-demo).
## Install this component
### Script tag
- Put a script tag similar to this
```html
```
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
```html
```
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.