Pose Capture

A set of components to perform live pose capture, recording,
and visualization on humans

API

<undefined>

Properties

NameAttributeDescriptionTypeDefault
canRecord
_playbackRateplayback ratenumber
playbackRate
_isLoopingis video looping?boolean
isLooping
_srccurrent video sourcestring | undefined
srcstring | undefined
_isPlayingis video playing?booleanfalse
isPlaying
_isRecordingis recording?booleanfalse
isRecording
_isAudioRecordingis audio recording?booleanfalse
isAudioRecording
_currentTimecurrent playback timenumber0
currentTime
_durationvideo durationnumber0
duration
_recordingDurationrecording durationnumber-1
recordingDuration
widthwidth of componentnumber
heightheight of componentnumber
aspectRatioaspect ratio of video
videoBoundsBounds
naturalSizeget video element's natural size
visibleMediaRectvisible area bounding boxBounds{ x: 0, y: 0, width: 0, height: 0 }

Methods

NameParametersDescriptionReturn
pause
play
togglePlayback
step
NameDescriptionType
_framenumber
seekTo
NameDescriptionType
_msnumber
changePlaybackRate
NameDescriptionType
_ratenumber
updateControls
handleControlsEvent
NameDescriptionType
ePlaybackEvent
formatTime
NameDescriptionType
msnumber | undefined

Events

NameDescription

<bodypix-video>

Attributes

NameDescriptionTypeDefault
minconfidence
usecamera
src
islooping
playbackrate

Properties

NameAttributeDescriptionTypeDefault
poseType
partsstring[]
_keyframesKeyframe[][]
_minConfidence
hasStartedbooleanfalse
audioRecorderMediaRecorder | undefined
audioDatastring | undefined
forceOneTimePoseProcessbooleanfalse
recordingStartTimenumber | undefined
recordedAudioBlob | undefined
keyframes
minConfidence
recordingPoseRecording
videoElvideo elementHTMLVideoElementthis.shadowRoot?.querySelector('video')
streamvideo streamMediaStream | undefined
timertimer for driving playback statusnumber | undefined
isComponentMountedif component is mountedbooleanfalse
videoElementget access to video element
canRecord
_useCamerause cameraboolean
useCamera
naturalSizeget video element's natural size
aspectRatioaspect ratio of video
_isPlayingis video playing?booleanfalse
onloadedmetadata
onloadeddata
onpause
onended
onplaying
_playbackRateplayback ratenumber
playbackRate
_isLoopingis video looping?boolean
isLooping
_srccurrent video sourcestring | undefined
srcstring | undefined
isPlaying
_isRecordingis recording?booleanfalse
isRecording
_isAudioRecordingis audio recording?booleanfalse
isAudioRecording
_currentTimecurrent playback timenumber0
currentTime
_durationvideo durationnumber0
duration
_recordingDurationrecording durationnumber-1
recordingDuration
widthwidth of componentnumber
heightheight of componentnumber
videoBoundsBounds
visibleMediaRectvisible area bounding boxBounds{ x: 0, y: 0, width: 0, height: 0 }

Methods

NameParametersDescriptionReturn
onMetadata
poseDetectionFrame
step
NameDescriptionType
framesnumber
onPoseFrame
NameDescriptionType
keyframesKeyframe[]
onTimerUpdate
startRecording
NameDescriptionType
includeAudio
stopRecording
onEnded
handleControlsEvent
NameDescriptionType
ePlaybackEvent
pause
play
togglePlayback
seekTo
NameDescriptionType
valnumber
changePlaybackRate
NameDescriptionType
ratenumber
loadCurrentSource
resizeupdate canvas dimensions when resized
updateControls
formatTime
NameDescriptionType
msnumber | undefined

Events

NameDescription

<facelandmark-video>

Attributes

NameDescriptionTypeDefault
minconfidence
usecamera
src
islooping
playbackrate

Properties

