DEV Community: Swarup Das

The magic behind video upload process in social media

Swarup Das — Wed, 05 Feb 2025 08:29:31 +0000

This is the era of social media. We see uncountable short form content these days, also known as reels or shorts or maybe stories and statuses. But have you ever wondered what happens when you press that upload or post button?
It might seem just a simple upload to the database and then distribution of that to the bigger mass - NO! not just it. A bunch of logic goes behind the whole process and let's decode it ☕

The journey

The user creates a content, edits it and then goes to upload.
When the user uploads the reel, it goes through a pipeline which has some set of compression processes.
The backend handles the video and compress it down to a desired bitrate for which the size of the reel is now reduced from the originally uploaded content. This size difference is massive!

For reference let's say you upload a video of 90 MB, and it is going through the pipeline. Now after the process is finished the video is now about 25-30 MB, incredible isn't it!

The average percentage compression from the above example comes down as-

                   90-25
 % compression =   ------ x 100 % = 72.222%
                    90

After the compression it simply follows the same method of uploading to the database and then comes to our feed.

Note: This is a simple overview but the market leading social medias are designed in such a way that it stores different version on top of compression (and their compression method can differ than mine) and shows us the best version according to our internet speed!
We will save that part for another blog 😉

Breakdown of compression

I will be explaining just the compression part with two packages called ffmpeg-static and fluent-ffmpeg you can easily find it in the npm library. Again, it's just an overview and you can definitely implement this method for video compression or any tool, it is not necessarily what Instagram or YouTube uses. Atleast it gets the job done 👀

Now let's get going to some technical stuff ☕

This part is based on pure backend, and I am using NodeJs and ExpressJs for the backend server. Before going to raw code let's just analyze the process a bit more in depth.

My method is used for compression and as well as storing the video in a dedicated database after compression and returns with the compressed video URL. The database part can vary since I have used a simple approach using firebase for demonstration.

What goes inside the function

We accept the video from the request body.

const inputFilePath = req.file.path;

The function is configured to accept both the video and the firebase endpoint where to store the compressed video.

async function compressAndUploadVideo(inputFilePath, firebaseStoragePath){
//function body
}

There is a package "multer", which is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files. This will create a temporary folder where the file from request body gets stored for processing.

