React-native-video: HLS streaming

[doodirock]

I seem to be seeing some conflicting reports about working with HLS streaming sources. So will playing live streams via HLS working with react-native-video?

[vmseba]

@doodirock I was facing this issue yesterday and was able to make it work in iOS with a few changes to the code after reading the AVFoundation Programming Guide.
I haven't looked into Android yet.

[doodirock]

Interesting @vmseba have an code examples handy?

[vmseba]

@doodirock Yeah, a quick hack as a poc would be to change RCTVideo.m like this:

if (isNetwork) { return [AVPlayerItem playerItemWithURL:url]; }

That should work with the test strem.
<Video source={{uri: "http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"}} ... />

Let me know if that works for your use case. Don't forget to restart the app after the change.

[Elektro1776]

@doodirock Is the exoPlayer used out of the box with the Video Component or do i have to explicitly import it somehow
?

[brikendr]

Hello,
I kinda have a similar use case where I use ffmpeg to capture the webcam and encode a MPEG video which is sent over to an HTTP server which in turn uses web sockets to boradcast the stream to multiple connected clients. Would it be possible to somehow display the encoded mpeg video on the react-native-video component? I get the stream on the android app through websockets, but i am kinda stuck on how to display it on the video component. Any suggestions ?

[vmseba]

@brikendr did you check this SO thread http://stackoverflow.com/questions/22561936/method-to-consume-web-socket-video-stream-with-avfoundation

[brikendr]

@vmseba thanks for your comment. Unfortunately i am only able to develop for the Android Platform for now, so i am trying to make it work there first. However, on the thread somebody suggests to write the stream to an MP4 file, so i will try this and see how it works. The idea of serving an HLS stream over an HTTP server sounds more efficient but i haven't checked how that might work with ffmpeg and capturing live camera feed.

[vmseba]

@brikendr you could use ffmpeg to send the stream into an rtsp server and stream from there.

• https://www.ffmpeg.org/ffmpeg-protocols.html#rtsp

Also, you could try these:

• https://github.com/Jalle19/node-ffmpeg-mpegts-proxy
• https://github.com/arut/nginx-rtmp-module

[Phenek]

Hey,

In the same way could react-native-video can support HDS, HSS streaming?
@vmseba Do you have the plan to do a pull request for HLS on IOS version?

regards,

[vmseba]

@clovs I haven't tried it with hss, I can try it and let you know if it works. Let me know if you have a sample stream.
I can do a pull request if it helps someone, I still need to think about the best way to configure the player, maybe something like this would work?

<Video source={{uri: "background"}}   // Can be a URL or a local file.
       ref={(ref) => {
         this.player = ref
       }}                                      // Store reference
       hls={true} // 
       .....
        />

[Phenek]

It can be a good idea!
You can get some hss link here.
In addition do you know of any DRM support of Fairplay and Widevine in react-native-video?

[vmseba]

@clovs I got it to play the HLS Clear samples in here. As I understand it, you can play hss streams with AVFoundation but you need to transmux the stream in order to conform with Apple HLS protocol.
You also need to specify the correct format when you load the url in the video player like this (format=m3u8-aapl).

I haven't looked into DRM support, sorry I can't help you there.

[dgurns]

hi vmseba, when you mention "You also need to specify the correct format when you load the url in the video player like this (format=m3u8-aapl)" – how do you specify that? Could you provide a code example?

[vmseba]

@dgurns You need to set the uri value like this

<Video source={{uri: "http://profficialsite.origin.mediaservices.windows.net/5ab94439-5804-4810-b220-1606ddcb8184/tears_of_steel_1080p-m3u8-aapl.ism/manifest(format=m3u8-aapl)"}}
       .....
        />

[dgurns]

thank you!

[dgurns]

Just a note for anyone having issues 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: https://github.com/react-native-community/react-native-video/pull/426#issuecomment-272765610

_Implementation:_
Couldn't be simpler...

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

[barron9]

https://www.npmjs.com/package/hls-server is that works as server?

[manuTro]

@dgurns In my case it works fine on IOS, but on Android the video get start but just the first frame.

I'm missing something?

[manuTro]

ok I solved by setting paused = {false} . I discovered that by default it is true on ANDROID and false on IOS

[whistlerbrk]

@dgurns in addition to the changes you've mentioned, did you also have to implement the changes to RCTVideo.m that @vmseba mentioned as well?

[dgurns]

@whistlerbrk I don't believe so but I can't remember exactly. Try implementing it without editing RCTVideo.m first, and then if that doesn't work, maybe give it a try.

[choychris]

@dgurns I am using android-exoplayer.
But I still cannot play live .m3u8 file.
Most times, it is just black screen. Some times it makes the app crash.
Do you know if specific format is required ?

<Video 
style={styles.video}
source={{uri: 'http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8'}}
rate={1.0}                              
volume={0}                            
muted={false}                           
paused={false}                          
resizeMode="contain"                      
repeat={true}                           
playInBackground={false}                
playWhenInactive={false}                
progressUpdateInterval={250.0}
onLoad={()=>this.setState({ onBuffer : false })}
onError={()=>this.setState({ onBuffer : true })}
/>

