FastPix tutorials

How to Build a Short Video Sharing App like TikTok

Start building your short video sharing platform with features & APIs that bring your vision to reality faster

Share
This is some text inside of a div block.

Ever wanted to create a social video platform where users can upload, share, and discover short vertical videos? In this guide, we'll show you how to build your own TikTok-inspired application using FastPix Video API.

While building a video-sharing platform involves challenges like processing, compression, and delivery, FastPix API handles these technical aspects. This allows you to concentrate on building the features that really count, like an attractive "For You" feed, fun video interactions, and creative tools for your users.

"For You" feed, fun video interactions, and creative tools for your users

Quick platform overview

Here’s a look at what our platform will provide:

Category Features
Content Management
- SDKs to simplify video handling.
- Allow users to upload their own videos.
- Recording videos from user’s mobile devices.
- Organize videos with tags and categories.
- Receive updates via webhooks.
- NSFW filter for content moderation. 
Live Streaming Options
- Manage live broadcasts via API.
- Record live streams as VOD after the event.
- Pre-recording content as live stream. 
Video Editing Workflows
- Trim and cut videos uploaded on the platform.
- Automatic or custom video thumbnails.
- Overlay audio in your videos
- Create GIFs from videos  
Play Videos on Your App - A video player that works on all devices and supports adaptive streaming.
- In-built playback controls for videos (pause/play, audio bar, etc).
- Playback options with autoplay, loop, and mute.
- Video preloading in the app.
- Shareable video URL for embedding in sites.
- Support for vertical video formats. 
Video Analytics and Insights - Data SDK for tracking metrics and analytics.
- Track metrics like views, watch time, demographics, etc. 
User Experience - MP4 download support for uploaded videos.
- Content recommendation system for personalized experience.  
Protect User Videos  - Control access to videos with signed URLs.
- DRM to protect copyrighted material.
- Age restrictions and content warnings for sensitive material. 

Getting started with FastPix APIs

To create a video-sharing platform that enables users to upload their videos, you'll need to incorporate our FastPix APIs into your application. Begin by acquiring a token key pair for authentication, which consists of an Access Token ID and a Secret Key.  

Our setup page provides a guide to assist you with this process, covering authentication methods and access token permissions. After obtaining your token key pair, your application will be equipped to allow users to upload their videos.

1. Video content management – Uploads, organization, and moderation

Short videos form the heart of a TikTok-like platform, but handling these uploads needs smart design. Even short clips can hit upload limits when users add effects and high-quality footage.

Breaking uploads into small pieces solves several problems at once. Your users can post videos reliably even on shaky mobile connections, and their phones won't freeze up during the process. This chunked approach also lets you implement features like upload progress bars and pause/resume.  

To simplify the process, we recommend uploading videos in chunks. This approach minimizes the risk of network disruptions and helps prevent connection problems.

1.1 Video uploads SDK for easy uploads

Our mobile SDK makes video uploads smooth and reliable for your users. While basic uploads cap at 500 MB, our SDK handles the complex parts of getting videos from phones to your platform.

When users record or upload videos, the SDK splits them into small pieces. If their connection drops while posting, which is common on mobile networks, they won't lose progress. The upload just pauses and picks up where it left off.

1npm i @fastpix/uploader

You can install the SDK by executing this command in your terminal:

After installation, you can bring the upload component into your application by executing the following command in your terminal:

1import { Uploader } from "@fastpix/uploader"; 
2
3const fileUploader = Uploader.init({
4    endpoint: 'https://example.com/signed-url', // Replace with the signed URL. 
5    file: mediaFile, // Provide the media file you want to upload. 
6    chunkSize: 5120, // Specify the chunk size in kilobytes (KB). Minimum allowed chunk size is 5120KB (5MB). 
7    // Additional optional parameters can be specified here as needed 
8})

1.2 Setting up video uploads in your app

Let's add video uploads to your app. First, create an endpoint that checks if videos meet your platform's rules, like max length and supported formats. Next, integrate the FastPix Web Uploads SDK into your application, making sure it is correctly installed and set up.

