npm package: @jaak.ai/video-camera
Description: This a web component for video camera component
Latest version: 1.3.1

# video-camera Component

This component provides an interface for accessing the user's webcam and displaying the video stream in a `<video>` element. It also allows pausing, resuming, and stopping the video stream, as well as accessing the video stream object and camera object.

## Properties

| Property          | Type     | Description                                           |
|-------------------|----------|-------------------------------------------------------|
| `config`          | Object   | Configuration for the video camera component.         |
| `config.width`    | string   | Width of the video element. Default: '100%'.          |
| `config.height`   | string   | Height of the video element. Default: 'auto'.         |
| `config.enableMicrophone` | boolean | Indicates whether the microphone should be enabled along with the camera. Default: false. |
| `config.showMessages` | boolean | Indicates whether error messages should be shown. Default: false. |
| `config.messageDetail` | string | Details of the error message.                        |

## Events

- `streamStatus`: Fired when the video stream status changes.
- `componentError`: Fired when an error occurs in the component.

## Methods

- `pauseStream()`: Pauses the video stream.
- `resumeStream()`: Resumes the video stream.
- `stopStream()`: Stops the video stream.
- `getVideoStream()`: Returns the video element if camera access permission has been granted.
- `getStream()`: Returns the video stream.

## Usage Example

```html

<video-camera
  config={{
    width: '640px',
    height: '480px',
    enableMicrophone: true,
    showMessages: true,
    messageDetail: 'Error accessing the camera',
  }}
  onStreamStatus={(event) => handleStreamStatus(event.detail)}
  onComponentError={(event) => handleComponentError(event.detail)}
></video-camera>

```
# video-camera-recorder Component

This component extends the functionality of the `video-camera` component by adding recording capabilities. It allows users to start, stop, and pause video recording, as well as capture snapshots from the video stream.

## Properties

| Property          | Type                         | Description                                           |
|-------------------|------------------------------|-------------------------------------------------------|
| `config`          | `VideoCameraConfig` (optional) | Configuration for the video camera recorder component. See below for details. |

### VideoCameraConfig

| Property              | Type      | Description                                           |
|-----------------------|-----------|-------------------------------------------------------|
| `width`               | `string`  | Width of the video element. Default: '100%'.          |
| `height`              | `string`  | Height of the video element. Default: 'auto'.         |
| `enableMicrophone`    | `boolean` | Indicates whether the microphone should be enabled along with the camera. Default: `false`. |
| `showMessages`        | `boolean` | Indicates whether error messages should be shown. Default: `false`. |
| `messageDetail`       | `string`  | Details of the error message.                         |
| `cameraSource`       | ` user ` or ` environment `   | Soruce of the camera, as frontal face camera or default camera.                         |
| `videoFormat`       | ` string ` | Type of media file format                         |
| `video`       | ` MediaTrackConstraints ` | Use this property to set video constrains on record.         |
| `validateCamera`       | ` boolean ` | Use this property to authenticate cameras(reject virtual cameras).         |


## Events

- `streamStatus`: Fired when the video stream status changes.
- `componentError`: Fired when an error occurs in the component.

## Methods

- `startRecording()`: Promise<void> -> Starts recording the video stream.
- `stopRecording()`: Promise<string> -> Stops recording the video stream and returns the recorded video as a Base64 string.
- `startTimedRecording(seconds: number)`: Promise<string> -> Starts recording the video stream for a specified duration in seconds and returns the recorded video as a Base64 string.
- `resumeStream()`: Resumes the video stream playback.
- `pauseStream()`: Pauses the video stream playback.
- `stopStream()`: Stops the video stream playback.
- `takeSnapshot()`: Promise<string> -> Captures a snapshot from the video stream and returns it as a Base64-encoded image.

## Example Usage

```html

<video-camera-recorder
  config={{
    width: '640px',
    height: '480px',
    enableMicrophone: true,
    showMessages: true,
    messageDetail: 'Error accessing the camera',
  }}
  onStreamStatus={(event) => handleStreamStatus(event.detail)}
  onComponentError={(event) => handleComponentError(event.detail)}
></video-camera-recorder>

```
# Services

The component provides tools to complement its use in different needs.

## Spoofing Detector Service
 When you instantiate this class `SpoofingDetectorService` as a service, it allows you to access methods to control and manage the camera authentication system.

### Methods

- `authenticateVideoStream(stream: MediaStream)`: Determines the veracity and validity of the camera
- `getVideoDevices()`: Returns the list of available video devices
- ` getStreamDeviceInfo(stream: MediaStream)`: Returns device information(MediaDeviceInfo) from the played video stream
- `checkCamerasInWhiteList(device: MediaDeviceInfo)`: Returns whether a device is whitelisted.
- `checkCamerasInBlackList(device: MediaDeviceInfo)`: Returns whether a device is blacklisted.

- `addCameraToWhiteList(deviceName: string, type: 'desktop' | 'mobile')`: Add an item to the whitelist of supported devices

- `addCameraToBlackList(deviceName: string)`: Add an item to the blacklist of supported devices

- `removeCameraFromWhiteList(element: string, type: 'desktop' | 'mobile')`: Removes a device name from the whitelist of supported devices

- `removeCameraFromBlackList(element: string)`: Removes a device name from the blacklist of supported devices




# Error interface

When the component fails, it throws an error with next interface details:

```html
interface webComponentError {
  label: string;
  code?: string;
  details?: any;
}

````

This component is owned by JAAK and is their intellectual property. Visit more details in https://jaak.ai