[choychris]

after many trials, i get this:

Everything are fine on IOS.
please help

[pawelbrzezinski]

@choychris same here

[sahin]

any update on this issue?

[cobarx]

I tested http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8 on ExoPlayer with both the 2.0.0 (ExoPlayer 2.4.0) and 2.1.1 (ExoPlayer 2.7.3) releases of react-native-video using the Android emulator with a Nexus 5x on Android 8.1. I'm not seeing the visual glitch from https://github.com/react-native-community/react-native-video/issues/522#issuecomment-359328521

@sahin @choychris Can you test this again with 2.1.1 and see if you're still having issues. If so, what version of the Android are you using for your emulator?

[cobarx]

For http://profficialsite.origin.mediaservices.windows.net/5ab94439-5804-4810-b220-1606ddcb8184/tears_of_steel_1080p-m3u8-aapl.ism/manifest(format=m3u8-aapl) this works fine with no changes for iOS. However on ExoPlayer I'm getting the following error:

05-29 07:31:34.364 7010-7065/com.rnv E/ExoPlayerImplInternal: Source error.
    com.google.android.exoplayer2.source.UnrecognizedInputFormatException: None of the available extractors (MatroskaExtractor, FragmentedMp4Extractor, Mp4Extractor, Mp3Extractor, AdtsExtractor, Ac3Extractor, TsExtractor, FlvExtractor, OggExtractor, PsExtractor, WavExtractor) could read the stream.
        at com.google.android.exoplayer2.source.ExtractorMediaPeriod$ExtractorHolder.selectExtractor(ExtractorMediaPeriod.java:924)
        at com.google.android.exoplayer2.source.ExtractorMediaPeriod$ExtractingLoadable.load(ExtractorMediaPeriod.java:846)
        at com.google.android.exoplayer2.upstream.Loader$LoadTask.run(Loader.java:308)
        at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1162)
        at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:636)
        at java.lang.Thread.run(Thread.java:764)

I'll have to check and see if there is some way to configure ExoPlayer to get this to work.

[AwayQu]

@cobarx I meet the same issue, did you resolve the problem.

[mmsmsy]

@cobarx
Any news about this type of .ism/manifest URIs? I have the exact same issue.

[update with a solution]

Using react-native-video Android Media Player instead of ExoPlayer resolved the issue. Now, all the links, including those .ism/manifest ones from f.e. Microsoft Media Services work flawlessly.

[dengue8830]

for version 4.4.0 it worked with the basic installation (android tested)

[Gollum97]

Hi guys, I'm facing a problem with react-native-video trying to reproduce HLS source from wowza media system. I don't know if the problem could be related to this particular source but I can't reproduce the streaming on android (not tested on IOS yet). I'm using latest version of rect-native-video and RN 0.62.2. I can correctly reproduce a local mp4 but when i try with this particular remote source it doesn't show anything and i don't see any error form the console...
How could i proceed? Before trying with others streaming services I would like to be sure that is a problem related with this service.
Steps i have already done reading from other similar threads:

• added to settings.gradle:
  include ':react-native-video'
  project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')

• added to build.grandle:
  dependencies {
  compile project(':react-native-video')
  implementation "androidx.appcompat:appcompat:1.0.0"

• added to MainApplication.java
  packages.add(new ReactVideoPackage());

My code:
''
import React from "react";
import {View} from "react-native";
import Video from 'react-native-video';

export const Compoment = ({ navigation }) => {
return (
source={{uri: ' https://cdn3.wowza.com/#/############/########/hls/live/playlist.m3u8 ', type:"m3u8"}}
onError={e => console.log(e)}
style={{
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0
}}
/>

);
};
''
Let me know if you need more informations, please.

[ammoradi]

I'm facing this issue on Samsung A50 (doesn't load and play hls URLs)!
on Samsung Galaxy S6 everything is fine!

  "react-native": "0.62.2",
  "react-native-video": "^4.4.5",
  "react-native-video-controls": "^2.6.0"

[glenihenacho]

@doodirock Yeah, a quick hack as a poc would be to change RCTVideo.m like this:

if (isNetwork) { return [AVPlayerItem playerItemWithURL:url]; }

That should work with the test strem.
<Video source={{uri: "http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8"}} ... />

Let me know if that works for your use case. Don't forget to restart the app after the change.

@vmseba, I want your help on a project. Get back to me.

[Ravindra1122]

@dgurns You need to set the uri value like this

<Video source={{uri: "http://profficialsite.origin.mediaservices.windows.net/5ab94439-5804-4810-b220-1606ddcb8184/tears_of_steel_1080p-m3u8-aapl.ism/manifest(format=m3u8-aapl)"}}
       .....
        />

Thaks Bhava!!! Wachivalas

[SanthoshCreationz]

Help me to fix this issue

[imchintan]

HLS streaming doesn't work in iOS. please help me to fix this issue in iOS

"react-native": "0.63.2",
"react-native-video": "^5.1.0-alpha8"