You can add a clean upload screen to your app. Include a record button, upload progress, and basic filters. When a user posts a video, FastPix assigns it a unique ID that can be used to manage that content. FastPix works with major cloud storage providers, so you can keep your videos in AWS S3, Google Cloud Storage, or Azure and pull those videos using our create media from URL endpoint.

Videos saved with FastPix are referred to as media. To upload your first media, simply send a POST request to the /on-demand endpoint with the URL of a video file that can be shared publicly.

For additional information on uploading videos, check out this guide. Users can also upload videos straight from their device’s storage. To upload a video from device, follow this guide: Upload media from device.

1.3 Capturing video from user’s mobile devices

When building a mobile video app, users expect the camera capture to be smooth and instant. Your users need to start recording with a single tap, and there are some great tools you can use for both Android and iOS.  

If the video captured in your app doesn’t need to be viewed in full resolution, consider recording in a lower resolution instead. This can help save storage space and make uploads faster.

Capturing video from user’s mobile devices

Mobile video capture needs CameraX for Android and AVFoundation (specifically, Async Display Kit, now called Texture) for iOS. These native libraries give your app video recording capabilities without getting bogged down in device-specific camera code.

CameraX handles core camera features on Android, like recording at the right resolution, properly configuring preview feeds, and managing basic camera modes. Focus on implementing the quality settings that make sense for quick vertical videos (usually 1080x1920) and set file size limits that keep uploads fast.

AVFoundation on iOS lets you build essential recording features, like camera switching, start/stop controls, and basic session management. Configure the capture session for vertical video and set compression settings that balance quality and file size.

When implementing either library, prioritize getting the basics working first, focusing on smooth recording and fast upload. Extra features like filters and effects can come later, but reliable video capture is the essential first step.

While uploading, you can adjust how your videos are processed with the maxResolution parameter. This lets you set the highest resolution for streaming, so your videos play back smoothly in your app.

Here’s an example of how to make a request to upload your video and setting the maximum resolution to 1080p:

1curl --request POST \ 
2     --url https://v1.fastpix.io/on-demand \ 
3     --header 'accept: application/json' \ 
4     --header 'content-type: application/json' \ 
5     --data ' 
6{ 
7  "accessPolicy": "public", 
8  "optimizeAudio": false, 
9  "maxResolution": "1080p" 
10} 
11' 

1.4 Tagging and categorizing videos for easy search

Tagging and categorizing videos makes it easier for users to find content. You can add a feature that lets users search for videos using key-value pairs, like "key": "value." This tagging system can be used in future API calls. Additionally, use dynamic metadata to create keys that can hold any value pair, simplifying media tracking and management.

Users can add tags like #dance or #food when posting, and categories like "Entertainment" or "Tutorial" to group similar content.

Tagging and categorizing videos for easy search

1.5 Tracking real-time video status with webhooks

This webhook tracks two events: video.asset.created and video.asset.ready. It uses the passthrough ID to find the related Post and updates its status to either created or ready. This status helps the client know which videos are ready to show in the feed.

You can monitor each step of your users' video uploads through webhooks. When someone uploads a new video, FastPix sends updates to your app about the processing status, so you can display the correct progress in your interface.

Once FastPix finishes processing a video, your app gets notified instantly. This means you can show the video in feeds and profiles right when it's ready to watch.

1.6 Content safety in your app

You can keep your platform safe by catching harmful videos before they reach user’s feeds. Our NSFW filters scan each upload for issues ranging from graphic imagery to unsafe behavior.

When we tested this system on a sample video, it caught concerning content immediately. The clip scored 0.94 for violence, 0.85 for graphic content, and 0.49 for self-harm signals (different), which then triggered automatic review flags.

( …it’s really graphic!! )

To enable the NSFW filter for a video, send a PATCH request to the video’s mediaId. Include the moderation parameter and set it to true. The request will look like this:

PATCH /on-demand//moderation

For more tips on managing your content, check out our blog on using AI for NSFW and profanity filters.

2. Setting up live stream in your app

