Do Precise 1080P Screen Recording Video With All Free Tools on macOS

6 min readApr 12, 2017

Short Story:

Use QuickTime Player to do screen recording and clip editing;
Use VLC Media Player to do canvas crop and scale;
Use FFmpeg to do video rotation transform.

You can see the final work in use for our app hezi.link on App Store (only on the App Store app in iOS you can see the preview video, or in iTunes? I don’t know.). And below is the full-length version:

Below is the long story. The impatient ones please jump to “Step 1” below directly.

We do this video to be used as an App Preview video on App Store. The video is a preview of how the app runs and is used. So it’s mainly a (say, iPhone) screen recording video. However, Apple has very strict detailed specifications on the video. The most concerning specifications are listed below:

length has to be between 15 sec and 30 sec;
1080p (width) * 1920p (height) resolution turns out to be the most time-saving and energy-saving resolution;
max frame rate: 30;
a stereo audio track is required (can’t understand what’s the point).

Besides that, we have our own preferences:

we wanna do the recording on an iPhone simulator, not on a real device, because the recording has to be an almost certainly repeated task as our app evolves, and only a simulator is perfectly under control in almost all aspects;
it’s the best if we could trim or delete a certain clip in the video to make it concise and to show as many features as possible of our app hezi.link;
it’s the best if we could all use free tools, because our resources and budget is so limited ATM;
there has to be a very high, if not the highest, quality version, because we want to also showcase the video wherever possible, besides on App Store.

Where were we then? Basically we knew nothing about video editing. We had never done this kind of preview video before. And it was by then the most complex video editing task we had ever done.

Besides, the real challenges (some were found out after we failed again and again) we were faced with were:

although QuickTime could do screen recording, a precise video canvas size, which is required by Apple, is not possible, instead it does either recording of a full screen/display or a roughly drawn by mouse or trackpad rectangular area;
QuickTime can only export, after complex clips editing, with maximum height of 1080p, versus 1920p required by Apple;
there exists an inconsistent processing logic issues on resolution and display resolution of video between VLC and QuickTime, which is why we introduced the standalone FFmpeg to do the rotation transform;
with the current free tools at hand, there’s no easy way to introduce and edit a sound track separately and isolatedly.

So, we spent about 2 days to figure out all the details in the strict 5-step process to finish this task, which is still not perfect, because the audio track is not done in an isolated way, but edited (cut and trimmed) along with the video track. The exact 5 steps in the exact sequence are explained below.

Step 1

Use QuickTime to do a rectangular area screen recording (“Record your screen” section in Apple’s official support manual). Note also the audio recording.

But the area has to be larger than the target video canvas size or the target content size, so you can crop and scale down later, because the other way around is simply not possible. We recorded the area of an iPhone 7 Plus simulator window whose content (excluding window chrome) pixel size is 1242p * 2208p. The required target video size is 1080p * 1920p. And for the scale down: (1242p * 2208p) / 1.15 = (1080p * 1920p). The the video resolution we recorded has to be larger than 1242p * 2208p.

Screen Recording Area Larger Than Target Content Size

Step 2

Use VLC to crop and scale down to the target video resolution: 1080p * 1920p.

2.1 How many pixel to crop? Select in Finder the video file recorded in step 1, you can see the resolution here is 1280p * 2296p.

As mentioned in “Step 1”, the target content size is 1242p * 2208p, so pixels to crop: width: 1280p - 1242p = 38p ; height: 2296p - 2208p = 88p.

Next we have to find out the specific pixels, to crop, of left, right, top and bottom edges respectively. Open the recorded video file with VLC and pause the playback. Select VLC menu option “Window” > “Video Effects …”. And then select the “Crop” tab in the transparent “Video Effects” window. You can take some time to observe and refine to find out pixels to crop: left: 20p; right: 18p, top: 62p; bottom: 26p.

left: 20p; right: 18p, top: 62p; bottom: 26p

2.2 Configure export transcode filters. Open VLC preferences window and click the bottom left “Show All” button. Then do as depicted below (note the specific pixels may differ) and finally do not forget to save all the preferences.

2.3 Convert (process) and export the video. Select menu option “File” > “Convert & Stream…”. Open the recorded video file in the “Drop media here” section. Choose “Video — H.264 + MP3 (MP4)” profile and click the “Customize…” button. And do as depicted below and “Apply”. You can change parameters as needed.

Last, click “Save as File” and choose the right destination and input file name via the “Browse…” button, and click the bottom right “Save” button.

Important Tips: 1) Use ctrl + scroll (mouse or trackpad counterpart gesture) to zoom screen to find out precise pixels to crop; 2) Deselect any “Repeat xx” option in the Playback menu when exporting video (Convert & Stream); 3) The advanced features of VLC are not that user friendly, so please be careful.