Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
React Native MJPEG
var styles = StyleSheet.create({
backgroundVideo: {
width:400,
height:322
}
})
return (
<View>
<WebView
style={styles.backgroundVideo}
automaticallyAdjustContentInsets={true}
scalesPageToFit={true}
startInLoadingState={false}
contentInset={{top: 0, right: 0, left: 0, bottom: 0}}
scrollEnabled={false}
source={{html: this.formatHtml(), baseUrl: '/'}} />
</View>
);
}
formatHtml () {
return ('<html><body><img src="' + this.props.mpjegUrl + '" width="100%" style="background-color: white; min-height: 100%; min-width: 100%; position: fixed; top: 0; left: 0;"></body></html>');
}
@KrifaYounes

This comment has been minimized.

Copy link

@KrifaYounes KrifaYounes commented May 10, 2020

Hi there is a other solution than the web view ?
thanks

@Overdrive141

This comment has been minimized.

Copy link

@Overdrive141 Overdrive141 commented Jun 15, 2020

Hi there is a other solution than the web view ?
thanks

I have been looking at displaying mjpeg live stream on react native since 2 months and WebView is the only solution I could find. Have you found anything else?

@KrifaYounes

This comment has been minimized.

Copy link

@KrifaYounes KrifaYounes commented Jun 15, 2020

Me too since 4 months and I have found any solution other than webview.
But with webview the streaming is slow in android .
I use flask server to stream raspeberry pi camera and I need a player to show the streaming.
What are you try to do ?
We could work together to find a solution

@Overdrive141

This comment has been minimized.

Copy link

@Overdrive141 Overdrive141 commented Jun 15, 2020

Lol whattt our usecases are so similar. I am using another component to stream my flask server video and for my esp8266 stream I have to use WebView since it outputs Mjpeg.

@KrifaYounes

This comment has been minimized.

Copy link

@KrifaYounes KrifaYounes commented Jun 16, 2020

did you try webrtc technology?

is the quality of your streaming correct with flask and a webview?

@Overdrive141

This comment has been minimized.

Copy link

@Overdrive141 Overdrive141 commented Jun 17, 2020

did you try webrtc technology?

is the quality of your streaming correct with flask and a webview?

For flask I recommend you use react-native-video, it works for me.

@KrifaYounes

This comment has been minimized.

Copy link

@KrifaYounes KrifaYounes commented Jun 17, 2020

It’s doesn’t work for me with react-native-video. Can you share me your code please ?

@Overdrive141

This comment has been minimized.

Copy link

@Overdrive141 Overdrive141 commented Jun 17, 2020

It’s doesn’t work for me with react-native-video. Can you share me your code please ?

What format is your video in?

@KrifaYounes

This comment has been minimized.

Copy link

@KrifaYounes KrifaYounes commented Jun 17, 2020

I use flask like this.
It’s mjpeg format, it doesn’t work woth react native video.
Have you a other solution ?

@app.route("/video_feed")
def video_feed():
# return the response generated along with the specific media
# type (mime type)
return Response(generate(),
mimetype = "multipart/x-mixed-replace; boundary=frame")

@Overdrive141

This comment has been minimized.

Copy link

@Overdrive141 Overdrive141 commented Jun 18, 2020

@KrifaYounes

This comment has been minimized.

Copy link

@KrifaYounes KrifaYounes commented Jun 18, 2020

ok i will search other streaming solutions but I use OpenCV with python for face detection.
Have you some recommandations to optimize Webview streaming for android ?

@Overdrive141

This comment has been minimized.

Copy link

@Overdrive141 Overdrive141 commented Jun 18, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment