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.
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. |
-
streamStatus
: Fired when the video stream status changes. -
componentError
: Fired when an error occurs in the component.
-
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.
<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>
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.
Property | Type | Description |
---|---|---|
config |
VideoCameraConfig (optional) |
Configuration for the video camera recorder component. See below for details. |
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. |
-
streamStatus
: Fired when the video stream status changes. -
componentError
: Fired when an error occurs in the component.
-
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.
<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>
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