HLS streaming

[doodirock]

I seem to be seeing some conflicting reports about working with HLS streaming sources. So will playing live streams via HLS work 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

[kshahkshah]

@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)

[boringstuff-dev]

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 ( <View style={{alignContent: 'center', flex:1}}> <Video 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"

[f4z3k4s]

For anybody who might be struggling with this, the solution is here.

[myaskovsky]

Got hls master manifest from api, but how to pass it in source?

[jitenshah19]

Hello. Is there a way we can see the logs for react-native-video - I am rendering like 5 AV Players and one is being played currently whereas others prepare themselves by downloading their first chunk.

I just wanted to verify the other 4 AV Players don't download additional data (also if they have paused = true will they still download the first chunk ?)

Thank you

[puneetkansal04]

.m3u8 is not working in the react-native-video

[ivssh]

.m3u8 is not working in the react-native-video

Its working for me! Can you please show some code where its not working?

[githubvisiontrek]

Hi Its not working for me on ios. only audio coming not video..

<VideoPlayer controls={false} // Display video controls (play, pause, etc.) skin="custom" isNetwork={true} source={{ uri: ${route.params.vurlaws}, // uri: http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8, // type: 'm3u8', }} paused={false} // make it start ignoreSilentSwitch="ignore" isBuffering={false} // resizeMode="contain" tapAnywhereToPause={true} pictureInPicture={true} volume={1} playInBackground={true} // muted={false} style={{ flex: 1, // width: '100%',

      position: 'absolute',
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      height: screenHeight,
      // width: '100%',
    }}
    // style={styles.backgroundVideo}  // any style you want
    repeat={true} // make it a loop
  />

[githubvisiontrek]

http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8

HI its not working on my code this is my video link https://tzvodacomcontent.s3.amazonaws.com/video-1654952965085/video-1654952965085.m3u8

[wolfxpertlab]

Please tell me how can I implement HLS and play video smoothly for react naitve how can I possible this please tell me some information

[wolfxpertlab]

also same error on android exoplayer

this is error

{"error": {"errorException": "com.google.android.exoplayer2.ExoPlaybackException: MediaCodecVideoRenderer error, index=0, format=Format(2, null, null, video/avc, avc1.42E015, 484444, null, [480, 360, -1.0], [-1, -1]), format_supported=YES", "errorString": "Unable to instantiate decoder OMX.MTK.VIDEO.DECODER.AVC"}}

how can I solved it any solution

[glenihenacho]

Less is more.

On Mon, Oct 2, 2023 at 9:43 PM wolfxpertlab @.***> wrote:

Please tell me how can I implement HLS and play video smoothly for react naitve how can I possible this please tell me some information . I am very stock

— Reply to this email directly, view it on GitHub https://github.com/react-native-video/react-native-video/issues/522#issuecomment-1744201452, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEYUQKNUPQ53XQHBKZECENLX5OJYBAVCNFSM4DCZN7ZKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCNZUGQZDAMJUGUZA . You are receiving this because you commented.Message ID: @.***>

[sunilanumolu]

also same error on android exoplayer

this is error

{"error": {"errorException": "com.google.android.exoplayer2.ExoPlaybackException: MediaCodecVideoRenderer error, index=0, format=Format(2, null, null, video/avc, avc1.42E015, 484444, null, [480, 360, -1.0], [-1, -1]), format_supported=YES", "errorString": "Unable to instantiate decoder OMX.MTK.VIDEO.DECODER.AVC"}}

how can I solved it any solution

hey, facing same issue on certain android devices, anyone who found a solution or know how to fix this please comment

[AliSHA256]

Hi Its not working for me on ios. only audio coming not video..

<VideoPlayer controls={false} // Display video controls (play, pause, etc.) skin="custom" isNetwork={true} source={{ uri: ${route.params.vurlaws}, // uri: http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8, // type: 'm3u8', }} paused={false} // make it start ignoreSilentSwitch="ignore" isBuffering={false} // resizeMode="contain" tapAnywhereToPause={true} pictureInPicture={true} volume={1} playInBackground={true} // muted={false} style={{ flex: 1, // width: '100%',

      position: 'absolute',
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
      height: screenHeight,
      // width: '100%',
    }}
    // style={styles.backgroundVideo}  // any style you want
    repeat={true} // make it a loop
  />

Any update? did you make it work? I have the same issue.

[freeboub]

guy, please test with the sample included in the repository. and open another ticket if you find something relevant