Playing livestream, which is generated by ffmpeg?

[inanbayram]

It's possible to play a livestream, which is generated by ffmpeg?
My livestream can be watched with other players like MxPlayer, VLC etc but if I try it with react-native-video, I get only a black screen. (Trying it on a real device "One Plus3" not on a simulator)

`/**

• Sample React Native App
• https:/facebook/react-native
• @flow
  */

import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
TouchableOpacity,
Text,
View
} from 'react-native';

import Video from 'react-native-video';
import Dimensions from 'Dimensions';

const {height, width} = Dimensions.get('window')

export default class iIPTVPanelPlayer extends Component {
state = {
rate: 1,
volume: 1,
muted: false,
resizeMode: 'contain',
duration: 0.0,
currentTime: 0.0,
paused: false,
};

video: Video;

onLoad = (data) => {
    this.setState({duration: data.duration});
    console.log(data.duration);
};

onProgress = (data) => {
    this.setState({currentTime: data.currentTime});
};

onEnd = () => {
    this.setState({paused: true})
    this.video.seek(0)
    console.log("END");
};

onAudioBecomingNoisy = () => {
    this.setState({paused: true})
};

onAudioFocusChanged = (event: {hasAudioFocus: boolean}) => {
    this.setState({paused: !event.hasAudioFocus})
};

getCurrentTimePercentage() {
    if (this.state.currentTime > 0) {
        return parseFloat(this.state.currentTime) / parseFloat(this.state.duration);
    }
    return 0;
};

renderRateControl(rate) {
    const isSelected = (this.state.rate === rate);

    return (
        <TouchableOpacity onPress={() => { this.setState({ rate }) }}>
            <Text style={[styles.controlOption, { fontWeight: isSelected ? 'bold' : 'normal' }]}>
                {rate}x
            </Text>
        </TouchableOpacity>
    );
}

renderResizeModeControl(resizeMode) {
    const isSelected = (this.state.resizeMode === resizeMode);

    return (
        <TouchableOpacity onPress={() => { this.setState({ resizeMode }) }}>
            <Text style={[styles.controlOption, { fontWeight: isSelected ? 'bold' : 'normal' }]}>
                {resizeMode}
            </Text>
        </TouchableOpacity>
    )
}

renderVolumeControl(volume) {
    const isSelected = (this.state.volume === volume);

    return (
        <TouchableOpacity onPress={() => { this.setState({ volume }) }}>
            <Text style={[styles.controlOption, { fontWeight: isSelected ? 'bold' : 'normal' }]}>
                {volume * 100}%
            </Text>
        </TouchableOpacity>
    )
}

render() {
    const flexCompleted = this.getCurrentTimePercentage() * 100;
    const flexRemaining = (1 - this.getCurrentTimePercentage()) * 100;

    console.log("Running..");
    return (
        <View style={styles.container}>
            <TouchableOpacity
                style={styles.fullScreen}
                onPress={() => this.setState({ paused: !this.state.paused })}
            >
                <Video
                    ref={(ref: Video) => { this.video = ref }}
                    /* For ExoPlayer */
                    /*source={{ uri: 'http://www.youtube.com/api/manifest/dash/id/bf5bb2419360daf1/source/youtube?as=fmp4_audio_clear,fmp4_sd_hd_clear&sparams=ip,ipbits,expire,source,id,as&ip=0.0.0.0&ipbits=0&expire=19000000000&signature=51AF5F39AB0CEC3E5497CD9C900EBFEAECCCB5C7.8506521BFC350652163895D4C26DEE124209AA9E&key=ik0', type: 'mpd' }}*/
                    /* source={require('./broadchurch.mp4')} */
                    source={{uri: 'https://player.vimeo.com/external/207277102.hd.mp4?s=6939b93ae3554679b57f5e7fa831eef712a74b3c&profile_id=119&oauth2_token_id=57447761'}}
                    /*source={{uri: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', type: 'mpd'}}*/
                    rate={this.state.rate}
                    paused={this.state.paused}
                    volume={this.state.volume}
                    muted={this.state.muted}
                    resizeMode={this.state.resizeMode}
                    onLoad={this.onLoad}
                    onProgress={this.onProgress}
                    onEnd={this.onEnd}
                    onAudioBecomingNoisy={this.onAudioBecomingNoisy}
                    onAudioFocusChanged={this.onAudioFocusChanged}
                    repeat={false}
                ></Video>
            </TouchableOpacity>

            <View style={styles.controls}>
                <View style={styles.generalControls}>
                    <View style={styles.rateControl}>
                        {this.renderRateControl(0.25)}
                        {this.renderRateControl(0.5)}
                        {this.renderRateControl(1.0)}
                        {this.renderRateControl(1.5)}
                        {this.renderRateControl(2.0)}
                    </View>

                    <View style={styles.volumeControl}>
                        {this.renderVolumeControl(0.5)}
                        {this.renderVolumeControl(1)}
                        {this.renderVolumeControl(1.5)}
                    </View>

                    <View style={styles.resizeModeControl}>
                        {this.renderResizeModeControl('cover')}
                        {this.renderResizeModeControl('contain')}
                        {this.renderResizeModeControl('stretch')}
                    </View>
                </View>

                <View style={styles.trackingControls}>
                    <View style={styles.progress}>
                        <View style={[styles.innerProgressCompleted, { flex: flexCompleted }]}/>
                        <View style={[styles.innerProgressRemaining, { flex: flexRemaining }]}/>
                    </View>
                </View>
            </View>
        </View>
    );
}

}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'black',
},
fullScreen: {
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
},
controls: {
backgroundColor: 'transparent',
borderRadius: 5,
position: 'absolute',
bottom: 20,
left: 20,
right: 20,
},
progress: {
flex: 1,
flexDirection: 'row',
borderRadius: 3,
overflow: 'hidden',
},
innerProgressCompleted: {
height: 20,
backgroundColor: '#cccccc',
},
innerProgressRemaining: {
height: 20,
backgroundColor: '#2C2C2C',
},
generalControls: {
flex: 1,
flexDirection: 'row',
borderRadius: 4,
overflow: 'hidden',
paddingBottom: 10,
},
rateControl: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
},
volumeControl: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
},
resizeModeControl: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
},
controlOption: {
alignSelf: 'center',
fontSize: 11,
color: 'white',
paddingLeft: 2,
paddingRight: 2,
lineHeight: 12,
},
});

AppRegistry.registerComponent('iIPTVPanelPlayer', () => iIPTVPanelPlayer);
`

[dihan]

Did you find a solution to playing FFMPEG?

[weekaung]

Does the react-native-video team have a solution or in the process of creating one?
We are in the same boat. We need to be able to play a stream obtained using ffmpeg. Or to be more to the point, we need to play "Rtsp" live streams which is protected by "digest authentication".

[joshuapinter]

@weekaung As far as I know, according to this PR, react-native-video now depends on the ExoPlayer project from Google and according to this PR they have not yet merged in that support.

I'm looking for this myself so any good solutions, please post it here for others to know about. Thanks!

[ozatarain]

@joshuapinter You can try this one react-native-yz-vlcplayer i've tried it on android and ios and it works pretty well

[osric69]

@ozatarain I got problem using react-native-yz-vlcplayer with an error about : RCTVLCPlayer not found.

Can you help me about it ?