How to Display video thumbnail for videos from local storage of Phone in jetpack compose using Coil

Question

I am trying this code

val painter = rememberAsyncImagePainter(
                model =  ImageRequest.Builder(LocalContext.current)
                    .data(videouri)
                    .fetcherFactory<Any> { data, options, imageLoader ->
                        imageLoader.components.newBuilder()
                            .add(VideoFrameDecoder.Factory())
                            .build()
                            .newFetcher(data, options, imageLoader)?.first
                    }
                    .videoFrameMillis(1000)
                    .build(),
            )
            Image(
                painter = painter,
                contentDescription = "",
                contentScale = ContentScale.Crop,
                alignment = Alignment.Center,
                modifier = Modifier.size(48.dp)
            )

The video uri is

ContentUris.withAppendedId(MediaStore.Video.Media.EXTERNAL_CONTENT_URI, idColumn.toLong())

However videothumbnail doesnot show.

score 1 · Answer 1 · answered May 07 '23 at 10:40

Not sure if you've found a solution already. But best would be to use MediaMetadataRetriever to retrieve your thumbnail and then display the Bitmap using Coil.

First, generate thumbnail from MediaStore URI:

val mediaMetadataRetriever = MediaMetadataRetriever()
var thumbnail: Bitmap? = null
try {
    mediaMetadataRetriever.setDataSource(context, uri)
    thumbnail = mediaMetadataRetriever.getFrameAtTime(2000000) // time in Micros
} catch (e: Exception) {
    if (BuildConfig.DEBUG) {
        e.printStackTrace()
    }
} finally {
    mediaMetadataRetriever.release()
}

And then display using Coil:

AsyncImage(
    model = thumbnail,
    contentDescription = "",
    contentScale = ContentScale.Crop,
    alignment = Alignment.Center,
    modifier = Modifier.size(48.dp)
)

How to Display video thumbnail for videos from local storage of Phone in jetpack compose using Coil

1 Answers1