react-native-yz-vlcplayer icon indicating copy to clipboard operation
react-native-yz-vlcplayer copied to clipboard

RTSP Caching

Open StevenB45 opened this issue 6 years ago • 34 comments

Hello I'm working on a video application with an RTSP stream. Is it possible to reduce latency in another way than :

initOptions={[ "--rtsp-tcp", "--network-caching=" + 0, "--rtsp-caching=" + 0, "--tcp-caching=" + 0, "--realrtsp-caching=" + 0, ]} Thanks.

StevenB45 avatar Jan 15 '19 11:01 StevenB45

maybe you should set 150 --- 300 replace 0

xuyuanzhou avatar Jan 24 '19 03:01 xuyuanzhou

Hello,

Thank you for your answer but I have already tried and it doesn't work though I added this: mediaOptions={{ ':network-caching': 0, ':live-caching': 0, }} and it works very well for iOS, I no longer have a lag at all but it doesn't work on android at all. Do you have any idea? Here is my code: <VlcSimplePlayer style={{position: 'absolute', height: '100%'}} url={streamUrl} videoAspectRatio={wp(100) + ':' + hp(100)} autoAspectRatio={true} isLive={true} autoplay={true} autoReloadLive={true} initOptions={[ "--rtsp-tcp", "--network-caching=" + 0, "--rtsp-caching=" + 0, "--no-stats", "--tcp-caching=" + 0, "--realrtsp-caching=" + 0, ]} hwDecoderEnabled={1} hwDecoderForced={1} mediaOptions={{ ':network-caching': 0, ':live-caching': 0, }} />

Thank you.

StevenB45 avatar Jan 24 '19 08:01 StevenB45

Sorry, I have no idea

xuyuanzhou avatar Jan 30 '19 02:01 xuyuanzhou

Do you have any idea where to look?

StevenB45 avatar Feb 13 '19 13:02 StevenB45

@StevenB45 Hi I solved it by editing his code.

ReactVlcPlayerView.java

m.addOption(":network-caching=150"); // line 394
mMediaPlayer.setMedia(m);
mMediaPlayer.setScale(0);

jbts6 avatar Mar 21 '19 07:03 jbts6

@StevenB45 Maybe you can use my fork.

My Fork

jbts6 avatar Mar 21 '19 08:03 jbts6

Hello,

Thank you for this answer I will try!

Thank you very much!!!!

StevenB45 avatar Mar 21 '19 08:03 StevenB45

Hello,

Thank you for this answer I will try!

Thank you very much!!!!

If you use my fork, you should use mediaOptions.

<VLCPlayer
      style={{flex: 1}}
       mediaOptions={[
          ":network-caching=300"
        ]}
      source={{uri: Config.rtsp}}
     onPlaying={this.onPlaying}
 />

jbts6 avatar Mar 21 '19 08:03 jbts6

Hello, I tried your solution but it doesn't work. In your ReactVlcPlayerView.java, line 394 is commented and latency is not reduced with android.

I send motion commands to a camera that broadcasts RTSP and I try to reduce the latency between pressing a button and displaying the video. This works on iOS by modifying ':network-caching': 0, ':live-caching': 0, directly into the module.

I use the VlcSimplePlayer component.

Thanks

StevenB45 avatar Mar 22 '19 08:03 StevenB45

@fh345392977 Thank you, i've tried your fork and it works very well on android, but i have a problem : on iOS: initType={2} not working like the original initOptions={[ "--network-caching=" + 30 ]} is not working. On android, the video is displayed in 3-4 seconds with this setting, but on iOS it doesn't seem to work (10-15 seconds).

Have you an idea?

Thank you so much for your work!

StevenB45 avatar Apr 01 '19 16:04 StevenB45

Hi,

working with this code on iOS:

<VlcSimplePlayer style={{position: 'absolute', height: '100%'}} url={streamUrl} videoAspectRatio={wp('100%') + ':' + hp('100%')} autoAspectRatio={true} isLive={true} autoplay={true} autoReloadLive={true} initType={2} initOptions={[ '--network-caching=' + 30, ]} mediaOptions={{ ':network-caching': 30, }} />

But, the application crashes... I open a first stream, everything goes well, I have the video in 3-4 seconds but once I open this stream or another one after the second or third time, the application freezes and crashes. No problem with an initType={1} I don't understand...

StevenB45 avatar Apr 01 '19 17:04 StevenB45

@StevenB45 Actually I edit some code in my fork, I will check it again when I'm free this week.

jbts6 avatar Apr 09 '19 05:04 jbts6

@fh345392977 Thank you so much! I do not have any errors in the log, I don't understand. Thank you again for your answers. !

StevenB45 avatar Apr 09 '19 06:04 StevenB45

Hi @fh345392977 , @xuyuanzhou .

