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

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