📉 Video quality significantly worse with `react-native-compressor` compared to FFmpeg despite larger file size

[mronline]

🧩 Description

Since support for the FFmpeg library has ended, I switched to using react-native-compressor.
However, even though the output file size is larger compared to FFmpeg, the video quality is significantly lower — it becomes blurry during scene transitions and overall looks degraded.

---

🎥 Original Video Metadata (QuickTime)

File Information

• Resolution: 1080 × 2340
• File size: 203.2 MB
• Bitrate: 13.61 Mbit/s
• Video Format: H.264
• Audio Format: MPEG-4 AAC, 48 000 Hz

Video Details

• Encoded frame rate: 24.19 fps
• Data rate: 13.32 Mbit/s
• Color values: ITU-R BT.709
• Transfer function: ITU-R BT.709
• YCbCr matrix: ITU-R BT.709

Audio Details

• Language: Unknown
• Data rate: 287.97 kbit/s
• Channels: Mono
• Track number: 1

---

🧮 FFmpeg Compression

let encodeScaleCommand = '';
if (videoWidth >= 640) {
    encodeScaleCommand = '-vf "scale=480:-2" ';
    if (videoWidth >= 720) {
        encodeScaleCommand = '-vf "scale=360:-2" ';
    }
}

const encodeFFMpegCommand = `-i ${videoUri} -c:v libx264 ${encodeScaleCommand}${encodeDestination}`;

FFmpeg Encoded Video Metadata

File Information

• Resolution: 360 × 780
• File size: 4.6 MB
• Bitrate: 300.58 kbit/s
• Current Dimensions: 1448 × 3137
• Video Format: H.264
• Audio Format: MPEG-4 AAC, 48 000 Hz

Video Details

• Encoded frame rate: 24.25 fps
• Data rate: 299.06 kbit/s
• Current scale: 4.02×
• Color values: Unspecified
• Transfer function: Unspecified
• YCbCr matrix: Unspecified
• Code points: Unspecified
• Track number: 1

Audio Details

• Language: English
• Data rate: 1.52 kbit/s
• Channels: Mono
• Track number: 2

---

🧩 react-native-compressor Compression

const isPortrait = videoHeight > videoWidth;

if (isPortrait) {
    maxSize = 780;
    newWidth = (maxSize / videoHeight * videoWidth);
}

const compressedVideo = await Video.compress(
    videoUri,
    {
        compressionMethod: "manual",
        maxSize,
        bitrate: 300000
    }
);

react-native-compressor Encoded Video Metadata

File Information

• Resolution: 360 × 780
• File size: 9 MB
• Bitrate: 602.15 kbit/s
• Current Dimensions: 720 × 1560
• Video Format: H.264
• Audio Format: MPEG-4 AAC, 48 000 Hz

Video Details

• Encoded frame rate: 24.23 fps
• Data rate: 314.18 kbit/s
• Current scale: Double
• Color values: EBU Tech 3213
• Transfer function: ITU-R BT.709
• Code points: (5–1–5)
• Track number: 1

Audio Details

• Language: English
• Data rate: 287.96 kbit/s
• Channels: Mono
• Track number: 2

---

⚠️ Issue Summary

Compared to FFmpeg, the react-native-compressor output:

• Produces larger file sizes (9 MB vs 4.6 MB)
• Has worse visual quality, especially visible during video transitions
• Appears blurry and less sharp

---

🧠 Expected Behavior

A compressed video with comparable quality to FFmpeg output at similar or smaller file size.

---

💻 Environment

• Platform: Android
• Library: react-native-compressor
• Compression method: manual
• React Native version: 0.77.3

---

[github-actions]

👋 @mronline
Thanks for opening your issue here! If you find this package useful hit the star🌟!

[mronline]

You can access the sample videos via Dropbox. I believe the compression types can be easily identified by their filenames.

https://www.dropbox.com/scl/fo/eguc90gnd1t0wgyujpgzu/AKBRfa01NBWoICS4e4lVC2E?dl=0&e=1&rlkey=agaz5cpuib2atd0mthm7hnp5u&st=c6qp22dd

Regarding the file size differences compared to FFmpeg, I suspect this is caused by the audio bitrate.
Another issue is that during video playback, the scene transitions appear blurry.

To address this, I tried using:

compressionMethod: "auto",
maxSize: 800

This helps improve the quality, but it increases the file size much more than necessary.

When I use the manual method with:

compressionMethod: "manual",
maxSize: 800,
bitrate: 300000

(same as the FFmpeg output), the file bitrate but the scene transitions still become blurry.

How can I fix this issue to achieve similar visual quality to FFmpeg?