To start a live stream on FastPix, users send a POST request to the /streams endpoint with their access token. This request returns a Playback ID and a Stream Key.

Response details:

  • status: Shows the stream's current state:
    • idle: No stream is active.
    • active: The stream is live.
    • disabled: No more streams can be published.
  • streamKey: A code for third-party streaming tools.
  • createdAt: The date and time the stream started.
  • playbackId: IDs for viewing the live stream.

FastPix uses RTMP and SRT for live streaming. Users need any compatible software to broadcast. Streamers can go live using broadcasting software like OBS by plugging in their stream key. Viewers watch through this URL:

https://stream.fastpix.io/{PLAYBACK_ID}.m3u8

To end a stream, users just disconnect from their software. The stream will show as idle after a short period or automatically after 12 hours. If you need longer streams, just let us know.

2.1 Managing live streams in your app

You can control every part of your live streams with simple API calls. Create new streams, check which one’s currently live, or update stream settings with basic HTTP requests.

For more information on managing live streams, visit the live streaming API reference here.

2.2 Recording live streams in your app

You can save streams in two ways to keep content available after broadcasts end. Use instant replay during active streams so viewers can rewind and catch moments they missed. Perfect for quick challenges or tutorial streams where viewers might want to watch the stream again.  

This is called the DVR (Digital Video Recorder) mode, it’s a feature that allows viewers to pause, rewind, and replay parts of a live stream while it is still ongoing. For more information about DVR mode, take a look at the documentation here.

For longer content like gaming streams or live events, automatic background recording works better. The platform saves the full broadcast while your creator streams. When they finish, the recording appears in their profile ready for fans who missed the live.

Each recorded stream gets its own ID for sharing or embedding in other parts of your app. You can add these recordings into your main feed to boost engagement after the live ends.

2.3 Using pre-recorded videos as live streams

Sometimes creators can't stream in real-time. They can upload videos to be broadcast later as if they were live content. This works great for planned events, announcements, or when internet connections might be shaky.

When broadcast time hits, your platform plays the video as a live stream. Viewers get the same live experience, with comments, reactions, and shares should all work normally.

Setting up a scheduled broadcast takes just a few steps:

  1. Upload the video
  2. Pick a broadcast time
  3. Set streaming quality
  4. Choose between single play or loop mode

You can follow this guide to learn how to stream pre-recorded content as live.

3. Creating editing tools for your app

You can make video editing simple for your users. Most creators aren't professional editors, they just want to make their videos and stories look good quickly.

The editing interface should feel natural on phones. You can add trimming with finger gestures, filters with single taps, and text with a clear keyboard overlay. Each action should give instant visual feedback so users know exactly what their final video will look like.

By handling the complex editing work through APIs in the background, creators focus on making content, not learning complicated tools. You can add features to split long takes into perfect clips, merge multiple videos for transitions, etc.

3.1 Enable video clipping for users

To enable users to create clips from their uploaded videos, follow these steps:

  1. Activate clipping: Add "fp_media://" to the media ID in the URL parameter of your payload to enable the clipping feature.
  2. Set clip duration: Specify the startTime and endTime for the clip. If these parameters are not included, the entire original video will be used by default.

After the clip is generated, the API will return a new media ID and playback ID for the clipped segment.

Your request body looks like this:

1{ 
2  "inputs": [ 
3    { 
4      "type": "video", 
5      "url": "fp_media://0dde8722-278b-49e2-b0c8-52b57aaf2843", 
6      "startTime": 0, 
7      "endTime": 60 
8    } 
9  ], 
10  "metadata": 
11  { 
12    "key1": "value1" 
13  }, 
14  "accessPolicy":"public", 
15  "maxResolution":"1080p" 
16} 

Enable video clipping for users

3.2 Trim unwanted sections from the video

If users want to remove mistakes, interruptions, or anything irrelevant from their videos, trimming is the perfect solution. You can follow our simple guide here to easily cut out those unwanted parts.

3.3 Create automatic or custom video thumbnails

To generate thumbnails for uploaded videos, simply make a GET request to the following URL, replacing {PLAYBACK_ID} with the video's playback ID:

