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
You can’t perform that action at this time.