NameAttributeDescriptionTypeDefault
poseType
partsstring[]
_keyframesKeyframe[][]
_minConfidence
hasStartedbooleanfalse
audioRecorderMediaRecorder | undefined
audioDatastring | undefined
forceOneTimePoseProcessbooleanfalse
recordingStartTimenumber | undefined
recordedAudioBlob | undefined
keyframes
minConfidence
recordingPoseRecording
videoElvideo elementHTMLVideoElementthis.shadowRoot?.querySelector('video')
streamvideo streamMediaStream | undefined
timertimer for driving playback statusnumber | undefined
isComponentMountedif component is mountedbooleanfalse
videoElementget access to video element
canRecord
_useCamerause cameraboolean
useCamera
naturalSizeget video element's natural size
aspectRatioaspect ratio of video
_isPlayingis video playing?booleanfalse
onloadedmetadata
onloadeddata
onpause
onended
onplaying
_playbackRateplayback ratenumber
playbackRate
_isLoopingis video looping?boolean
isLooping
_srccurrent video sourcestring | undefined
srcstring | undefined
isPlaying
_isRecordingis recording?booleanfalse
isRecording
_isAudioRecordingis audio recording?booleanfalse
isAudioRecording
_currentTimecurrent playback timenumber0
currentTime
_durationvideo durationnumber0
duration
_recordingDurationrecording durationnumber-1
recordingDuration
widthwidth of componentnumber
heightheight of componentnumber
videoBoundsBounds
visibleMediaRectvisible area bounding boxBounds{ x: 0, y: 0, width: 0, height: 0 }

Methods

NameParametersDescriptionReturn
onMetadata
poseDetectionFrame
step
NameDescriptionType
framesnumber
onPoseFrame
NameDescriptionType
keyframesKeyframe[]
onTimerUpdate
startRecording
NameDescriptionType
includeAudio
stopRecording
onEnded
handleControlsEvent
NameDescriptionType
ePlaybackEvent
pause
play
togglePlayback
seekTo
NameDescriptionType
valnumber
changePlaybackRate
NameDescriptionType
ratenumber
loadCurrentSource
resizeupdate canvas dimensions when resized
updateControls
formatTime
NameDescriptionType
msnumber | undefined

Events

NameDescription

<handpose-video>

Attributes

NameDescriptionTypeDefault
minconfidence
usecamera
src
islooping
playbackrate

Properties

NameAttributeDescriptionTypeDefault
poseType
partsstring[]
_keyframesKeyframe[][]
_minConfidence
hasStartedbooleanfalse
audioRecorderMediaRecorder | undefined
audioDatastring | undefined
forceOneTimePoseProcessbooleanfalse
recordingStartTimenumber | undefined
recordedAudioBlob | undefined
keyframes
minConfidence
recordingPoseRecording
videoElvideo elementHTMLVideoElementthis.shadowRoot?.querySelector('video')
streamvideo streamMediaStream | undefined
timertimer for driving playback statusnumber | undefined
isComponentMountedif component is mountedbooleanfalse
videoElementget access to video element
canRecord
_useCamerause cameraboolean
useCamera
naturalSizeget video element's natural size
aspectRatioaspect ratio of video
_isPlayingis video playing?booleanfalse
onloadedmetadata
onloadeddata
onpause
onended
onplaying
_playbackRateplayback ratenumber
playbackRate
_isLoopingis video looping?boolean
isLooping
_srccurrent video sourcestring | undefined
srcstring | undefined
isPlaying
_isRecordingis recording?booleanfalse
isRecording
_isAudioRecordingis audio recording?booleanfalse
isAudioRecording
_currentTimecurrent playback timenumber0
currentTime
_durationvideo durationnumber0
duration
_recordingDurationrecording durationnumber-1
recordingDuration
widthwidth of componentnumber
heightheight of componentnumber
videoBoundsBounds
visibleMediaRectvisible area bounding boxBounds{ x: 0, y: 0, width: 0, height: 0 }

Methods

NameParametersDescriptionReturn
onMetadata
poseDetectionFrame
step
NameDescriptionType
framesnumber
onPoseFrame
NameDescriptionType
keyframesKeyframe[]
onTimerUpdate
startRecording
NameDescriptionType
includeAudio
stopRecording
onEnded
handleControlsEvent
NameDescriptionType
ePlaybackEvent
pause
play
togglePlayback
seekTo
NameDescriptionType
valnumber
changePlaybackRate
NameDescriptionType
ratenumber
loadCurrentSource
resizeupdate canvas dimensions when resized
updateControls
formatTime
NameDescriptionType
msnumber | undefined

Events

NameDescription

