SC Screen Recorder

Initial page load. Most of the control buttons are kept in the accordion on the left hand side. Additional control buttons across the top will open dialog modals. The controls across the bottom of the screen are currently disabled. The recording area is in white, fitted into the responsive canvas.

You will be asked to share your camera and microphone with the tool when the page loads. These are optional – you can still record a video even without a talking head visual (camera) or a voiceover (microphone).

To set the recording area's dimensions, click on the Dimensions button in the top bar. When changing dimensions, targets and background images will automatically update to accommodate the change (though the talking head, which has fixed dimensions, will not). Landscape, square and portrait dimensions are supported.

Targets are areas of the user's display screen(s) to be real-time captured in the recording area. To aquire and manage targets, open the Targets panel in the accordion.

Click on the Request screen capture button to launch the browser's native screen-capture sharing modal. Select the desired target and press the Share (or equivalent) button.

Once a target has been selected an entry for it will appear in the Targets panel. Each screen capture can be halted by the user at any time, either by clicking on the target's Remove button, or by clicking on any other button the user's browser or operating system may supply.

Targets can be renamed, to help you more easily navigate between them as you record. There's also a Center button to quickly bring a target into view while recording.

You can drag-and-drop each target into the desired position on the recording area. Clicking on a target will enable the bottom controls for the target. Horizontal and vertical position ranges have been included for accessibility.

The target display in the recording area can be scaled and rotated as required. Targets can be faded in and out using the opacity control. Filters can be applied to target displays at any time.

Targets display in the canvas in the order they are shown in the targets panel. To change the order in which they display, click on a target in the panel then use the shift+arrow keys to move it up/down the list.

The recording area's background defaults to white. Click on the Background panel in the accordion, and then the Change background color button to update the color.

The recording area can also display a background image. To add an image, drag it into the web page – multiple images can be added using this method. Alternatively, click on the Browse for image files button to open a file selection modal.

Only one background image can be displayed at any time. To remove the current background image click on the Hide background image button. If multiple images have been uploaded, then the background image can be easily updated by clicking on the desired image's thumbnail in the panel.

By default the "talking head" functionality is disabled. To add a talking head, click on the Head panel in the accordion, select the desired camera in the drop-down selection box, then click on the Use talking head checkbox.

Once the talking head appears, it can be positioned, scaled and rotated using the controls in the panel (note that it cannot be repositioned using drag-and-drop). The head can be hidden by unchecking the Show talking head checkbox. The video stream capturing the talking head can be halted at any time by unchecking the Use talking head checkbox, or stopping it using any other facility your browser or operating system may supply.

To record, click on the Record button, then select a microphone to use for audio capture. Note that resulting video's format (currently "webm" or "mp4") needs to be set before recording starts. Then click on the Start recording button.

While recording, you can draw lines (circles, underlines, arrows, etc) directly on the canvas to highlight points of interest in the target displays. Click on the Scribbles panel in the accordion and tick the Use scribbles checkbox. Line color and width can also be set/updated in this panel at any time.

After drawing a line, you can undo it, or restore an undone line, by clicking on the appropriate button in the panel. All lines can be permanently removed using the Clear lines button.

While recording, the Record button changes to a red Stop recording button. Click it to, well, stop recording. The recorded video will automatically download to the device where the web page is running.

Logo control – the tool, if forked or set up locally, can support one or more branding logos. Position the logo as required. If more than one logo is included in the build, they can be swapped and repositioned as recording continues.