The following instructions offer basic details about how to use the SC Screen capture tool. The concept behind the tool is simple:
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.
Teleprompter – the tool comes with a built-in teleprompter. To enable it, click on the Use teleprompter button in the left hand panel. Clicking on the button again will close the teleprompter.
Teleprompter editor – click on the Edit text button to add, update or delete text while developing the video script. Additional screen prompts can be added by starting a line with a ~tilde.
Testing the teleprompter script – click on the Run test button to test the teleprompter script. Advance to the next line by pressing the keyboard spacebar. Screen prompt reminders will appear to the right of the main script.
When a recording is completed the tool will download the video to your local machine. If the teleprompter has been used during recording, the download will include subtitle files in formats that can be used when uploading the video to social media.
The web page supports the following (hopefully cross-browser standard) keyboard controls and shortcuts.
In the Targets panel, focus on the target listing you want to move, then `SHIFT + UP-ARROW` to move up; `SHIFT + DOWN-ARROW` to move down.
Note that targets will display over those below them in the listing list; under those above them in the list.
This screen recording tool is a Proof of Concept, released under the MIT licence. More details about the tool, alongside its code, can be found in its repository on GitHub.
This tool has been designed to be hackable. Feel free to use the tool as-is on its github.io page, or fork the repository to coustomise and host your own version. The tool can also be downloaded and run locally – it has no backend or toolchain.
MIT Licence
Copyright (c) 2026 Rik Roots
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
- The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.