<pose-player>

Attributes

NameDescriptionTypeDefault
islooping
src

Properties

NameAttributeDescriptionTypeDefault
playStartTimenumber0
currentKeyframenumber0
keyframesKeyframe[][]
audioHTMLAudioElement | undefined
timertimer for driving playback statusnumber | undefined
recording
_currentTimecurrent playback timenumber0
currentTime
canRecord
_playbackRateplayback ratenumber
playbackRate
_isLoopingis video looping?boolean
isLooping
_srccurrent video sourcestring | undefined
srcstring | undefined
_isPlayingis video playing?booleanfalse
isPlaying
_isRecordingis recording?booleanfalse
isRecording
_isAudioRecordingis audio recording?booleanfalse
isAudioRecording
_durationvideo durationnumber0
duration
_recordingDurationrecording durationnumber-1
recordingDuration
widthwidth of componentnumber
heightheight of componentnumber
aspectRatioaspect ratio of video
videoBoundsBounds
naturalSizeget video element's natural size
visibleMediaRectvisible area bounding boxBounds{ x: 0, y: 0, width: 0, height: 0 }

Methods

NameParametersDescriptionReturn
loadPoseData
NameDescriptionType
uristring
togglePlayback
step
NameDescriptionType
framenumber
pause
play
renderFrame
renderPose
findNearestKeyframe
NameDescriptionType
timenumber
keyframesKeyframe[]
_rangenumber[]
number
onEnded
seekTo
NameDescriptionType
_msnumber
changePlaybackRate
NameDescriptionType
_ratenumber
updateControls
handleControlsEvent
NameDescriptionType
ePlaybackEvent
formatTime
NameDescriptionType
msnumber | undefined

Events

NameDescription

<posedetection-video>

Attributes

NameDescriptionTypeDefault
minconfidence
usecamera
src
islooping
playbackrate

Properties

NameAttributeDescriptionTypeDefault
poseType
partsstring[]
_keyframesKeyframe[][]
_minConfidence
hasStartedbooleanfalse
audioRecorderMediaRecorder | undefined
audioDatastring | undefined
forceOneTimePoseProcessbooleanfalse
recordingStartTimenumber | undefined
recordedAudioBlob | undefined
keyframes
minConfidence
recordingPoseRecording
videoElvideo elementHTMLVideoElementthis.shadowRoot?.querySelector('video')
streamvideo streamMediaStream | undefined
timertimer for driving playback statusnumber | undefined
isComponentMountedif component is mountedbooleanfalse
videoElementget access to video element
canRecord
_useCamerause cameraboolean
useCamera
naturalSizeget video element's natural size
aspectRatioaspect ratio of video
_isPlayingis video playing?booleanfalse
onloadedmetadata
onloadeddata
onpause
onended
onplaying
_playbackRateplayback ratenumber
playbackRate
_isLoopingis video looping?boolean
isLooping
_srccurrent video sourcestring | undefined
srcstring | undefined
isPlaying
_isRecordingis recording?booleanfalse
isRecording
_isAudioRecordingis audio recording?booleanfalse
isAudioRecording
_currentTimecurrent playback timenumber0
currentTime
_durationvideo durationnumber0
duration
_recordingDurationrecording durationnumber-1
recordingDuration
widthwidth of componentnumber
heightheight of componentnumber
videoBoundsBounds
visibleMediaRectvisible area bounding boxBounds{ x: 0, y: 0, width: 0, height: 0 }

Methods

NameParametersDescriptionReturn
onMetadata
poseDetectionFrame
step
NameDescriptionType
framesnumber
onPoseFrame
NameDescriptionType
keyframesKeyframe[]
onTimerUpdate
startRecording
NameDescriptionType
includeAudio
stopRecording
onEnded
handleControlsEvent
NameDescriptionType
ePlaybackEvent
pause
play
togglePlayback
seekTo
NameDescriptionType
valnumber
changePlaybackRate
NameDescriptionType
ratenumber
loadCurrentSource
resizeupdate canvas dimensions when resized
updateControls
formatTime
NameDescriptionType
msnumber | undefined

Events

NameDescription

<video-element>

Attributes

NameDescriptionTypeDefault
usecamera
src
islooping
playbackrate

Properties

