TheWidlarzGroup / react-native-video

A <Video /> component for react-native
http://thewidlarzgroup.github.io/react-native-video/
MIT License
7.14k stars 2.88k forks source link

[BUG]: androidx.media3.exoplayer.ExoPlaybackException: Unexpected runtime error #4063

Open Ahsanch11 opened 1 month ago

Ahsanch11 commented 1 month ago

Version

6.4.3

What platforms are you having the problem on?

Android

System Version

android 12

On what device are you experiencing the issue?

Real device, Simulator

Architecture

Old architecture

What happened?

A bug happened! ![Uploading Screenshot_1.png…]()

Reproduction

repository link

Reproduction

Step to reproduce this bug are:

seyedmostafahasani commented 1 month ago

@Ahsanch11 would you please upload the image again?

Ahsanch11 commented 1 month ago

Screenshot_1

Ahsanch11 commented 1 month ago

I am building a video reels app and use react-native-video in Flatlist. Working fine on ios but on android the issue is after some time the app crash without notifying any issue and sometimes it shows the above error on first video.

paul-rinaldi commented 1 month ago

I'd suggest also posting the adb logcat log You can create a log file by running:

  1. adb logcat -c (clears the log)
  2. Once you're app is running, adb logcat > bug4063.log
  3. When you notice this playback exception, CTRL+C to quit the logging
  4. Upload the log here

I would be suspicious of the memory usage. Android generally gives more responsibility to us the software developers to write performant code I'd say than Apple. I have seen high memory usage alerts from logcat before using react-native-video and suspect some crashes I've had are when I've used RNV playing in the background and using many other apps as well (physical device).

moskalakamil commented 1 month ago

@Ahsanch11 Could you also attach your video component usage? It would be easier to reproduce this error, thanks!

Ahsanch11 commented 1 month ago

` import Video from 'react-native-video'; import { StyleSheet, Platform } from 'react-native'; import React, { useRef, useCallback, useState } from 'react'; import { useFocusEffect } from '@react-navigation/native';

const VideoPlayer = React.memo(({ item, isStop, activeVideo }) => { const videoRef = useRef(null); const [videoUrl, setVideoUrl] = useState(item.url || '');

useFocusEffect( useCallback(() => { if (!videoRef.current) { return; } if (activeVideo === item._id) { videoRef.current.resume(); } else { videoRef?.current?.pause(); } return () => { if (videoRef.current) { videoRef.current.pause(); } }; }, [activeVideo, item]) );

const handleBuffer = useCallback((b) => { console.log("Buffering...", b) },[])

return ( <Video source={{ uri: videoUrl }} ref={videoRef} onBuffer={handleBuffer} onError={e => console.log("error in video", e)} style={styles.backgroundVideo} resizeMode="cover" repeat={true} paused={isStop || activeVideo !== item._id} fullscreen={Platform.OS == "ios"} fullscreenAutorotate={false} fullscreenOrientation="portrait" // debug={{ // enable: true, // thread: true, // }} bufferConfig={{ minBufferMs: 10000, maxBufferMs: 50000, bufferForPlaybackMs: 2500, bufferForPlaybackAfterRebufferMs: 5000, backBufferDurationMs: 20000, cacheSizeMB: 200, }} /> ); });

const styles = StyleSheet.create({ backgroundVideo: { width: '100%', height: '100%', resizeMode: 'contain', backgroundColor: 'transparent', zIndex: 101, }, });

export default VideoPlayer; ` this is my video component

Ahsanch11 commented 1 month ago

<FlatList data={data} pagingEnabled showsVerticalScrollIndicator={false} onViewableItemsChanged={handleItemChanged} viewabilityConfig={{ itemVisiblePercentThreshold: 50, }} keyExtractor={item => item._id} onEndReached={loadMoreData} onEndReachedThreshold={0.7} renderItem={props => { activeVideoUser.current = props.item; return ( <View style={{ height: Platform.OS == 'ios' ? screenHeight - 80 : screenHeight - 40, width, }}> <VideoPlayer isStop={isStop} item={props.item} activeVideo={activeVideo} /> </View> ); }}

Ahsanch11 commented 1 month ago

bufferConfig={{ minBufferMs: 10000, maxBufferMs: 50000, bufferForPlaybackMs: 2500, bufferForPlaybackAfterRebufferMs: 5000, backBufferDurationMs: 20000, cacheSizeMB: 200, }} removed this buffeConfig and the i didn't see the crash.

Ahsanch11 commented 1 month ago

@moskalakamil @paul-rinaldi the issue resolved of instantly crashing when i removed the buffer config on android but now the app crash after 1 minute almost wothout logging any information.

freeboub commented 1 week ago

@Ahsanch11 Not sure of the status of this ticket on your side... don't you overload the RAM memory ? Not that I wrote a sample with flatlist here: https://github.com/freeboub/react-native-video-flatlist-sample