https://images.fastpix.io/{PLAYBACK_ID}/thumbnail.{png|jpg|webp}

You can choose from JPG, PNG, and WEBP formats for your thumbnails, but we recommend using WEBP. It offers a nice balance between quality and loading speed, making it a great choice for video-sharing platforms.

Users can also customize their thumbnails by adjusting the width and height, and even flipping them horizontally or vertically. For more details on how to use these options, check out our guide on extracting thumbnails from videos.

If you’d like to learn more about using these options, take a look at our guide on extracting thumbnails from videos.

Create automatic or custom video thumbnails

3.4 Overlay audio in your video

With FastPix’s Create Media from URL feature, you can add an audio track to your video with custom start and end times, plus smooth fade-in and fade-out effects. Here’s how to do it:

First, make sure your audio file is the right quality and length for the part of the video you want to add audio to. Save it to a URL that you can easily access.

Then, set up your request, use the API with a JSON format:

  • Include "type": "audio" and use "imposeTracks" for the overlay.
  • Add the timing details and set up the fade-in and fade-out effects.

Once your request is ready, send it through the FastPix API. The API will take care of adding the audio overlay just the way you specified.

For a detailed guide, check out the documentation on overlaying audio at specific timelines in your video.

Overlay audio in your video

3.5 Create GIFs from videos

FastPix makes it simple to turn videos into GIFs, which can add some fun and shareable content to your app. GIFs are perfect for social media and messaging, making your platform livelier. Here’s a quick guide on how to create GIFs from videos.

To make a GIF, just send an API request to FastPix with the video’s playback ID and the start and end times for the clip you want. You can also pick the output format (GIF or WEBP) and set the size.

https://image.fastpix.io/{PLAYBACK_ID}clip.{gif | webp}

You can customize it just the way you want, choose the start and end times on the video timeline, along with the height, width (in pixels), and frames per second (fps) for the GIF.

4. Customizable video player for all devices

With FastPix, the videos you upload can be played on any video player you choose, whether it’s Shaka Player, HLS Player, Exo Player for Android, or AV Player for iOS. This means you have the freedom to pick the player that works best for you.  

If you’re looking for an easy option, check out the FastPix Video Player. It’s designed to automatically adjust the video quality based on the viewer's internet speed, thanks to adaptive bitrate streaming (ABR).

FastPix Player comes with handy features like built-in video data and analytics, and it automatically converts your videos for different devices, creating the right format for each one. Our player works across platforms, so your videos will play smoothly on the web, Android, iOS, and more, no extra work needed!

To get started, just run this command in your terminal to install the Video Player SDK:

1npm install @fastpix/player 

After that, you can easily import the player component into your application like this:

1import "fastpix-player";

4.1 Built-in playback controls for videos

Most video players today have basic controls like play, pause, volume, and fullscreen options. But with FastPix Player, you get a fully customizable experience that works seamlessly across platforms.

We really care about accessibility, so our player includes features like keyboard navigation, closed captions and much more. This makes it easy for everyone to use.

For a smooth setup, be sure to check out the FastPix Player documentation. It’s a great resource to help you get started.

4.2 Customizing playback settings – Autoplay, loop, and mute Loop playback

The loop feature lets videos play over and over. When a video finishes, it starts again automatically. This is perfect for things like animations, ads, or background videos. If you're building an app for short videos like TikTok, this feature is a must-have.

Example to enable loop:

1<fp-player  
2  playback-id=`{Playback_id}`  
3  loop>
4</fp-player> 

Muted playback

The muted option plays videos without sound, which is great for silent introductions or background use. It makes things better when you don’t need audio, like for teasers or in public places.

Example to enable muted playback:

1<fp-player  
2  playback-id=`{Playback_id}`  
3  muted>
4</fp-player> 

Autoplay with mute

With the autoplay feature, videos start playing without sound. Viewers can unmute or change the volume whenever they want. This way, videos play right away without sound, which can help save mobile data.

Example to enable autoplay:

1<fp-player  
2  playback-id=`{Playback_id}`  
3  auto-play>
4</fp-player> 

