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

android video-streaming react-native http-live-streaming m3u8
Farshid Ashouri picture Farshid Ashouri · Dec 10, 2015 · Viewed 7.2k times · Source

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.

Answer

dgurns picture dgurns · Apr 2, 2017

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)

Related questions

Streaming video from Android camera to server

I've seen plenty of info about how to stream video from the server to an android device, but not much about the other way, ala Qik. Could someone point me in the right direction here, or give me some advice …

Read More
how to play video from url

I am beginner in android development and try to play video from link. But it's giving error "sorry,we can't play this video". I tried so many links but for all links its show same error. My code is the …

Read More
Live-stream video from one android phone to another over WiFi

I have searched the internet for days now on how to implement a video streaming feature from an android phone to another android phone over a WiFi connection but I can't seem to find anything useful. I looked on android …

Read More