ngx-cam-shoot

An angular component to use you device's cameras easily. Obtain and save images faster. Thought to use on mobile devices.

Features

• UI friendly and easily to use
• FaceMode interactive (change from front to back)
• Can use Flashlight feature (If the current camera device support)
• Can use Zoom feature
• Preview of image captured
• Interface color configurable
• Can select the camera device you want to use

Prerequisites

• Angular: >=18.2.0

Important: To use in localhost, you must be serve on https context for modern browsers to permit WebRTC/UserMedia access.

Usage

1. Install via npm

npm i ngx-cam-shoot

2. Import

You can import the Component in your module

import { NgxCamShoot } from 'ngx-cam-shoot';

@NgModule({
  imports: [
    NgxCamShoot,
    ...
  ],
  ...
})

Or directly on the component where you want to use using standalone feature

import { NgxCamShoot } from 'ngx-cam-shoot';

@Component({
  standalone: true,
  imports: [
    NgxCamShoot,
    ...
  ]
  ...
})
,

3. Add the ngx-cam-shoot tag element on your Html component and bind it, you can trigger the cam shoot using the initCapture() method

<ngx-cam-shoot #cam (sendImage)="receiveCapture($event)"/>
<button (click)="cam.initCapture()">Take capture</button>

4. To start capture from ts, you first need reference the element and after you can trigger the cam shoot using the initCapture() on your own method

@ViewChild('cam') camShoot!: NgxCamShoot;

openCam(){
    this.camShoot.initCapture();
}

5. You can gets the image as Data URI string putting your receiver method on (sendImage) output event

<ngx-cam-shoot #cam (sendImage)="receiveCapture($event)"/>

Configuration

Inputs You can config the next features

• [config] (ICamShootConfig): obect to set default config (*).
• (*)[canChangeMode] (boolean): show change mode button (default = true);
• (*)[type] (eCamShootType): set the custom camera mode (default = eCamShootType.DEFAULT);
• (*)[color] (string): Any CSS color format RGB/Hex color for skin (default = '#282828');
• (*)[displayTitle] (boolean): show title bar (default = true);
• (*)[title] (string): title description (default = 'Capture image');
• (*)[showFaceMode] (boolean): show face mode icon on title bar (default = false);
• [usePreview] (boolean): active capture preview mode (default = true);
• [showErrors] (boolean): show error on camera (default = false);
• [debugMode] (boolean): active debug mode (default = false);
• (*)[btnTakeAnother] (string): text on button to take another capture (default = 'Take another');
• (*)[btnAcceptCapture] (string): text on button to accept capture (default = 'Accept capture');

(*) These inputs are included in [config] (ICamShootConfig) input.

Output You need config the output image

• (sendImage) (EventEmitter<string>): Get the image as Data URI string;