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

<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 -> Starts recording the video stream.
• stopRecording(): Promise -> Stops recording the video stream and returns the recorded video as a Base64 string.
• startTimedRecording(seconds: number): Promise -> 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 -> Captures a snapshot from the video stream and returns it as a Base64-encoded image.

Example Usage

<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:

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