ExoPlayer

[AndrewJack]

Implementation of react-native-video using Google's ExoPlayer library

View the ExoPlayer README to see the new props and the props that still need to be implemented.

This also adds a buffering callback to iOS and ExoPlayer Android.

Long term I am hoping we can move to ExoPlayer as the default, if not sooner.

p.s. if you need any help maintaining this project I'd be happy to help out on the Android side.

[AndrewJack]

cc @mattapperson

@corbt - The ExoPlayer PR you were asking for

[AndrewJack]

Comment out react-native-video and uncomment react-native-video-exoplayer to test

[AndrewJack]

Change video sources to test dash

[mattapperson]

@AndrewJack THANK YOU FOR THIS

[corbt]

whoo!!

…

On Wed, Jan 11, 2017 at 4:51 AM Matt Apperson ***@***.***> wrote: @AndrewJack <https://github.com/AndrewJack> THANK YOU FOR THIS — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#426 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAKxKhV0XnChfimOxxqzq21tSbY5vhqDks5rRNBugaJpZM4LU2vn> .

[jaggerwang]

@AndrewJack Does it the default player on Android, or need to specify explicitly?

[AndrewJack]

@jaggerwang

You'll need to compile the react-native-video-exoplayer project instead of the react-native-video then it should work.

Change in app/build.gradle:

- compile project(':react-native-video')
+ compile project(':react-native-video-exoplayer')

Change in settings.gradle:

+ include ':app',
-        ':react-native-video',
+        ':react-native-video-exoplayer'

