Tips for Developing a Screen Recorder

Let's face it. Sometimes it can be difficult for our app users to find a specific app function when our apps are loaded with all kinds of functions. Many of us tend to write up a guide detailing each function found in the app, but — honestly speaking — users don't really have the time or patience to read through long guides, and not all guides are user-friendly, either. Sometimes it's faster to play about with a function than it is to look it up and learn about it. But that creates the possibility that users are not using the functions of our app to its full potential.

Luckily, making a screen recording is a great way of showing users how functions work, step by step.

Just a few days ago, I decided to create some video tutorials of my own app, but first I needed to develop a screen recorder — one that looks like this.

How the Screen Recorder Works

Tap START RECORDING on the home screen to start a recording. Then, switch to the screen that is going to be recorded. When the recording is under way, the demo app runs in the background so that the whole screen is visible for recording. To stop recording, simply swipe down on the screen and tap STOP in the notification center, or go back to the app and tap STOP RECORDING. It's as simple as that! The screen recording will be saved to a specified directory and displayed on the app's home screen.

To create such a lightweight screen recording tool, we just need to use the basic functions of the screen recorder SDK from HMS Core Video Editor Kit. This SDK is easy to integrate. Because of this, I believe that except for using it to develop an independent screen recording app, it is also ideal for equipping an app with the screen recording function. This can be really helpful for apps in gaming and online education, which enables users to record their screens without having to switch to another app.

I also discovered that this SDK actually allows a lot more than simply starting and stopping recording. The following are some examples.

The service allows its notification to be customized. For example, we can add a pause or resume button to the notification bar to let users pause and resume the recording at the touch of a button. Not only that, the duration of the recording can be displayed in the notification bar, so that users can check out how long a screen recording is in real time just by visiting the notification center.

The SDK also offers a range of other functions, for great flexibility. It supports several major resolutions (including 480p, 720p, and 1080p) which can be set according to different scenarios (such as the device model limitation), and it lets users manually choose where recordings will be saved.

Now, let's move on to the development part to see how the demo app was created.

Development Procedure

Necessary Preparations

Step 1:    Configure app information in AppGallery Connect.

• Register as a developer.
• Create an app.
• Generate a signing certificate fingerprint.
• Configure the signing certificate fingerprint.
• Enable services for the app as needed.

Step 2:    Integrate the HMS Core SDK.

Step 3:    Configure obfuscation scripts.

Step 4:    Declare necessary permissions, including those allowing the screen recorder SDK to access the device microphone, write data into storage, read data from storage, close system dialogs, and access the foreground service.

Building the Screen Recording Function

Step 1:    Create an instance of HVERecordListener (which is the listener for events happening during screen recording) and override methods in the listener.

HVERecordListener mHVERecordListener = new HVERecordListener(){
    @Override
    public void onRecordStateChange(HVERecordState recordingStateHve) {
        // Callback when the screen recording status changes.
    }

    @Override
    public void onRecordProgress(int duration) {
        // Callback when the screen recording progress is received.
    }

    @Override
    public void onRecordError(HVEErrorCode err, String msg) {
        // Callback when an error occurs during screen recording.
    }

    @Override
    public void onRecordComplete(HVERecordFile fileHve) {
        // Callback when screen recording is complete.
    }
};

Step 2:    Initialize HVERecord by using the app context and the instance of HVERecordListener.

HVERecord.init(this, mHVERecordListener);

Step 3:    Create an HVERecordConfiguration.Builder instance to set up screen recording configurations. Note that this step is optional.

HVERecordConfiguration hveRecordConfiguration = new HVERecordConfiguration.Builder()
     .setMicStatus(true)
     .setOrientationMode(HVEOrientationMode.LANDSCAPE)
     .setResolutionMode(HVEResolutionMode.RES_480P)
     .setStorageFile(new File("/sdcard/DCIM/Camera"))
     .build();
HVERecord.setConfigurations(hveRecordConfiguration);

Step 4:    Customize the screen recording notification.

Before this, we need to create an XML file that specifies the notification layout. This file includes IDs of components in the notification, like buttons. The code below illustrates how I used the XML file for my app, in which a button is assigned with the ID btn_1. Of course, the button count can be adjusted according to your own needs.

HVENotificationConfig notificationData = new HVENotificationConfig(R.layout.hms_scr_layout_custom_notification);
notificationData.addClickEvent(R.id.btn_1, () -> { HVERecord.stopRecord(); });
notificationData.setDurationViewId(R.id.duration);
notificationData.setCallingIntent(new Intent(this, SettingsActivity.class)
    .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_CLEAR_TASK));
HVERecord.setNotificationConfig(notificationData);

As you can see, in the code above, I initially passed the custom notification layout to the initialization method of HVENotificationConfig. Then, I used the addClickEvent method to create a tapping event. For this, I used the IDs of a button and textView, as well as the tapping event, which are specified in the XML file. Thirdly, I called setDurationViewId to set the ID of textView, to determine where the screen recording duration is displayed. After this, I called setCallingIntent to set the intent that is returned when the notification is tapped. In my app, this intent is used to open an Activity, which, as you know it, is a common intent use. And finally, I set up the notification configurations in the HVERecord class.

Step 5:    Start screen recording.

HVERecord.startRecord();

Step 6:    Stop screen recording.

HVERecord.stopRecord();

And just like that, I created a fully functional screen recorder.

Besides using it to make instructional videos for apps, a screen recorder can be a helpful companion for a range of other situations. For example, it can be used to record an online conference or lecture, and video chats with family and friends can also be recorded and saved.

I noticed that the screen recorder SDK is also capable of picking up external sounds and switching between landscape and portrait mode. This is ideal for gamers who want to show off their skills while recording a video with real-time commentary.

That pretty sums up my ideas of how a screen recording app can be used. So, what do you think? I look forward to reading your ideas in the comments section.

Conclusion

Screen recording is perfect for making video tutorials of app functions, showcasing gaming skills in videos, and recording online conferences or lectures. Not only is it useful for recording what's displayed on a screen, it's also able to record external sounds, meaning you can create an app that supports videos with commentary.