aerodynamik88
Posts: 4
Joined: Sun Jan 19, 2020 3:43 pm

HTML, Apache, Flask, PiCamera, Video Stream not broadcasting outside local network

Sun Jan 19, 2020 4:03 pm

Hi everyone,

Been working on this problem for far too long now.

I have a pet project I'm working on where I would like to live stream video, through a website that I host, to the internet.

I have put together some code where I can make this happen on my local home network. But when I try to access the page through the internet I get a broke video.

I am using Apache to server port 80. My video feed come from port 8080. In the HTML code i using the follow code to invoke the video server:

Code: Select all

<img src="http://10.0.0.86:8080/stream.mjpg" width = "300" height = "300">
I use flask for my webserver, thus I use mod_proxy to reverse proxy from apache. (This is where I think the issue might lie.) I am also trying to reverse proxy the stream it self, ie: http://10.0.0.86:8080.

On my internet gateway I am exposing port 80 and 8080 which route to the Pi.

Everything behaves the way i would like from my local network but not from the internet.

I am using my iphone, to use chrome ,to access my external ip. Using cell network and not attached to home wifi.

I am using this tool chain because I also would like to be able to press a button on the website which ultimately triggers a GPIO pin on the Pi.

Also, when i enter: externalIp:8080 i can see my video stream. So it can be served up. Its just the part where it is being embedded in the port80 html file that doesn't seem to work.

Hope this makes sense. I would love to hear some opinions.

thanks.
Last edited by aerodynamik88 on Mon Jan 20, 2020 1:25 pm, edited 1 time in total.

Heater
Posts: 14455
Joined: Tue Jul 17, 2012 3:02 pm

Re: HTML, Apache, Flask, PiCamera, Video Stream not broadcasting outside local network

Mon Jan 20, 2020 12:29 pm

I don't follow how you have hooked all this together. What is generating your video feed? What protocols are you using.

For sure you cannot have

Code: Select all

<img src="\[http://10.0.0.86:8080/stream.mjpg\](http://10.0.0.86:8080/stream.mjpg)" width = "300" height = "300">
In you web page. Not if that page is being viewed in a browser anywhere on the internet. 10.0.0.86 is a local network address that is not visible on the internet. You need to use the public address of your internet router and have it do port forwarding.

Coincidentally I just spent the weekend fighting with video streaming. Not knowing anything about it it too many hours of googling experimenting, googling, experimenting.... I finally have something that works:

1) I get video from a Pi camera with raspivid.
2) I push that to an RTMP server using ffmpeg.
3) My server is nginx, it handles RTMP as well as my HTTPS stuff.
4) nginx also converts the incoming RTMP stream to HLS which browsers can consume.
5) In my web page I display the video with view.js.

In my case my nginx server is running on a cloud server instance *Digital Ocian" and has a public IP address. It could as well be running inside my LAN at home given that I have a public IP address and the HTTPS and RTMP ports are forwarded correctly,
Memory in C++ is a leaky abstraction .

aerodynamik88
Posts: 4
Joined: Sun Jan 19, 2020 3:43 pm

Re: HTML, Apache, Flask, PiCamera, Video Stream not broadcasting outside local network

Mon Jan 20, 2020 1:22 pm

Hi,

Sorry, the HTML tag is actually this:

Code: Select all

<img src="http://10.0.0.86:8080/stream.mjpg" width = "300" height = "300">
I have tried this also:

Code: Select all

<img src="http://external_ip:8080/stream.mjpg" width = "300" height = "300"> 
both have not worked for me outside my local network.

To be a little bit more clear on the web interface part:

I have port 80 and 8080 open on my home gateway. I have confirmed they both work by entering

Code: Select all

external_ip:80
and

Code: Select all

external_ip:8080
from my cell phone on cell network.

These requests are routed to my Pi and to Apache.
Apache uses a reverse proxy to route to my Flask web server on port 5000. (Should I also be routing to port 8080 with the reverse proxy script?)
Flask servers up my index.html files that has the above html tag embedded in it.
Why is it that I can view these two ports separately but not when port 8080 is embedded in index.html.

thanks

1) I get video from a Pi camera with raspivid.
2) I push that to an RTMP server using ffmpeg.
3) My server is nginx, it handles RTMP as well as my HTTPS stuff.
4) nginx also converts the incoming RTMP stream to HLS which browsers can consume.
5) In my web page I display the video with view.js.
I like this architecture. I have read a lot about them in my travels during this project.

Heater
Posts: 14455
Joined: Tue Jul 17, 2012 3:02 pm

Re: HTML, Apache, Flask, PiCamera, Video Stream not broadcasting outside local network

Tue Jan 21, 2020 2:14 pm

Are those image tags you show above exactly the text you used in the browse? Or is 'external_ip' a place holder for the address you actually used?

Because as it stands neither of them can work. '10.0.0.86' is a local address on your home network that cannot be seen from the internet. Ergo, not by your web page when you are not at home. 'external_ip' is not anything as far as I know, certainly not a domain name.

You image tag needs to use the IP address/host name that is used to contact your router from the internet. It's public IP address.

It's not clear to me how you are making an video stream with an image tag anyway. I thought they could just download and play video files.
Memory in C++ is a leaky abstraction .

aerodynamik88
Posts: 4
Joined: Sun Jan 19, 2020 3:43 pm

Re: HTML, Apache, Flask, PiCamera, Video Stream not broadcasting outside local network

Thu Jan 23, 2020 1:36 am

No, external_ip is just my actual ip address. didn't want to post.

Return to “Networking and servers”