Embedded recorder reference
Recording sources#
Several properties and attributes let you select recording sources. Recording sources are specified as strings.
Possible values are:
screencameramicrophone
Attributes#
Most settings can be set by either setting an html attribute or a property using javascript. When setting an array of values as attribute, just separate the values with whitespace.
token attribute#
Sets the recorder token to be used. Controls which library and folder the recording will be saved into. If no token is specified, the recordings are created as short-term anonymous recordings with a limit of 2 minutes.
allowedsources attribute#
Space-separated list of recording sources which may be selected by the user for recording.
Default is screen microphone camera.
Example:
<!-- Do not allow webcam sharing --><calipio-recorder allowedsources="screen microphone"></calipio-recorder>mandatorysources attribute#
Space-separated list of recording sources which must be selected before starting the recording is possible. If empty (default), only one arbitrary source must be selected.
selectedsources attribute#
Space-separated list of recording sources which are (pre)selected. Allows for controlling which sources are used.
Possible recording sources are screen, camera, microphone. Default is screen.
startmode attribute#
Controls whether recording is set-up by the user before starting or is starting immediately. Default is setup.
| Value | Description |
|---|---|
setup | After clicking the record button, the user may select recording sources in a setup step before starting recording. |
immediate | Recording will start immediately with preconfigured setup after clicking record button |
Example:
<!-- This recorder will start immediately after clicking --><calipio-recorder startmode="immediate"></calipio-recorder>endmode attribute#
Controls if the user may review and discard the recording after finishing it. Default is review.
| Value | Description |
|---|---|
review | User is able to view and accept or discard the recording after finishing. recordingended event will be raised after the user clicks Accept. |
immediate | recordingended event will be raised immediately after finishing. |
hidepopupwhile attribute#
Space-separated list of recorder states when the large, blocking recorder-popup should not be shown.
Possible values:
| Value | Description |
|---|---|
during-setup | Popup is hidden during device selection; device selection is being done using the Mini-UI inside the button control. |
during-recording | Popup is hidden while recording. User cannot see a live preview. Recording of the embedding website is possible using this. |
after-recording | Popup is hidden after recording. Playback and discarding is done using the Mini-UI inside the button control. |
Example:
<!-- Never show recording popup --><calipio-recorder hidepopupwhile="during-setup during-recording after-recording"></calipio-recorder>preload attribute#
Controls whether the actual recorder is preloaded immediately or if preload is deferred until the user clicks the button.
Set to true or false. Defaults to true.
Example:
<!-- Defer preloading of actual recorder until the user clicks the button for the first time --><calipio-recorder preload="false"></calipio-recorder>logging attribute.#
Sets the log verbosity level. Set to 0 for a detailed log. Defaults to 2.
startbuttontext attribute#
Sets the text of the record button. Defaults to Record.
loadingtext attribute#
Sets the text of the record button during loading. Defaults to Loading.
language attribute#
Sets the language of the recording widget. Defaults to the browser language. Possible values are "de" (German) and "en" (English).
Properties#
token property#
Reflects the token attribute. Sets the recorder token to be used. Controls which library and folder the recording will be saved into.
TODO: describe how to obtain token.
If no token is specified, the recordings are created as short-term anonymous recordings with a limit of 2 minutes.
allowedSources property#
Reflects the allowedsources attribute. Specify a space-separated list or an array of recording sources which may be selected by the user for recording.
Example:
// do not allow audiorecorder.allowedSources = [ 'screen', 'camera' ];mandatorySources property#
Reflects the mandatorysources attribute. Specify a space-separated list or an array of recording sources which must be selected before starting the recording is possible.
Example:
recorder.mandatorySources = [ 'screen' ];selectedSources property#
Reflects the selectedsources attribute. Specify a space-separated list or an array of recording sources which are (pre)selected.
Allows for controlling which sources are used.
Example:
recorder.selectedSources = [ 'screen', 'microphone' ];startMode property#
Reflects the startmode attribute. Set to 'setup' or 'immediate'.
| Value | Description |
|---|---|
setup | After clicking the record button, the user may select recording sources in a setup step before starting recording. |
immediate | Recording will start immediately with preconfigured setup after clicking record button |
Example:
recorder.startMode = 'immediate'; // recording will start immediately after user clicks record buttonendMode property#
Reflects the endmode attribute. Controls if the user may review and discard the recording after finishing it.
| Value | Description |
|---|---|
review | User is able to view and accept or discard the recording after finishing. recordingended event will be raised after the user clicks Accept. |
immediate | recordingended event will be raised immediately after finishing. |
unsupported property#
Read-only property which returns true if the recorder is unsupported on the current platform.
startButtonText property#
Reflects the startbuttontext attribute. Sets the text of the record button. Defaults to Record.
loadingtext property#
Reflects the loadingtext attribute. Sets the text of the record button during loading. Defaults to Loading.
language property#
Reflects the language attribute. Sets the language of the recording widget. Defaults to the browser language. Possible values are "de" (German) and "en" (English).
Methods#
start method#
Starts the recorder with the currently selected sources. This is the same as clicking the recording button.
Depending on the startMode property, this will start the recording immediately or display the setup dialog to the user.
Example:
recorder.start();finish method#
Finishes a currently running screen recording. recordingended event will be raised after the recording has finished.
Depending on the endMode property, the user will be able to review the recording before that.
Example:
recorder.finish();cancel method#
Cancels a currently running screen recording. recordingcancelled event will be raised if cancelling has completed.
Example:
recorder.cancel();load method#
Triggers loading of the actual recorder. Will be ignored if the actual recorder is already loading or loaded.
Only useful if preload attribute is set to "false".
Events#
recordingcountdownstarted event#
Raised as soon as the recording countdown has started. Note that the countdown will be over immediately in certain situations (for example, when recording a window or browser tab).
recordingstarted event#
Raised when the recording countdown has elapsed and the actual recording has started.
recordingended event#
Raised when a recording has finished successfully and, depending on the endMode property, the user has accepted the recording.
The event detail contains additional information:
interface RecordingInfo { url: string; // Playback URL of the recording public_url: string; // Playback URL without password part. Password required for playback. identifier: string; // Recording identifier password: string; // Recording password used for End2End encryption length_seconds: number; // Number of seconds recorded}recordingcancelled event#
Raised when a recording has been cancelled due to either user interaction or after calling the cancel method.
recordingfailed event#
Raised when recording has failed. The event detail contains an Error object describing the reason of failure.