Quality of PNG images is lost in a video created with Media3 Transformer and colors are darker

[yuriikonovalov]

Quality of PNG images is lost in a video created with Media3 Transformer and colors are darker

[droid-girl]

Hi @yuriikonovalov, could you share your Transformer export settings, frame rate or any other parameters you set in Transformer?

[yuriikonovalov]

Hi @droid-girl, here are MediaItem and Transformer builders. Just in case it matters, the PNG frame is created via ffmpeg library from a webm video.

Media items:

    val backgroundMediaItem = MediaItem.Builder()
        .setUri(backgroundUri)
        .setMimeType(MimeTypes.IMAGE_PNG)
        .build()

    val backgroundEditedMediaItem = EditedMediaItem.Builder(backgroundMediaItem)
        .setDurationUs(6_000_000)
        .setFrameRate(30)
        .setEffects(
            Effects(
                listOf(),
                listOf(Presentation.createForWidthAndHeight(1080, 1920, Presentation.LAYOUT_SCALE_TO_FIT_WITH_CROP))
            )
        )
        .build()

    val frameMediaItem = MediaItem.Builder()
        .setUri(frameUri)
        .setMimeType(MimeTypes.IMAGE_PNG)
        .build()

    val frameEditedMediaItem = EditedMediaItem.Builder(frameMediaItem)
        .setDurationUs(6_000_000)
        .setFrameRate(30)
        .setEffects(
            Effects(
                listOf(),
                listOf(Presentation.createForWidthAndHeight(1080, 1920, Presentation.LAYOUT_SCALE_TO_FIT_WITH_CROP))
            )
        )
        .build()

Video composition:

    val backgroundSequence = EditedMediaItemSequence(backgroundEditedMediaItem)
    val frameSequence = EditedMediaItemSequence(frameEditedMediaItem)

    val composition = Composition.Builder(frameSequence, backgroundSequence)
        .setEffects(
            Effects(
                listOf(),
                listOf(
                    Presentation.createForWidthAndHeight(1080, 1920, Presentation.LAYOUT_SCALE_TO_FIT_WITH_CROP),
                    FrameDropEffect.createDefaultFrameDropEffect(30f),
                )
            )
        )
        .build()

Transfromer settings:

    val transformer = Transformer.Builder(context)
        .setVideoMimeType(MimeTypes.VIDEO_H264)
        .setAudioMimeType(MimeTypes.AUDIO_AAC)
        .setEncoderFactory(DefaultEncoderFactory.Builder(context.applicationContext).build())
        .addListener(transformerListener)
        .build()

    transformer.start(composition, outputFilePath)

[yuriikonovalov]

Here is also a video created from same background and frame PNG images but using ffmpeg.

ffmpeg.mp4

[droid-girl]

Thank you for sharing this information. There might be several reasons for this behaviour.
@tof-tof: I wonder if downscaling is producing this artifact and a downscaling algorithm would solve this problem? or is there another reason?

[tof-tof]

Hmmm not completely sure. sounds a bit like #1050 which is being solved by upcoming work, we'll see if that solves this as well

[yuriikonovalov]

@tof-tof I guess #1050 fixes the color problem but not the quality problem. Maybe the reason for that is the bitrate of the output video? I compared the original video (size - 1080:1920, so scaling should not be the case) with the output video. The bitrate of the original video is 13815kbps. The bitrate of the output video is 8582kbps.

The original video and the output video.

[droid-girl]

As an experiment, you can try setting bitrate value as described here.
Assigning this issue to @ychaparov for his input