How to implement TikTok story creation in iOS — PART 1: Capturing videos from camera
Welcome to the first part of the blog series, where we’ll explore the world of creating short video sets with background music like on TikTok! In this part of a multi series blog post, the main focus will be on capturing videos.
You may already be familiar with TikTok, the wildly popular social media platform where users can craft short, captivating videos set to catchy tunes. What makes TikTok truly magical is its ability to easily merge multiple clips into one masterpiece.
Video Creation
TikTok allows users to record short videos, typically ranging from 15 to 60 seconds. This brief time frame encouraged concise and engaging content. Users could pause the recording process and then continue filming, enabling them to stitch together multiple clips seamlessly within a single video. While recording a video, users could effortlessly switch between the front-facing (selfie) camera and the rear camera to capture different perspectives. Unfortunately, something like this is not possible on the iPhone’s native camera app.
What’s the limitation of the iPhone’s native camera app?
The native camera app on the iPhone has some limitations when it comes to video recording features.
- Stopping while recording — The native camera app on the iPhone does not have a built-in feature to pause and resume video recording. Once you start recording a video, you have to keep recording until you manually stop it. If you want to create a video with multiple segments or pause and continue recording, you will need to edit the video clips separately using a video editing app.
- Flipping camera while recording — Similarly, the native camera app does not have a feature to flip the camera while recording a video. Once you start recording with either the front or rear camera, the app locks the camera you started recording on until you stop.
How to bypass camera limitations
We’re excited to introduce you to our project, which brings a great video creation experience to iOS apps. We have created a module you can use in your iOS app that bypasses the limitations above. You are able to stop and start recording at your whim and flip cameras mid recording!
Under the hood, every time you stop/start the recording or flip the camera, a single video fragment is created and saved. Once you are done with your filming and decide to preview your final video, the app merges all video fragments together using the powerful iOS framework AVFoundation.
You can checkout the Github repo with the complete code if you are curious about the implementation.
But isn’t merging of a lot of videos too slow?
There is a huge chance a merge will be performed on few dozens of videos, so the wait time for this operation can be alarming.
Significant wait time in post-recording video merging can negatively impact the user experience (UX) and potentially ruin the overall user satisfaction with your application. Users, especially in today’s fast-paced digital environment, have high expectations for seamless and responsive interactions and that’s where background merge comes in handy.
And what’s a background merge?
There are two approaches to merging videos: merging when the user is done recording and merging in the background while user is still recording. We’ll dive into the key differences between them and explore their advantages, use cases, and potential drawbacks.
Merging when user is done — saving video fragments in an array of assets, then perform merge when user is done with filming and proceeds to preview the final video.
Background merge — each time the user has filmed one video fragment, merge is being performed. We keep an array of all our merged videos so when user films another one, just pop the last from the already merged ones and append the currently recorded one.
In the background approach, we always merge just two videos: the currently recorded one and the last merged sequence. This lowers wait time and user can preview his finished video in almost real time!
Why keep the array of all merged videos and not just the last one? If users want to delete one video fragment, the app simply deletes the last video in the merged array. Consequently, you have the final video without the last fragment, with no need to perform the merge again!
In picture above you can see how the videos are merged while recording. When each fragment is recorded, it’s merged with the last video in the array, and stored to the next index. When user wants to delete the last fragment, the last video in the array is deleted.
If users switches cameras during recording, videos from both cameras are merged together with the video on the last index, so user thinks that app never even stopped recording.
In the Github repo there are two branches, so you can explore the differences. Here is an example how background merge works in action:
Conclusion
We’ve explored the captivating world of video merging, inspired by TikTok’s magic. Our iOS project empowers you to create seamless and engaging videos. Stay tuned for more in this series.
Useful reads
Antonio is a valuable member of our iOS team.
At Azikus, we design and develop top notch mobile and web apps.
We are a bunch of experienced developers and designers who like to share knowledge, always staying up to date with latest and newest technologies.
To find out more about what we do, feel free to check our website.
