Search code examples
androidvideo-streamingreact-nativehttp-live-streamingm3u8

Is there a way to add video elements in React Native (for Android)?


I 'm searching the docs, but haven't succeeded yet to find a sample code. I need to play videos from my stream server. Is there any way? or may be react-js does not support videos on android yet.


Solution

  • Yep. Took me a while to figure out, but the solution is easy.

    Use react-native-video component which is cross-platform iOS and Android.

    Implementation: Couldn't be simpler...

    <Video source={{ uri: 'http://STREAM_URL/playlist.m3u8' }} />
    


    Tips for playing live HLS .m3u8 streams on iOS and Android:

    On iOS: Be sure to allow the stream's source domain as an exception domain on App Transport Security Settings on info.plist. While testing, I set "Allow Arbitrary Loads" to YES. Before I did this, the stream didn't come through at all.

    On Android: Use the new exoplayer variant introduced in react-native-video 1.0. Here's how to enable that: #426 (comment)