NameAttributeDescriptionTypeDefault
videoElvideo elementHTMLVideoElementthis.shadowRoot?.querySelector('video')
streamvideo streamMediaStream | undefined
timertimer for driving playback statusnumber | undefined
isComponentMountedif component is mountedbooleanfalse
videoElementget access to video element
canRecord
_useCamerause cameraboolean
useCamera
naturalSizeget video element's natural size
aspectRatioaspect ratio of video
_isPlayingis video playing?booleanfalse
onloadedmetadata
onloadeddata
onpause
onended
onplaying
_playbackRateplayback ratenumber
playbackRate
_isLoopingis video looping?boolean
isLooping
_srccurrent video sourcestring | undefined
srcstring | undefined
isPlaying
_isRecordingis recording?booleanfalse
isRecording
_isAudioRecordingis audio recording?booleanfalse
isAudioRecording
_currentTimecurrent playback timenumber0
currentTime
_durationvideo durationnumber0
duration
_recordingDurationrecording durationnumber-1
recordingDuration
widthwidth of componentnumber
heightheight of componentnumber
videoBoundsBounds
visibleMediaRectvisible area bounding boxBounds{ x: 0, y: 0, width: 0, height: 0 }

Methods

NameParametersDescriptionReturn
onTimerUpdate
pause
play
togglePlayback
step
NameDescriptionType
framesnumber
seekTo
NameDescriptionType
valnumber
changePlaybackRate
NameDescriptionType
ratenumber
onEnded
onMetadata
loadCurrentSource
resizeupdate canvas dimensions when resized
updateControls
handleControlsEvent
NameDescriptionType
ePlaybackEvent
formatTime
NameDescriptionType
msnumber | undefined

Events

NameDescription

<videopose-element>

Attributes

NameDescriptionTypeDefault
minconfidence
usecamera
src
islooping
playbackrate

Properties

NameAttributeDescriptionTypeDefault
poseType
partsstring[]
_keyframesKeyframe[][]
_minConfidence
hasStartedbooleanfalse
audioRecorderMediaRecorder | undefined
audioDatastring | undefined
forceOneTimePoseProcessbooleanfalse
recordingStartTimenumber | undefined
recordedAudioBlob | undefined
keyframes
minConfidence
recordingPoseRecording
videoElvideo elementHTMLVideoElementthis.shadowRoot?.querySelector('video')
streamvideo streamMediaStream | undefined
timertimer for driving playback statusnumber | undefined
isComponentMountedif component is mountedbooleanfalse
videoElementget access to video element
canRecord
_useCamerause cameraboolean
useCamera
naturalSizeget video element's natural size
aspectRatioaspect ratio of video
_isPlayingis video playing?booleanfalse
onloadedmetadata
onloadeddata
onpause
onended
onplaying
_playbackRateplayback ratenumber
playbackRate
_isLoopingis video looping?boolean
isLooping
_srccurrent video sourcestring | undefined
srcstring | undefined
isPlaying
_isRecordingis recording?booleanfalse
isRecording
_isAudioRecordingis audio recording?booleanfalse
isAudioRecording
_currentTimecurrent playback timenumber0
currentTime
_durationvideo durationnumber0
duration
_recordingDurationrecording durationnumber-1
recordingDuration
widthwidth of componentnumber
heightheight of componentnumber
videoBoundsBounds
visibleMediaRectvisible area bounding boxBounds{ x: 0, y: 0, width: 0, height: 0 }

Methods

NameParametersDescriptionReturn
step
NameDescriptionType
framesnumber
onPoseFrame
NameDescriptionType
keyframesKeyframe[]
onTimerUpdate
startRecording
NameDescriptionType
includeAudio
stopRecording
onEnded
handleControlsEvent
NameDescriptionType
ePlaybackEvent
pause
play
togglePlayback
seekTo
NameDescriptionType
valnumber
changePlaybackRate
NameDescriptionType
ratenumber
onMetadata
loadCurrentSource
resizeupdate canvas dimensions when resized
updateControls
formatTime
NameDescriptionType
msnumber | undefined

Events

NameDescription

<visualization-canvas>

Attributes

NameDescriptionTypeDefault
dotsize
dotcolor
dotbackcolor

Properties

