@jaak.ai/video-camera

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