Exp-lookit-webcam-display Class
These docs have moved here.
A frame to display the user's webcam stream, along with a small amount of optional text. Expected use is as a break during an experiment, e.g. to check positioning, but could also be used as a lightweight frame for data collection.
Not fullscreen by default, but can be displayed fullscreen as shown in example below. Can optionally record video.
"frames": {
"webcam-display-break": {
"kind": "exp-lookit-webcam-display",
"blocks": [
{
"title": "Here is a short break",
"listblocks": [
{
"text": "You can check that your child is still visible"
},
{
"text": "You can make some silly faces"
}
]
}
],
"nextButtonText": "Next",
"showPreviousButton": false,
"displayFullscreenOverride": true,
"startRecordingAutomatically": false
}
}
Item Index
Methods
Properties
- audioOnly
- autosave
- blocks
- doUseCamera
- maxRecordingLength
- maxUploadSeconds
- nextButtonText
- recorder
- recorderElement
- recorderReady
- showPreviousButton
- showWaitForRecordingMessage
- showWaitForUploadMessage
- startRecordingAutomatically
- stoppedRecording
- videoId
- videoList
- waitForRecordingMessage
- waitForRecordingMessageColor
- waitForUploadMessage
- waitForUploadMessageColor
- waitForWebcamImage
- waitForWebcamVideo
Methods
destroyRecorder
()
Destroy recorder and stop accessing webcam
hideRecorder
()
Hide the recorder from display. Useful if you would like to keep recording without extra UI elements to
distract the user.
makeTimeEvent
(
Object
-
eventName -
extra
Extend any base time event capture with information about the recorded video
Returns:
Object:
Event data object
onRecordingStarted
()
Function called when frame recording is started automatically. Override to do
frame-specific actions at this point (e.g., beginning a test trial).
setupRecorder
(
Promise
-
element
Set up a video recorder instance
Parameters:
-
elementNodeA DOM node representing where to mount the recorder
Returns:
Promise:
A promise representing the result of installing the recorder
showRecorder
()
Show the recorder to the user. Useful if you want to temporarily show a hidden recorder- eg to let the user fix
a problem with video capture settings
startRecorder
()
Start recording
Returns:
Promise Resolves when recording has started
stopRecorder
()
Stop the recording
Returns:
Promise A promise that resolves when upload is complete
whenPossibleToRecordObserver
()
Observer that starts recording once recorder is ready.
Properties
audioOnly
Number
Whether to do audio-only (vs also video) recording. Can be overridden by consuming frame.
Default: 0
autosave
Number
private
Whether to autosave recordings. Can be overridden by consuming frame.
TODO: eventually use this to set up non-recording option for previewing
Default: 1
blocks
Object[]
Array of blocks for Exp-text-block, specifying text/images of instructions to display
Sub-properties:
doUseCamera
Boolean
Whether to use the camera in this frame. Consuming frame should set this property
to override if needed.
Default: true
maxRecordingLength
Number
Maximum recording length in seconds. Can be overridden by consuming frame.
Default: 7200
maxUploadSeconds
Number
Maximum time allowed for video upload before proceeding, in seconds.
Can be overridden by researcher, based on tradeoff between making families wait and
losing data.
Default: 5
recorder
VideoRecorder
private
The recorder object, accessible to the consuming frame. Includes properties
recorder.nWebcams, recorder.hasCamAccess, recorder.micChecked, recorder.connected.
recorderReady
Boolean
private
Whether recorder has been set up yet. Automatically set when doing setup.
Accessible to consuming frame.
showWaitForRecordingMessage
Boolean
Whether to initially show a message saying to wait until recording starts, covering the entire frame.
This prevents participants from seeing any stimuli before recording begins. Only used if recording is being
started immediately.
Default: true
showWaitForUploadMessage
Boolean
Whether to stop media and hide stimuli with a message saying to wait for video upload when stopping recording.
Do NOT set this to true if end of recording does not correspond to end of the frame (e.g. during consent or
observation frames) since it will hide everything upon stopping the recording!
Default: true
startRecordingAutomatically
Boolean
Whether to automatically begin recording upon frame load
Default: false
stoppedRecording
Boolean
private
Whether recording is stopped already, meaning it doesn't need to be re-stopped when
destroying frame. This should be set to true by the consuming frame when video is
stopped.
videoId
String
private
A video ID to use for the current recording. Format is
videoStream_<experimentId>_<frameId>_<sessionId>_timestampMS_RRR
where RRR are random numeric digits.
videoList
List
private
A list of all video IDs used in this mixin (a new one is created for each recording).
Accessible to consuming frame.
waitForRecordingMessage
Boolean
[Only used if showWaitForRecordingMessage is true] Text to display while waiting for recording to begin.
Default: 'Please wait... <br><br> starting webcam recording'
waitForRecordingMessageColor
Boolean
[Only used if showWaitForRecordingMessage is true] Background color of screen while waiting for recording to
begin. See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
for acceptable syntax: can use either color names ('blue', 'red', 'green', etc.), or
rgb hex values (e.g. '#800080' - include the '#'). The text on top of this will be either black or white
depending on which will have higher contrast.
Default: 'white'
waitForUploadMessage
Boolean
[Only used if showWaitForUploadMessage is true] Text to display while waiting for recording to begin.
Default: 'Please wait... <br><br> uploading video'
waitForUploadMessageColor
String
[Only used if showWaitForUploadMessage is true] Background color of screen while waiting for recording to
upload. See https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
for acceptable syntax: can use either color names ('blue', 'red', 'green', etc.), or
rgb hex values (e.g. '#800080' - include the '#'). The text on top of this will be either black or white
depending on which will have higher contrast.
Default: 'white'
waitForWebcamImage
String
[Only used if showWaitForUploadMessage and/or showWaitForRecordingMessage are true] Image to display along with
any wait-for-recording or wait-for-upload message. Either waitForWebcamImage or waitForWebcamVideo can be
specified. This can be either a full URL ('https://...') or just a filename, which will be assumed to be
inside
`baseDir/img/ if this frame otherwise supports use of baseDir`.
Default: ''
waitForWebcamVideo
String
[Only used if showWaitForUploadMessage and/or showWaitForRecordingMessage are true] Video to display along with
any wait-for-recording or wait-for-upload message (looping). Either waitForWebcamImage or waitForWebcamVideo can be
specified. This can be either an array of
`{'src': 'https://...', 'type': '...'}` objects (e.g. providing both
webm and mp4 versions at specified URLS) or a single string relative to `baseDir/<EXT>/` if this frame otherwise
supports use of `baseDir`.
Default: ''
Events
pauseVideo
When pausing study, immediately before request to pause webcam recording
recorderReady
When video recorder has been installed
stoppingCapture
Just before stopping webcam video capture
unpauseVideo
When unpausing study, immediately before request to resume webcam recording
videoStreamConnection
When recorder detects a change in video stream connection status
Event Payload:
-
statusStringstatus of video stream connection, e.g. 'NetConnection.Connect.Success' if successful