For more details, you can check out this guide.

4.3 Embedding videos on other websites

If your users want to add your videos to a website, blog, or content management system (CMS), just take the iframe embed code for your media. This code lets you place the video player right on your page, and you can customize playback options like autoplay, muted sound, or looping.

All you need to do is paste the iframe code into your HTML file, and your video will be good to go. You can also tweak settings like the aspect ratio or even hide the controls for a sleeker look.

1<iframe src="https://play.fastpix.io/?playbackId={playback-id}&autoplay=true&muted=true&loop=true&hide-controls=true&enableVideoClick=true&aspect-ratio=21/9" width="1920" height="1080">
2</iframe> 

4.4 Vertical video support for mobile viewing

To make sure your users’ videos look great on mobile, it’s important to set the right aspect ratio. For platforms like TikTok and Instagram Reels, the ideal ratio is 9:16. This vertical format fills the screen perfectly and keeps your content looking sharp.

By default, the aspect ratio for the FastPix player component is set to 16:9, which is intended for widescreen videos. But you can change it to fit your needs. Changing the aspect ratio avoids stretching or cropping, so your videos look just the way you want them to.

You can use the player component’s --aspect-ratio variable to set it to 9/16 for vertical videos, by modifying the CSS component. Here’s how you can do it:

1fp-player {  
2  --aspect-ratio: 9/16;  
3} 

5. Video analytics for your app

Knowing how your videos are performing is really important for any online platform, but many creators struggle to understand complicated analytics. FastPix Video Data makes this much easier by breaking down information into over 50 different categories, like device type, location, playback method, and time intervals.

With the FastPix Data SDK, you can easily keep track of these important video metrics. It works well with players like Shaka Player, HLS.js, Exo Player for Android, AV Player for iOS, and of course, FastPix Player. If you need help getting started with Shaka Player, be sure to check out our guide.  

You should always make it easy to see the key numbers right away on mobile, with more details available with a quick tap. The goal is to help creators improve their content by providing clear and useful insights.

5.1 Tracking content performance in your app

FastPix focuses on what really counts in videos, not just the surface numbers. For example, video playtime shows how long viewers stick around, helping creators see which parts keep them engaged and where they lose interest. If a tutorial keeps viewers watching all the way through while others lose them halfway, that’s great feedback for future content.

With FastPix Data, you get a clear picture of your audience reach through unique views. Instead of inflated numbers from repeat viewers, you’ll know exactly how many different people are checking out your content.  

FastPix breaks down these metrics in an easy-to-understand way. If you notice that viewers from certain areas watch your videos all the way through while others drop off early, you can tweak your content strategy.  

For more details, take a look at this guide on audience metrics.

Tracking content performance in your app

6. Creating a great user experience for your app

Aim to make your platform easy for users to move between creating and watching content. Position important features like the record button, effects, and sharing options where they can easily reach them on their phones.

The creator dashboard should feel intuitive, just a tap to start recording, simple swipes for editing, and clear prompts for adding sounds or effects. When users finish a video, sharing and publishing should flow smoothly.

For viewers, keep scrolling and loading between videos fast. Let them easily swipe through different content categories, follow creators, and switch between their personal feed and trending videos without any fuss.

6.1 MP4 download support for videos

FastPix allows you to save videos in clear 1080p MP4 format. If a creator wants to remix their latest dance video or share a tutorial on other platforms, they can easily download the original high-quality version with just one tap.

Our MP4 downloads keep the video quality intact, making it great for creators who want to edit their content or create compilation videos from previous uploads. FastPix takes care of all the format conversion, so creators just tap download and have their video ready to go.

For step-by-step instructions on how to enable MP4 downloads, take a look at our guide here: MP4 support for offline viewing.

6.2 Content recommendation system using video metadata

If you’re looking to create a recommendation system for your video platform, start by organizing your video metadata, like tags, titles, and descriptions. You can use keywords from these to identify similar videos.