- project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
+ project(':react-native-video-exoplayer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

[jaggerwang]

@AndrewJack Thanks! It's much better performance than the old one. But when playing, change the video source url(different rate) has no effect. Does the api compatible with the old?

[AndrewJack]

@jaggerwang that's not implemented yet, https://github.com/react-native-community/react-native-video/blob/master/android-exoplayer/README.md

Exoplayer doesn't support it out of the box.
google/ExoPlayer#26 (comment)

[jaggerwang]

@AndrewJack , I'm not mean to let the player to switch video stream rate automatically. For every video in my app, there are low, middle and high quality urls. When user select a different quality, app will pass the new url to player, but player is still playing the old one. Does it need to recreate the player?

[AndrewJack]

Oh ok, I'll test switching sources, that should work.

I'm guessing you aren't using an adaptive stream (SS, HLS, or DASH)? which would switch bitrate automatically.

[jaggerwang]

Yes, not adaptive.

[jaggerwang]

@AndrewJack , sometimes the video did not auto play when first open player, already set paused to false. But when change paused to true and change it back again, the video will play.

It seems like it's related to the loading time of the online video. If the loading time is very short, about less than 1s, the video will auto play.

[note89]

Works much better except it seems muted={true} does not seem to work.
it works if you flip it
muted={this.state.muted}
true -> false -> true
but not when the video starts.

on Android
A working hack is

        InteractionManager.runAfterInteractions(() => {
            _.delay(() => {
                this.setState({muted: this.props.muted});
            }, 1);
        });

[note89]

Another issue seems to be if i run the player in a modal video gets very dark for some reason.

[davidstefando]

@AndrewJack I try to change video source state, but the player doesn't keep playing the old source unless I force to re render it. Am I miss something?

<Video
       style={styles.video}
       source={{"uri" : this.state.videoSource}}
       paused={false}
       muted={false}
               />

After trying to change videoSource state, video won't change. I Use HLS .m3u8 as video source.

I run react-native-video 1.0.0 & react-native v0.42

[AndrewJack]

@davidpratama that's fixed in this PR #502

[dgurns]

Thanks AndrewJack, the exoplayer variant is working well for me with live HLS streams on Android.

[manjeets12]

will I be able to play RTSP videos on android using this solution?

[AndrewJack]

@manjeets12 looks like exoplayer doesn't support it google/ExoPlayer#55

[manuTro]

compiling the react-native-video-exoplayer project instead of the react-native-video now I have authentication problems with .ts files and in my log
com.google.android.exoplayer2.upstream.HttpDataSource$InvalidResponseCodeException: Response code: 401. and I cannot see the cookies. Without exoplayer I was able to stream the video. Is there a way to fix it? Is it a problem of .ts files?

[johndanek]

When I try converting react-native-video to react-native-video-exoplayer as detailed above (#426 (comment)) I now receive the following error when I try to run react-native run-android

:app:transformClassesWithDexForDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:transformClassesWithDexForDebug'.
> com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: com.android.dex.DexException: Multiple dex files define Landroid/support/v4/accessibilityservice/AccessibilityServiceInfoCompat$AccessibilityServiceInfoVersionImpl;

Any idea how to prevent this error?

[manuTro]

@johndanek Did you put the strings into settings.grandle in the same order as described above?

[johndanek]

@manuTro I'm not sure of the order you're referring to. My settings.gradle looks like:

rootProject.name = 'Foo'

include ':app'

include ':react-native-video-exoplayer'
project(':react-native-video-exoplayer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
include ':react-native-orientation'
project(':react-native-orientation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-orientation/android')

[johndanek]

@manuTro If you create a new blank react-native project and attempt to integrate the exoplayer, can you get it to work? I cannot.

[manuTro]

@johndanek are you sure you linked it properly? is it working without exoplayer?

[johndanek]

@manuTro Yep, it works (though it's a bit slow) when using it without exoplayer.

[iamronsuez]

Hi there i'm having this issue #697 when I try to integrate exoplayer, i modified the conf as you guys told but it seems that i'm missing something yet.

[seppemarotta]

I've made the integration so far, however callbacks are not triggering. The only callback that it's triggering its the onProgress , onLoadStart / onError are not working. When there are connection issues in streamer's or user's end , onError callback it's not working .

[viperfx]

I get a similar error to @johndanek after following @AndrewJack instructions

here is the stack trace

:app:compileDebugJavaWithJavac
:app:compileDebugJavaWithJavac - is not incremental (e.g. outputs have changed, no previous execution, etc.).
:app:compileDebugNdk UP-TO-DATE
:app:compileDebugSources
:app:transformClassesWithDexForDebug
Running dex in-process requires build tools 23.0.2.
For faster builds update this project to use the latest build tools.
Dex: Error converting bytecode to dex:
Cause: com.android.dex.DexException: Multiple dex files define Landroid/support/v4/app/NavUtilsJB;
    UNEXPECTED TOP-LEVEL EXCEPTION:
    com.android.dex.DexException: Multiple dex files define Landroid/support/v4/app/NavUtilsJB;
        at com.android.dx.merge.DexMerger.readSortableTypes(DexMerger.java:596)
        at com.android.dx.merge.DexMerger.getSortedTypes(DexMerger.java:554)
        at com.android.dx.merge.DexMerger.mergeClassDefs(DexMerger.java:535)
        at com.android.dx.merge.DexMerger.mergeDexes(DexMerger.java:171)
        at com.android.dx.merge.DexMerger.merge(DexMerger.java:189)
        at com.android.dx.command.dexer.Main.mergeLibraryDexBuffers(Main.java:502)
        at com.android.dx.command.dexer.Main.runMonoDex(Main.java:334)
        at com.android.dx.command.dexer.Main.run(Main.java:277)
        at com.android.dx.command.dexer.Main.main(Main.java:245)
        at com.android.dx.command.Main.main(Main.java:106)

:app:transformClassesWithDexForDebug FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:transformClassesWithDexForDebug'.
> com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.ExecutionException: java.lang.UnsupportedOperationException

[AndrewJack]

@viperfx see iamronsuez/rn-video#1

Update your compileSdk, buildTools and support library to the same version that exoplayer uses.

[viperfx]

Thanks. Its working now.

[coniel]

@johndanek did you find a solution? I'm having the same issue.

[johndanek]

@coniel I ended up giving up because of other problems down the line, but I think specifying compile 'com.android.support:appcompat-v7:25.3.1' in build.gradle and making sure all of my projects and libraries were on compileSdkVersion 25. I believe this got me past that error.

[Komeyl94]

@johndanek I had the same problem that I fixed by adding the following line:

org.gradle.jvmargs=-Xmx1536M

to the gradle.properties file

[Yessengerey]

I am very new to React Native, and especially new to Android development.

I had the same problem as @johndanek after following @AndrewJack instructions. I believe I also updated my compileSDK and buildtools to the appropriate versions. I've also changed the targetSdkVersion to 23.

The build succeeds, however, the second I open the component that has react-native-video inside it, the application crashes, closes and gives out a warning message saying that unfortunately, my app has stopped working.

And this is what I get in the log:

03-02 04:44:59.566 5809-5837/com.holanews I/ReactNativeJS: {}, 'DATA STARTED TO LOAD!!!'
03-02 04:44:59.700 5809-5857/com.holanews W/VideoCapabilities: Unrecognized profile/level 0/0 for video/mpeg2
03-02 04:44:59.700 5809-5857/com.holanews W/VideoCapabilities: Unrecognized profile/level 0/2 for video/mpeg2
03-02 04:44:59.700 5809-5857/com.holanews W/VideoCapabilities: Unrecognized profile/level 0/3 for video/mpeg2
03-02 04:44:59.706 5809-5857/com.holanews I/VideoCapabilities: Unsupported profile 4 for video/mp4v-es
03-02 04:44:59.716 5809-5862/com.holanews I/OMXClient: Using client-side OMX mux.
03-02 04:44:59.729 5809-5862/com.holanews D/SoftAVCDec: Number of CPU cores: 2
03-02 04:44:59.733 5809-5861/com.holanews I/MediaCodec: [OMX.google.h264.decoder] setting surface generation to 5948417
03-02 04:44:59.734 5809-5833/com.holanews D/EGL_emulation: eglMakeCurrent: 0xeb6f1820: ver 3 0 (tinfo 0xf0bcdbb0)
03-02 04:44:59.738 5809-5862/com.holanews W/OMXNodeInstance: [1:google.h264.decoder] component does not support metadata mode; using fallback
03-02 04:44:59.738 5809-5862/com.holanews E/ACodec: [OMX.google.h264.decoder] storeMetaDataInBuffers failed w/ err -1010
03-02 04:44:59.740 5809-5862/com.holanews D/SoftAVCDec: Number of CPU cores: 2
03-02 04:44:59.755 5809-5863/com.holanews D/SoftAVCDec: Number of CPU cores: 2
03-02 04:44:59.791 5809-5866/com.holanews I/OMXClient: Using client-side OMX mux.
03-02 04:44:59.834 5809-5868/com.holanews I/SoftAAC2: limiting to stereo output
03-02 04:44:59.835 5809-5868/com.holanews I/SoftAAC2: Reconfiguring decoder: 0->48000 Hz, 0->2 channels
03-02 04:45:00.120 5809-5861/com.holanews A/libc: Fatal signal 11 (SIGSEGV), code 2, fault addr 0xd369b000 in tid 5861 (MediaCodec_loop)

This is what I have in my build.gradle:

compileSdkVersion 25
    buildToolsVersion "25.0.3"

    defaultConfig {
        applicationId "com.holanews"
        minSdkVersion 16
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
*
*
// some other stuff
*
*
dependencies {
    compile project(':react-native-video-exoplayer')
    compile project(':react-native-vector-icons')
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.facebook.react:react-native:+"  // From node_modules
    compile "com.android.support:appcompat-v7:25.3.1"
}

And this is what I have in my settings.gradle:

rootProject.name = 'HolaNews'
include ':react-native-video-exoplayer'
project(':react-native-video-exoplayer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

include ':app'

I have also tried @Komeyl94 suggestion, but it did not solve anything.
Please point me to what am I doing wrong?

[pawelbrzezinski]

same as above

[acollazomayer]

@AndrewJack hi andrew, i follow all your steps. However i dont know if the exoplayer is working or not. I have a dash stream and the application is still throwing the onError event.

[ramu534]

Hi,
I am trying to build cross-platform app that should work IOS, Android and Web too. Is react-native-video work on web platform? Any alias configuration for react-native-web ?