1

I'm working on an app where one part of the process is shooting a video, then uploading it. I'm using react-native-video to display the preview after the user has finished recording, and react-native-camera for the capturing process. I also use react-navigation to move between screens.

Currently I can get to the preview screen and set the video component's source uri from Redux. However, there is no player to be seen. The uri is in format "file:///path/video.mp4", so apparently it should be in the app cache as intended.

First the user is presented with a camera, where s/he can capture the video.

const recordVideo = async () => {
  if (camera) {
     const data = await camera.current.recordAsync()
     if (data) {
        dispatch(saveVideo(data)) <-- CONTAINS THE URI
        navigation.navigate(CONFIRM)
     }
  }

When stopRecording() is called, the promise obviously resolves and the video's URI will be dispatched to Redux. Afterwards we navigate to the "confirmation screen", where the user can preview the video and choose whether to shoot another or go with this one.

My problem is, I can't get that preview video to play at all. I think I've tried pretty much everything within my power by now and I'm getting really tired of something so seemingly simple being so overly difficult to do. I've gotten the video to play a few times for some odd reason, so it's not the player's fault. At best what I've achieved is show the preview once, but when you go back and shoot another, there's no video preview anymore. Also, the "confirm" screen loads photos normally (that were taken in the same manner: camera -> confirm), but when it's the video's turn, it just doesn't work. The video component's onError handler also gives me this: {"error": {"extra": -2147483648, "what": 1}} which seems like just gibberish.

PS. yes, I've read through every related post here without finding a proper solution.

Jesse Kämäräinen
  • 57
  • 6

1 Answers1

0

Use Exoplayer

Instead of using the older Media Player on Android, try using the more modern Exoplayer. If you're on React Native 0.60+, you can specify this in your react-native.config.js by doing the following:

module.exports = {
  dependencies: {
    "react-native-video": {
      platforms: {
        android: {
          sourceDir: "../node_modules/react-native-video/android-exoplayer"
        }
      }
    }
  }
};

I was experiencing the same issue and this solution worked for us. Note, we're only supporting Android 5+ so not sure if this will work with devices older than that.

https://github.com/react-native-video/react-native-video/issues/1747#issuecomment-572512595

Joshua Pinter
  • 45,245
  • 23
  • 243
  • 245