How to create a timelapse video from frames

One of our projects that we are working on is an application that allows you to track the building progress from the construction site using data received from CCTV cameras. The user can view the last received frame, timelapse video for the entire data collection period, compare frames taken at different times, overlay a 3D model on a real frame from a construction site, etc.

Overview 

So, today we’ll tell you how to create a video timelapse from a sequence of snapshots and provide customers with video playlists optimized for browser playback.

Before start: advantages of a video playlist over a single-file video

Unlike a single-file video, a video playlist consists of a playlist file and segments. Segments are just chunks of a whole video, and the playlist file describes the playback order and duration of the segments. 

The video playlist has undeniable advantages:

1. It is an optimized solution for playing large videos in a web application.
   As we already mentioned, the video playlist consists of video segments. This gives great flexibility in playback: users can start watching the video from the moment they want, skipping the unwanted part, as soon as the first required segment is loaded.
2. The video playlist is much easier to extend than the single-file video.
   If you need to add to the existing video playlist, you don't need to open a large video file and edit it. You just need to generate a segment and add it to your playlist file. This can greatly reduce server requirements and processing time.

Obviously, the choice between these two options for our case is beyond doubt.

Generate video timelapse

In order to generate a video timelapse from frames, we need:

1. The frames from which the timelapse is generated.
2. ffmpeg.

ffmpeg is a great and very flexible tool for working with video and audio, and it can do everything we need. You can download it here and read the documentation here.

ffmpeg \
-y \
-r 25 \
-pattern_type glob -i "*.jpg" \
-vf "scale=w=1280:h=720:force_original_aspect_ratio=decrease" \
-c:v libx264 \
-preset ultrafast \
-tune zerolatency \
-force_key_frames "expr:gte(t,n_forced*1)"
-hls_time 5 \
-hls_segment_filename playlist_segment_%d.ts \
-f hls playlist.m3u8

Let's dive into the set arguments:

-y
Overwrite output files without asking.

-r 25  
Set framerate (25 frames per second).

-pattern_type glob -i "*.jpg" 
Take all .jpg files in the local directory to create a video playlist.

 -vf "scale=w=1280:h=720:force_original_aspect_ratio=decrease"
Set video resolution 1280x720, automatically decrease resolution if needed.

-c:v libx264: 
Set output codec.

-preset ultrafast: 
Choose codec preset from veryfast (best speed) to veryslow (best quality).

-tune zerolatency 
Set optimization for fast encoding.

-force_key_frames "expr:gte(t,n_forced*1)"
Force a key frame every 5 seconds.

-hls_time 5 
Cut segments by a duration equal to 5 seconds.

-hls_segment_filename playlist_segment_%d.t
Set mask of segment filename (%d is replaced by segment index).

-f hls 
Set HLS protocol and output format. 

playlist.m3u8
Set the name of the playlist file.

After running the terminal command, ffmpeg will collect all the .jpg frames in the current directory in order and generate a video playlist:

• playlist.m3u8 – actually, playlist-file;
• one or more segments (depending on the number of frames provided) - playlist_segment_{1|2|3…}.ts.

Done!

Update video timelapse with a new segment

So, we have already figured out how to create a timelapse video. But what if you need to supplement an existing timelapse?

You can get all the images and generate another video playlist with a new segment. In some cases, this can be a very resource intensive problem. It was the same in our case: we store all the frames and video playlists in the S3 storage, and each time it would take a very long time to get all the frames and the existing video playlist, just to add a new segment. However, there is a less resource-intensive way that will also save us from having to store images for already generated playlist segments.

Let's first see what the playlist file we got in the previous chapter looks like.

Actually, the playlist file is essentially a text file, so we can open it with any text editor:

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:5
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:1.520000,
segment_0.ts
#EXT-X-DISCONTINUITY
#EXTINF:1.520000,
segment_1.ts
#EXT-X-ENDLIST

Let's figure out what it consists of:

#EXTM3U 
The file header indicating extended M3U format and must be the first line of the file.

#EXT-X-VERSION: 
Indicates the compatibility version of the playlist file.

#EXT-X-MEDIA-SEQUENCE: 
Indicates the sequence number of the first URL that appears in the playlist file.

#EXT-X-TARGETDURATION: 
Specifies the maximum segment duration.

#EXT-X-DISCONTINUITY: 
Indicates discontinuity between the preceding and following segments.

#EXTINF: 
Track information and other additional properties.

#EXT-X-ENDLIST: 
Indicates that no more segments will be added to the file.

As we can see, the playlist file for the most part describes the sequence and duration of the segments. Perfect! You probably already guessed that we can add it ourselves, without using ffmpeg.

In this case, we can generate a new segment as a separate video playlist using the almost identical command from the previous chapter. It differs only in that it will only generate one segment.

ffmpeg \
-y \
-r 25 \
-pattern_type glob -i "*.jpg" \
-vf "scale=w=1280:h=720:force_original_aspect_ratio=decrease" \
-c:v libx264 \
-preset ultrafast \
-tune zerolatency \
-hls_segment_filename new_segment.ts \
-f hls segment_playlist.m3u8

And to update the main video playlist, you just need to insert the segment's metadata into the main playlist file. You may get it from the segment's playlist file or generate it manually.

#EXTM3U
#EXT-X-VERSION:3
#EXT-X-TARGETDURATION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXTINF:1.520000,
segment_0.ts
#EXT-X-DISCONTINUITY
#EXTINF:1.520000,
segment_1.ts

#EXT-X-DISCONTINUITY
#EXTINF:1.520000,
new_segment.ts

#EXT-X-ENDLIST

And that's it! It works very simply: if there is an entry for a segment in the playlist file and the segment file is available at the specified path, it is played.

With S3 file storage: segment URLs

In the examples above, we used the segment filename to tell the video player which segment to play. In this case, the video player will search for the segment in the same directory/URL as the playlist file itself.

#EXTINF:1.520000,
segment.ts
#EXT-X-DISCONTINUITY

Basically, the highlighted line is the path to the segment, so we can conditionally specify any path, like this:

#EXTINF:1.520000,
C:\Video\segment.ts
#EXT-X-DISCONTINUITY

Or even like this:

#EXTINF:1.520000,
https://www.domain/video/segment.ts?any_arg=any_value
#EXT-X-DISCONTINUITY

The last example can be useful if you store the video playlist in private S3 storage: you can use pre-signed URLs as paths to segment in order to avoid difficulties in accessing segments when playing the video playlist in a browser.

Conclusion

Today we figured out how the video playlist works, how to create the timelapse from frames, and how to deal with it in the context of a web application. Take care of yourself and stay tuned!

Additional links:

Online test-bed for video playlists: https://hls-js.netlify.app/demo/
Video playlists with React: https://www.npmjs.com/package/react-player
m3u(8)-playlist syntax: https://docs.fileformat.com/audio/m3u/