How to reproduce my problem :

  • git clone https://github.com/StevenB45/vlc-crash-test.git
  • Download MobileVLCKit.framework
  • Copy file into 'vlcKit' folder
  • yarn install
  • Open project with Xcode, and set 'iOS Deployment Target' to 9.3
  • Run the project
  • Click on "PLAY" and "GO BACK"
  • After once or twice tries the app crashes
  • if you set initType={1} in "App.js", no problems but `initOptions" won't work.

error

Thanks 🙏

StevenB45 avatar Apr 15 '19 09:04 StevenB45

@StevenB45 About ios crash, you can try this. https://github.com/xuyuanzhou/react-native-yz-vlcplayer/issues/34#issuecomment-472399327

jbts6 avatar Apr 17 '19 07:04 jbts6

@fh345392977 thank you very much. The test build of application that I'm working on does not crash anymore but the player does not close properly. Sound is being reproduced in the background on different channels.

StevenB45 avatar Apr 19 '19 09:04 StevenB45

@StevenB45 I also tried bu commenting out code mention by @fh345392977 , it worked but had player not closing issue , what I did for this was, I did save player object to a reference and pause the player when un mounting the component and setting null to player object, It solve the issue but still there is a memory stacking issue memory does not create when close the player

vlcPlayer;

componentWillUnmount() {
       /**
         * Pause player when un-mounting the component to resolve a VLC bug
         *
         * TODO: even though player got paused memory get stacking , find a solution to clean memory
         */
        if(Platform.OS === 'ios') {
            this.vlcPlayer.pause();
            this.vlcPlayer = null;
        }
    }

render() {
    <View>
         <VlcSimplePlayer
                                    ref={ref => (this.vlcPlayer = ref)}
                                    url={streamUrl}
                                    autoplay={true}
                                    isLive={true}
                                    autoReloadLive={true}
                                    style={{width: "100%", height: 200, marginTop: 30}}
                                    onStartFullScreen={this.onStartFullScreen}
                                    onCloseFullScreen={this.onCloseFullScreen}
                                    initType={2}
                                    hwDecoderEnabled={1}
                                    hwDecoderForced={1}
                                    initOptions={[
                                        "--no-audio",
                                        "--rtsp-tcp",
                                        "--network-caching=" + 150,
                                        "--rtsp-caching=" + 150,
                                        "--no-stats",
                                        "--tcp-caching=" + 150,
                                        "--realrtsp-caching=" + 150,
                                    ]}
                                />
    </View>
}

cchamikara avatar May 11 '19 01:05 cchamikara

Thank you @cchamikara, we have recompiled the MobileVLCKit.framework to directly integrate the cache inside and now it's working for me.

StevenB45 avatar May 13 '19 07:05 StevenB45

@StevenB45 could you please share how did you do that ?

cchamikara avatar May 13 '19 07:05 cchamikara

@cchamikara we have followed the documentation : VLCKit. It's very complicated to compile without errors.

StevenB45 avatar May 13 '19 08:05 StevenB45

@StevenB45 have you integrate "--rtsp-tcp" along with other init options directly as well ? if so will you be able to share compiled framework with me ? as I'm also facing same issue as you and above fix cause to a memory stacking

cchamikara avatar May 13 '19 08:05 cchamikara

@cchamikara we have added @"--rtsp-tcp", @"--network-caching=150", @"--rtsp-cachin=150", @"--clock-jitter=150", @"--tcp-caching=150", @"--realrtsp-caching=150", into VLCLibrary.m

StevenB45 avatar May 13 '19 08:05 StevenB45

@StevenB45 thanks will give it a try , did you use master branch of VLCKit and ran compileAndBuildVLCKit.sh command ? is that it ? (because VLCKit wiki says to run ./compileAndBuildMobileVLCKit.sh -f but that bash file is not there )

cchamikara avatar May 13 '19 09:05 cchamikara

@cchamikara I sent you an email to download the file, did you receive it? We used "3.0" branch.

StevenB45 avatar May 13 '19 09:05 StevenB45

@StevenB45 I got it thank you very much

cchamikara avatar May 13 '19 09:05 cchamikara

@cchamikara : <VlcSimplePlayer style={{position: 'absolute', height: '100%'}} url={streamUrl} videoAspectRatio={wp('100%') + ':' + hp('100%')} isLive={true} autoplay={true} autoReloadLive={true} mediaOptions={{ ':network-caching': {cameraCache}, ':live-caching': {cameraCache}, }} />

StevenB45 avatar May 13 '19 09:05 StevenB45

I faced the same problem in here is my solution:

                <VLCPlayer
                    style={{ width:"100%", height:'100%' }}
                    source={{ uri : 'rtsp://...' }}
                    mediaOptions={{
                        ':network-caching': 150,
                        ':live-caching':    0,
                        ':file-caching':    0,
                        ':live-caching':    0,
                        ':network-caching': 150,
                        ':clock-jitter':    0,
                        ':clock-synchro':   0,
                    }}
                    initType={2}
                    initOptions={[
                        "--no-audio",
                        "--no-stats",
                        "--rtsp-tcp",
                    ]}
                />

MaximusBaton avatar Jul 27 '19 15:07 MaximusBaton

@cchamikara : <VlcSimplePlayer style={{position: 'absolute', height: '100%'}} url={streamUrl} videoAspectRatio={wp('100%') + ':' + hp('100%')} isLive={true} autoplay={true} autoReloadLive={true} mediaOptions={{ ':network-caching': {cameraCache}, ':live-caching': {cameraCache}, }} />

Hi Steven, Have you resolved the iOS crash issue, I have built MobileVLCKit.framework by myself, the crash issue is the same!

rich1111 avatar Sep 05 '19 08:09 rich1111

@cchamikara I sent you an email to download the file, did you receive it? We used "3.0" branch.

can u send me the correct libary ?

lp4298707 avatar Dec 10 '19 11:12 lp4298707

我在这里遇到的问题是我的解决方案:

                <VLCPlayer
                    style={{ width:"100%", height:'100%' }}
                    source={{ uri : 'rtsp://...' }}
                    mediaOptions={{
                        ':network-caching': 150,
                        ':live-caching':    0,
                        ':file-caching':    0,
                        ':live-caching':    0,
                        ':network-caching': 150,
                        ':clock-jitter':    0,
                        ':clock-synchro':   0,
                    }}
                    initType={2}
                    initOptions={[
                        "--no-audio",
                        "--no-stats",
                        "--rtsp-tcp",
                    ]}
                />

@MaximusBaton It works, but there is no sound in the hard interpreted video. I will change "inittype" to "1" to have sound

A-ANing avatar Dec 19 '19 03:12 A-ANing