const upload = multer({ dest: 'uploads/' }); //dest: destination, refer package documentation
.
.
.
app.post('/endpoint', upload.single('video'), async (req, res) => {
//function body
}

Before the compression begins the ffmpeg path has to be specified and this is done by the ffmpeg-static package.

const ffmpegPath = require('ffmpeg-static');
const ffmpeg = require('fluent-ffmpeg');

// Set the FFmpeg path from ffmpeg-static
ffmpeg.setFfmpegPath(ffmpegPath);

Now the major compression is done by the fluent-ffmpeg package, which has it's own set of rules to modify the codec and bitrate of the video. By lowering down the bitrate the size of the video decreases which turns out to be video compression and makes it suitable to be uploaded to the database and won't cause trouble in playing in any device.

await new Promise((resolve, reject) => {
  ffmpeg(inputFilePath)
    .output(outputFilePath)
    .videoCodec('libx264')
    .audioCodec('aac')
    .on('end', () => resolve())
    .on('error', (err) => reject(new Error(`Error compressing video: ${err.message}`)))
    .run();
  });

The "fs" and "path" modules play a crucial role to take the video from the response and process it in the API with some file based operations like reading and writing and stores it in a temporary location for uploading to firebase or any other database

const outputFilePath = path.join(__dirname, 'filename.mp4');
.
.
.
// Upload to Firebase Storage
  const storageFile = bucket.file(firebaseStoragePath);
  await storageFile.save(fs.readFileSync(outputFilePath), {
   contentType: 'video/mp4'
  });
.
.
.
 // Clean up temporary file
  if (fs.existsSync(outputFilePath)) {
    fs.unlinkSync(outputFilePath);
  }

The entire function

const fs = require('fs');
const path = require('path');
const ffmpegPath = require('ffmpeg-static');
const ffmpeg = require('fluent-ffmpeg');
const admin = require('firebase-admin');

// Set the FFmpeg path from ffmpeg-static
ffmpeg.setFfmpegPath(ffmpegPath);

const bucket = admin.storage().bucket();

/**
 * Compresses a video file using FFmpeg, uploads it to Firebase Storage, and updates a Firestore document.
 * @param {string} inputFilePath - Path to the input video file.
 * @param {string} firebaseStoragePath - Path in Firebase Storage where the video will be uploaded.
 * @returns {Promise<string>} - The download URL of the uploaded video.
 */
async function compressAndUploadVideo(inputFilePath, firebaseStoragePath) {
    const outputFilePath = path.join(__dirname, 'compressed_video.mp4');

    try {
        // Compress the video using FFmpeg (fluent-ffmpeg)
        await new Promise((resolve, reject) => {
            ffmpeg(inputFilePath)
                .output(outputFilePath)
                .videoCodec('libx264')
                .audioCodec('aac')
                .on('end', () => resolve())
                .on('error', (err) => reject(new Error(`Error compressing video: ${err.message}`)))
                .run();
        });

        // Upload to Firebase Storage
        const storageFile = bucket.file(firebaseStoragePath);
        await storageFile.save(fs.readFileSync(outputFilePath), {
            contentType: 'video/mp4'
        });

        // Get the download URL
        const downloadURL = await storageFile.getSignedUrl({
            action: 'read',
            expires: '03-01-2500' // Set a long expiration date
        });

        return downloadURL[0];
    } catch (error) {
        console.error('Error compressing and uploading video:', error);
        throw error;
    } finally {
        // Clean up temporary file
        if (fs.existsSync(outputFilePath)) {
            fs.unlinkSync(outputFilePath);
        }
    }
}

module.exports = compressAndUploadVideo;

Now you can import the compressAndUploadVideo function and use it in the root as explained earlier and the compressed video will be ready at your provided output location.

If you have came across till here make sure to follow me and you can also check my github. I will be sharing more unique ideas with ☕. Comment down anything you feel to share, I am open to suggestions. Till then see ya'll ✌️

How to implement push notifications in React Native (Android)

Swarup Das — Thu, 19 Sep 2024 09:15:11 +0000

Ever thought about the notifications we receive from the apps we installed? or How is Swiggy or Zomato provoking us to order food at 3 AM with their creative notifications? 🤔

Let's dive deep into the concept of notifications!

What are notifications?

A notification is a message or alert sent by an app to inform users about updates, events, or actions, typically delivered outside the app's interface.

Now there can be two types of notifications as shown below -

Push Notification

Push notifications are messages or alerts sent from a server to an app when the app is not actively running in the foreground. They are primarily used to keep users engaged by sending updates, reminders, or personalized content. Push notifications are delivered through operating system services like Apple Push Notification Service (APNs) for iOS or Firebase Cloud Messaging (FCM) for Android.

How push notification works:

Registration: When the app is installed or first opened, the app requests a unique device token from the OS's push notification service (APNs or FCM).
Server Communication: The app sends this token to the app's backend server, which stores it for future use.
Sending Notifications: The server sends a notification payload (containing title, message, action buttons, etc.) to the push notification service (APNs/FCM) with the device token.
Delivery: The push notification service delivers the message to the respective device, even if the app is not running.

In-App Notification

In-app notifications are messages or alerts displayed to users while they are actively using the app. Unlike push notifications, these do not require server intervention and are triggered within the app itself, usually as a result of user actions or app events.

How in-app notification works:

Event Trigger: When a specific event occurs inside the app (like a user reaching a milestone or a feature needing attention), the app can trigger an in-app notification.
Display: The notification is shown as a banner, modal, or pop-up within the app's UI, guiding the user or informing them about the event.
Custom Logic: In-app notifications are handled directly by the app’s code and can be shown dynamically based on the app’s internal state or logic.

Implementation in React Native android app:

Now that we know about notifications and their types, it's time to implement the feature in your very own react native app. This guide is for implementing only push notification in React native android app only, if you want for iOS or in-app notification, write down a comment and I will post that for sure!

To get started we will be using a third-party service called OneSignal. I recently came across this platform and was shocked by the services they offer.

About OneSignal:

OneSignal is a push notification service that enables app developers to send targeted notifications to users across various platforms, including mobile apps, websites, and email. It supports push, in-app, and web notifications, providing features like segmentation, automation, A/B testing, and real-time analytics. OneSignal is widely used for improving user engagement and retention by offering an easy-to-integrate solution for sending personalized messages. Their free tier consists of 10,000/month Free Email Sends, Unlimited Mobile Push Sends, Journeys Workflows, GDPR Compliant, A/B Testing

Going back to the guide, since we already know that push notifications require server-side handling via FCM (Firebase Cloud Messaging) hence there are a few steps to follow:

Set up firebase project (ignore first two steps if you already have firebase project):
- Go to firebase console and log in to your account.
- Create a project from here and follow the steps
- Once your project is created go to project settings from the sidebar
- Navigate to service accounts from the bar and it should look like this
- Click on Generate new private key and this will download a json file, carefully store it somewhere safe, we will be needing this while setting up OneSignal.
Set up OneSignal
- Go to OneSignal and create an account.
- After creating an account go through the setup steps and create an organization and now, you'll see a page for adding apps.
- In this page give your app name and select Google Android (FCM) for our case. and click on Configure Your Platform
- Now you will be redirected to this page where we'll be using the service account json file downloaded during firebase configuration Upload the json and then Save & Continue
- On the next page select React Native/Expo as target SDK and then Save & Continue again
- In the next screen you'll get your App ID, this is a confidential id and using this id anyone can trigger notification in your app, so be careful with this secret.

We are done with the setup in firebase and OneSignal, now the only task left is some Coffee with Code

Add OneSignal to your app and configure it

Step 1: Add OneSignal to your app by running this command first

npm i react-native-onesignal

Step 2: In your index.js or App.tsx or App.js whichever is the root of your project, import OneSignal

import { OneSignal } from 'react-native-onesignal';

and you have add this code snippet to initialise OneSignal

OneSignal.initialize('YOUR_APP_ID');

You can wrap this inside a useEffect hook for seamless integration and connectivity with OneSignal.

This will initialize the device with an unique ID on for OneSignal and you can check that in the subscriptions in the sidebar. Every device that gets initialized will be identified with this unique OneSignal ID and you can set it manually also if you have users with their own unique id's already by using this code snippet:

OneSignal.login(userId)

Once the user is successfully subscribed, it will show in the dashboard like this

Now you might come across some issues with OneSignal not being properly used or some critical errors so here is a part that you can follow which helped me resolve those issues.

Step 3: Inside your android\app\build.gradle add this code snippet

dependencies{
...
implementation('com.onesignal:OneSignal:[3.15.4, 3.99.99]')
...
}

Step 4: In android for providing necessary permissions for push notifications, in android\app\src\main\AndroidManifest.xml add

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />

right before the application tag. The INTERNET permission is optional however since it might be enabled by default.

Boom🚀 All the steps are covered for implementing push notifications, and you can send a test notification from the OneSignal dashboard itself.

Try out yourself and if any doubt you can comment below. Follow for more detailed guides!

References:
https://documentation.onesignal.com/docs/react-native-sdk-setup
https://documentation.onesignal.com/reference/push-notification
https://medium.com/tribalscale/mobile-push-notifications-implementation-in-react-native-with-one-signal-4e810dddd350

Happy coding!🧑‍💻