Capture screen and record video component
The capture screen and record video component provides an option to create meaningful materials by taking screenshots and capturing videos, without the need to install any third-party plug-ins or software. By relying on Pega solutions, you save time and resources when delivering comprehensive applications that precisely meet your business needs.
With the capture screen and record video component, you can create images and recordings from any part of your Pega application. Additionally, you can select another application or a browser tab as the capture target. The component includes two JavaScript APIs for capturing screens and recording videos, which work with both system and application screens. The APIs start the interaction and provide guided behavior for the screen captures and video recording. The APIs also provide the content of captured screens and recorded videos in a Base64 format.
The Capture screen and record video component includes the following APIs:
- pega.api.rtc.recordVideo to record videos
- pega.api.rtc.captureScreen to capture screenshots
The APIs use an object and additional callback functions that run during the interactions:
- onCompleteCallback
- This function runs when a screen capture or video recording is complete. Additionally, you can carry out more actions by calling this API. For example, you can use the Base64 data that the component API provides to create an attachment, attach it to a case, and then refresh the selected section.
- onCancelCallback
- This function performs additional actions when a user cancels capturing a screen or recording a video. For example, you can use this API to display a button that leads a user back to a screen capture, to expand a particular section, or to close a pop-up window.
- options
- This object lists the options for customizing UI elements, such as buttons or labels on a capture overlay. The customization options include also recording resolution, and recording length.
To facilitate implementation, the component includes sample section, control, and JavaScript text files that you can use. To further meet your business needs, you can edit the samples or create your own sections, controls, and text files.
Customization options
You can customize the following default values for screen
capture:var options = {
overlay: {
buttonLabel: "Capture screen", // label of button on overlay,
header: "Now,show us where...", // text for header in overlay,
text: "Drag this target on the screen to show where the issue occurs", // text for the body on overlay,
noOfPins: 3 // number of pins available annotations
},
mimeType: "image/png", // mime type of the generated image
skipCaptureOverlay: false // skip overlay and start recordind immediately on click of share
};The
component supports .jpg, .png, and
.webp image formats.
You can customize the following default values for video
recording:var options = {
mimeType: "video/webm", // output mime type from the video recording,
recordingTime: 120, // maximum recording time in seconds. A very high value like 600 seconds could cause browser to crash. Select values between 120 and 180 seconds,
resolution: "1080p", // screen resolution,
framePerSecond: 30, // number of frames per second,
skipInitialCountDown: false, // skip initial countdown for recoding video,
initalCountDownTime: 3 // initial countdown for recoding video > 0
};The
component supports .webm, .mkv, and
.mp4 video formats and 360p, 480p, 720p, 1080p, 4K, and
fit-screen resolutions.
You can also customize the default attachment name. The component adds a timestamp string to the attachment name. To adjust the default setting to your business use case, change the pyNote property setting in the AddAttachmentToCase activity to change the name. For more information, see Creating an activity.
Supported browsers
The Capture screen and record video component works with the following browsers:
- Google Chrome on Windows and Mac, verified for version 84
- Microsoft Edge based on Chromium on Windows and Mac, verified for version 84
- Mozilla Firefox on Windows and Mac operating systems, verified for version 79
Limitations
Before you start using the component, consider the following limitations:
- The component supports HTTPS protocol, only.
- You might need to accept additional browser permissions to record audio.
- To use the component on a Mac operating system with a supported browser, you
might need to enable screen recording at a system level.
For more information, refer to the Mac documentation.
- The component does not support mobile devices and browsers on mobile devices.
- The component does not support Safari on the Mac operating system.
When rules
The component includes the following when rules that you can use in your environment after component installation:
- IsRecordVideoSupported that returns true when a currently logged-in browser supports screen video recording.
- IsScreenCaptureSupported that returns true when a currently logged-in browser supports capturing screens.
- Defining custom functions for capture screen and record video component
Customize the display and behavior of the capture screen and record video component in your application by creating a JavaScript file that defines functions for the component. As a result, you deliver an application that complies with your specific requirements.
- Including the capture screen and record video component in a section
To support unique business use cases, you can include the component to capture screens and record videos inside your own section. As a result, you deliver an application that is flexible and more granular, because the section contains all the elements necessary for the component to work so that you can successfully include it in any harness. You also save time and resources, because you can reuse the section across your application.
Next topic Defining custom functions for capture screen and record video component