NameAttributeDescriptionTypeDefault
dotSizedot size in pixelsnumber2
dotColordot colorstring'#ff0000'
dotBackColordot back color (if depth is provided, gradiate between the primary dot color in the forefront and this back color at the farthest awaystring | undefined
canvasHTMLCanvasElement | null | undefined
canvasContextCanvasRenderingContext2D | null | undefined
offsetXnumber0
offsetYnumber0

Methods

NameParametersDescriptionReturn
clear
resize
draw
NameDescriptionType
framesKeyframe[]
boundsBounds
drawPoints
NameDescriptionType
coordnumber[]
drawGriddebug method in case point positions need to be scrutinized
AdjustColorBrightness
NameDescriptionType
colstring
amtnumber
InterpolateColor
NameDescriptionType
c0string
c1string
fnumber

<pose-button>

Properties

NameAttributeDescriptionTypeDefault
disabledboolean

<pose-button>

Attributes

NameDescriptionTypeDefault
disabledbooleanfalse

Properties

NameAttributeDescriptionTypeDefault
disableddisabledbooleanfalse

<pose-play-button>

Attributes

NameDescriptionTypeDefault
disabledbooleanfalse

Properties

NameAttributeDescriptionTypeDefault
playingboolean
disableddisabledbooleanfalse

<pose-play-button>

Attributes

NameDescriptionTypeDefault
playingbooleanfalse
disabledbooleanfalse

Properties

NameAttributeDescriptionTypeDefault
playingplayingbooleanfalse
disableddisabledbooleanfalse

<pose-playback-controls>

Properties

NameAttributeDescriptionTypeDefault
currentTimenumber
durationnumber
isPlayingboolean
isLoopingboolean
isRecordingboolean
isAudioRecordingboolean
recordingDurationnumber
playbackRatenumber
canRecordboolean

Methods

NameParametersDescriptionReturn
doAction
NameDescriptionType
actionstring
void
renderNonLiveModeimport("lit-html").TemplateResult<1>
renderLiveModeimport("lit-html").TemplateResult<1> | undefined
renderRecordingControlsimport("lit-html").TemplateResult<1> | undefined

<pose-playback-controls>

Attributes

NameDescriptionTypeDefault
currentTimenumber0
durationnumber0
isPlayingbooleanfalse
isLoopingbooleanfalse
isRecordingbooleanfalse
isAudioRecordingbooleanfalse
recordingDurationnumber-1
playbackRatenumber1
canRecordbooleanfalse

Properties

NameAttributeDescriptionTypeDefault
currentTimecurrentTimenumber0
durationdurationnumber0
isPlayingisPlayingbooleanfalse
isLoopingisLoopingbooleanfalse
isRecordingisRecordingbooleanfalse
isAudioRecordingisAudioRecordingbooleanfalse
recordingDurationrecordingDurationnumber-1
playbackRateplaybackRatenumber1
canRecordcanRecordbooleanfalse

Methods

NameParametersDescriptionReturn
doAction
NameDescriptionType
actionstring
renderNonLiveMode
renderLiveMode
renderRecordingControls

<pose-timeline>

Properties

NameAttributeDescriptionTypeDefault
progressnumber
scrubProgressnumber
handlePointerMove(e: PointerEvent) => void
handlePointerUp() => void

Methods

NameParametersDescriptionReturn
handlePointerDown
NameDescriptionType
ePointerEvent
void
calculateScrubPos
NameDescriptionType
xnumber
void

<pose-timeline>

Attributes

NameDescriptionTypeDefault
progressnumber0
scrubProgressnumber-1

Properties

NameAttributeDescriptionTypeDefault
progressprogressnumber0
scrubProgressscrubProgressnumber-1
handlePointerMove
handlePointerUp

Methods

NameParametersDescriptionReturn
handlePointerDown
NameDescriptionType
ePointerEvent
calculateScrubPos
NameDescriptionType
xnumber

<pose-toggle-button>

Attributes

NameDescriptionTypeDefault
disabledbooleanfalse

Properties

NameAttributeDescriptionTypeDefault
activeboolean
disableddisabledbooleanfalse

<pose-toggle-button>

Attributes

NameDescriptionTypeDefault
activebooleanfalse
disabledbooleanfalse

Properties

NameAttributeDescriptionTypeDefault
activeactivebooleanfalse
disableddisabledbooleanfalse