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

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>

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