Continuous Real-Time Video Frame Rendering Issues in Expo React Native Custom Video Player

Question

I am developing a custom video player in an Expo React Native app and encountering a persistent issue related to real-time video frame rendering when sliding a custom slider control. In my implementation, I've used the setPositionAsync method from Expo's expo-av package to update the video playback position as the slider moves.

My goal is to achieve smooth, real-time frame rendering as the user drags the slider, allowing them to accurately seek to specific points in the video.

In my previous implementation, where Redux was used to manage the state of the video player on every slider movement, I did NOT encounter any such issues. However, aiming to optimize performance and responsiveness, I switched to local state management for handling the playback position. Since this change, I've been consistently facing errors whenever the slider is moved for real-time frame updates.

Errors Encountered: Repeatedly, as the slider is dragged, the following error message is rapidly logged:

 ERROR  Error setting video position: [Error]
 ERROR  Error setting video position: [Error]
 ERROR  Error setting video position: [Error]
 ERROR  Error setting video position: [Error]
 ERROR  Error setting video position: [Error]
 ERROR  Error setting video position: [Error]
 ERROR  Error setting video position: [Error]
 ERROR  Error setting video position: [Error]

The details of this error are as follows:

Error setting video position: 
Object
code: "E_AV_SEEKING"
jsEngine: "hermes"
message: ""
stack: "Error\n    at construct (native)\n    at apply (native)\n    at _construct (http://10.0.0.147:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:4485:28)\n    at Wrapper (http://10.0.0.147:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:4443:25)\n    at construct (native)\n    at _createSuperInternal (http://10.0.0.147:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:123803:322)\n    at call (native)\n    at CodedError (http://10.0.0.147:8081/node_modules/expo/AppEntry.bundle//&platform=ios&dev=true&hot=false&lazy=true:123816:26)"
__proto__: Object
constructor: ƒ ()
jsEngine: "hermes"
__proto__: Object
constructor: ƒ ()
jsEngine: "hermes"
__proto__: Object

Relevant Code Snippet: Here's the relevant part of my code where the issue occurs:

// Throttle function to limit frequent calls to setPositionAsync
const throttledSetPosition = useCallback(_.throttle(async (value) => {
  if (!isSeeking) {
    setIsSeeking(true); // Seeking is in progress
    try {
      await videoRef.current.setPositionAsync(value * 1000);
    } catch (error) {
      console.error("Error setting video position:", error);
    } finally {
      setIsSeeking(false); // Reset seeking status
    }
  }
}, 500), [isSeeking]); // Throttle time set to 500ms

// Handler for slider change events
const handleSliderChange = (value) => {
  setLocalPlaybackPosition(value); // Updates local state immediately for responsive UI
  throttledSetPosition(value); // Calls throttled function to update video position
};

This happens despite trying various approaches like throttling and debouncing the setPositionAsync calls. The error persists regardless of the throttle/debounce duration set.

What I Tried: Switching from Redux state management to local state management for the playback position. Implementing both debouncing and throttling (ranging from 250ms to 500ms and higher) on the setPositionAsync method calls. Adjusting the throttle/debounce duration to various intervals.

Expected vs. Actual Results: I expected the transition to local state management to maintain or improve the responsiveness of the real-time video frame rendering while dragging the slider. However, the actual result is a consistent error whenever the slider is moved, regardless of the throttle/debounce settings.

Key Aspects of the Code: The video player is developed using Expo's expo-av package. Local state is used for managing the playback position. setPositionAsync is used to update the video position. Throttling/debouncing has been applied to setPositionAsync calls.