Multiple Video Components

I’m rendering multiple Video components in a FlatList and lazily unloading/loading them using unloadAsync and loadAsync depending on their visibility within the list. I’m running into some errors when a user scrolls far into the list however:

14:58:53 [exp] Error The decoder required for this media is busy. - The AVPlayerItem instance has failed with the error code -11839 and domain “AVFoundationErrorDomain”.

This fires about twice and then the app crashes. I can’t seem to find anything online. Any idea why this would occur?

1 Like

Alrighty, found a jank workaround but it works for lazy loading large large amounts of videos in a FlatList.

Here’s the workaround:

  1. Keep track of the visible videos using the FlatList visibility information
  2. Pass down an “isVisible” prop or something similar to the elements being rendered
  3. Keep a posterImage rendered all the time in an component
  4. When the isVisible prop is true, add an absolutely positioned element on top of the Image, otherwise do not render a element

Essentially I think that there are limits to how many AVMediaObjects can be instantiated at the same time. Unfortunately Expo’s unloadAsync method doesn’t seem to unmount the media object (just removes the data from memory). This means when we have lists of large amounts of video the iOS device will crash. By only rendering the element (and thus the AVMediaObject) when the element is visible and unmounting it if not.

Still run into some random errors related to mounting/unmounting the component so totally open to any suggestions if someone has them!

1 Like

I’ve experienced the exact same issue, causing me to have to detach. Here’s a snack I just created:

In my snack, I showcase how ErrorBoundaries don’t work in this case. Additionally, after detaching and using react-native-video, my app never crashes anymore. Even if I lift the 3 rendered video restriction (mentioned below), the app still functions. Only a handful of videos will actually display at any given time, but the app won’t crash.

My more-stable-but-still-unacceptable-number-of-crashes solution was to only ever render up to 3 or 4 videos a time. All other videos would be un-rendered and replaced with a static image. This was all managed with Mobx. Unfortunately, there were still crashes, especially when switching between screens.

My gut tells me that crashes still happened because React simply won’t give us enough timing control over when videos render/unrender, so despite our best efforts, we still can’t guarantee that only X videos are rendered at any given time. In other words, it might not be possible to fully wait for a video to unrender before we think it unrenders.

This is a HUGE issue for me, as I’ve had to detach. As such, my push notifications no longer work through Expo (expected). However, what was unexpected is the fact that setting up PushNotificationIOS via the official React docs (in a fresh CRNA detached repo) simply doesn’t work. Xcode complains about missing headers. I’ve also tried using other libs like react-native-onesignal, but I run into similar issues.

I’ll be filing the push notifications bug under separate cover.

Hey there, sounds like some nasty race condition when managing the mounting/unmounting AV instances. I’ve opened an issue to track:

@sjchmiela do you have any intuition about what’s going on here?

Yup, that’s exactly how I tackled this problem in the past when I had to render a list of videos that would auto play when visible. (Pass down some prop that enables rendering of the Video component.)

I’ll investigate what is happening. :slight_smile: -11839 error code means

AVErrorDecoderTemporarilyUnavailable — The appropriate decoder is currently not available. Source

so I guess the crashes may be connected to rendering too many Video elements. I’ll see what we can do about it.

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.