0

I am struggling to make a frame by frame video player using expo-av.

This is what I actually do:

  • parse video infos with ffmpeg-kit-react-native (FFprobeKit.getMediaInformation(src))
  • calculate manually the frame length
  • when pressing the 'next frame' button, I update video position withvideo.setPositionAsync(position + frameRateLength, { toleranceMillisBefore: 0, toleranceMillisAfter: 0 })

While this is ok for most 30fps video, it is actually very buggy when reading video taken from an iPhone at a high frame rate. I think this is because they have a variable frame rate.

Being able to parse correctly high frame rates is actually what I want my app to do, so i there a way to get around this problem using expo-av or another video library for react native ?

TOPKAT
  • 6,667
  • 2
  • 44
  • 72

1 Answers1

1

Maybe you could try generating thumbnails with expo-video-thumbnails instead of using ffmpeg, there is a method that lets you extract thumbnails at a specific time in milliseconds, so it's quite precise, you can then display the thumbnails as pictures instead of using AV player.

For example if you want a frame every 16ms (approx 60fps)

let thumbnailsArray =[];
for (let i=0, i<yourVideoLength/16, i++) {
  const { uri } = await VideoThumbnails.getThumbnailAsync(yourVideoUrl,{time: 16*i});
  thumbnailsArray.push(uri);
}
naha
  • 46
  • 3