Next, consider user behavior, what they watch, like, and share, to help refine your suggestions. Aim for a balance between showing similar videos based on tags and connecting users with content they’re likely to enjoy based on their past activity. Keeping it simple with categories like “Suggested for You” or “Trending” can help keep viewers engaged.

Content recommendation system using video metadata

7. Secure and protect user videos

To protect user videos, make sure you have strong security measures in place. This way, users can feel comfortable uploading and sharing their content.

7.1 Encryption for video transmission and storage

When videos are uploaded, they’re encrypted using signed URLs, and stored securely with the user’s credentials. This way, only authorized users can access them.

With FastPix APIs, you can create signed URLs that include permissions and expiration times, keeping sensitive information safe. This means creators can upload their videos directly to your storage without worrying about exposing their credentials.

For example, a signed URL might look like this:

https://play.fastpix.io/uploads/...&X-Amz-Expires=7200

In this case, the X-Amz-Expires parameter shows how long the URL is valid—7200 seconds, or two hours from when it’s created.

7.2 DRM protection for copyrighted content

Social platforms usually don’t have much space for Digital Rights Management (DRM) because content is often shared quickly and freely. However, adding DRM can help protect copyrighted material and reassure users that their work is secure.

To control who can access your videos, you can change the accessPolicy parameter. Setting it to "drm" enables DRM, which helps prevent unauthorized use of your content. If you prefer a simpler option, you can set the access policy to "private" to limit access without the added complexity of DRM.

Here’s how to set the access policy for DRM:

"accessPolicy": "drm"

And for private access:

"accessPolicy": "private"

7.3 Age restrictions and content warnings

Setting up age restrictions and content warnings is important for keeping your social media app safe, especially for younger users. It helps ensure they don’t come across inappropriate content.  

To add age restrictions and content warnings, you can use metadata tags with simple key-value pairs in your content management system. For example:

  • "ageRestricted": true or "ageRestricted": false
  • "sensitiveMaterial": true or "sensitiveMaterial": false

This way, you can easily control what users see based on their age and the content type. It shows that you care about user safety and helps create a better experience for everyone.

For instance, YouTube has a toggle for creators to set age restrictions on their videos.

 Age restrictions and content warnings

8. Bottom line

FastPix provides a reliable video infrastructure that helps developer teams quickly integrate video into their products on a global scale. By choosing FastPix, you can meet your customers' needs without adding unnecessary complexity for your development team.

With FastPix, you get video infrastructure that is:

  • User friendly: Integrating video can be tough, but FastPix simplifies the process.
  • Customizable: Control the video experience by embedding the technology you need directly into your products. Create user-generated content (UGC) on your own terms instead of sending users to platforms like YouTube.
  • Insightful: Access detailed engagement metrics with FastPix Data to understand how your content is performing.
  • Compatible: Benefit from easy integrations with the tools you already use.

Want to add video to your product? You can get started today. We’d love to hear your thoughts on our features. Let us know how they work for you by sending us a message!

Frequently asked questions

What features should I consider for my video sharing app?

When creating a video sharing app, think about including features like user profiles, video editing tools, and social sharing options. These elements can help make your app more engaging and enjoyable for users.

Is HLS a good choice for short videos?

Using HLS for short videos can be useful, but it might not be necessary. HLS allows for adaptive streaming, which adjusts video quality based on connection speed. However, for videos under 15 seconds, the added complexity may not be worth it. If you want more control over features like caching, you might need to build a custom player, which can be time-consuming. HLS can work for short videos, simpler streaming methods might be more effective.

How can FastPix support your growing video and user base?

FastPix scales easily as your video library and user base grow. It provides smooth playback with minimal buffering and helps reduce storage costs through efficient video processing. A global CDN ensures your videos reach viewers reliably around the world. With advanced analytics, you can understand viewer behavior and content performance, helping you improve your strategy.

What video length should I allow in my app?

When building your video sharing app, think about allowing short videos between 15 to 60 seconds. This length is popular on platforms like TikTok and Instagram Reels because it keeps viewers engaged and encourages more content creation. You might also consider allowing longer videos, up to a few minutes, for users who want to share more detailed content, like on YouTube Shorts.