freeboub commented 1 week ago

I close the issue because there are too much mixed information. Please reopen a new issue with a sample and / all the information in the ticket description.

angelos3lex commented 1 week ago

I have the same issue randomly appearing on android too. We record video using react-native-vision-camera latest version and use the latest version (6.5.0) of this lib too. (Also happened with 6.0.0). Then we crop the video using ffmpeg kit. The video is indeed rendered inside multiple scrollviews. As soon as i restart the app, the problem is not there, and i can see the video. Seems like something random. I will come back if i find something more to add to the conversation.

freeboub commented 1 week ago

@angelos3lex I suspect you have too much <Video views mounted in the same time. each time you mount a <Video it allocates new decoder. Can you check how much views are mounted ? More than 6 is too much. 4 should be OK on modern phones.

angelos3lex commented 1 week ago
{"errorStackTrace":"androidx.media3.exoplayer.ExoPlaybackException: Unexpected runtime error\n\t
at androidx.media3.exoplayer.ExoPlayerImplInternal.handleMessage(ExoPlayerImplInternal.java:701)\n\t
at android.os.Handler.dispatchMessage(Handler.java:102)\n\tat android.os.Looper.loopOnce(Looper.java:230)\n\t
at android.os.Looper.loop(Looper.java:319)\n\tat android.os.HandlerThread.run(HandlerThread.java:67)\n
Caused by: java.lang.IllegalStateException: flush() is valid only at Executing states; currently at Released state\n\n\t
at android.media.MediaCodec.native_flush(Native Method)\n\t
at android.media.MediaCodec.flush(MediaCodec.java:2504)\n\t
at androidx.media3.exoplayer.mediacodec.AsynchronousMediaCodecAdapter.flush(AsynchronousMediaCodecAdapter.java:248)\n\t
at androidx.media3.exoplayer.mediacodec.MediaCodecRenderer.flushCodec(MediaCodecRenderer.java:912)\n\t
at androidx.media3.exoplayer.mediacodec.MediaCodecRenderer.flushOrReleaseCodec(MediaCodecRenderer.java:905)\n\t
at androidx.media3.exoplayer.mediacodec.MediaCodecRenderer.flushOrReinitializeCodec(MediaCodecRenderer.java:868)\n\t
at androidx.media3.exoplayer.mediacodec.MediaCodecRenderer.onPositionReset(MediaCodecRenderer.java:719)\n\t
at androidx.media3.exoplayer.video.MediaCodecVideoRenderer.onPositionReset(MediaCodecVideoRenderer.java:654)\n\t
at androidx.media3.exoplayer.BaseRenderer.resetPosition(BaseRenderer.java:202)\n\t
at androidx.media3.exoplayer.BaseRenderer.resetPosition(BaseRenderer.java:195)\n\t
at androidx.media3.exoplayer.ExoPlayerImplInternal.resetRendererPosition(ExoPlayerImplInternal.java:1445)\n\t
at androidx.media3.exoplayer.ExoPlayerImplInternal.seekToPeriodPosition(ExoPlayerImplInternal.java:1423)\n\t
at androidx.media3.exoplayer.ExoPlayerImplInternal.seekToPeriodPosition(ExoPlayerImplInternal.java:1362)\n\t
at androidx.media3.exoplayer.ExoPlayerImplInternal.seekToInternal(ExoPlayerImplInternal.java:1332)\n\t
at androidx.media3.exoplayer.ExoPlayerImplInternal.handleMessage(ExoPlayerImplInternal.java:547)\n\t
... 4 more\n","errorCode":"21004","errorException":"androidx.media3.exoplayer.ExoPlaybackException: Unexpected runtime error","errorString":"ExoPlaybackException: ERROR_CODE_FAILED_RUNTIME_CHECK"}

That's my error log. @freeboub nope that's not the case as we only display 1 video each time. After pressing some button we replace the displayed video with another, but it's always 1.

angelos3lex commented 1 week ago

I can see in the logs the key word 'seek' and we indeed seek really soon after mounting, so i will disable this to retest.

freeboub commented 1 week ago

@angelos3lex Yes you are right ! you can use source.startPosition to handle it automatically !

freeboub commented 1 week ago

maybe we should block seeking before really available ?! there is maybe a bug in RNV here !

angelos3lex commented 1 week ago

Nice, I'm checking with startPosition. indeed could be a nice addition to not break the player but just ignore the seek or queue it for when it's available

freeboub commented 1 week ago

ticket reopen to fix the early seek issue. thank you @angelos3lex, let me know the result

angelos3lex commented 1 week ago

indeed its not reproduced anymore after i used the source.startPosition and removed seek on mount.

freeboub commented 1 week ago

@angelos3lex Thank you for the feedback, I will to fix the exception anyway ! :)