How to view images of local network from remote in

Question

I have a following network setup:

         ___________> [Remote IP] * can access anything from 192.168.1.2.
        |                         * it has a public static ip to access as 8x.8x.2xx.1x
        |
        ^
      [WAN]
        |
     [Router]
        |
        |---[LAN]
        |
   [HTTP WEB SERVER]@192.168.1.2
        |
        |
  --------------------------------------------------- (LAN)
    |             |               |
  [PC1]         [PC2]           [PC3]
  |             |               |
  192.168.1.3   192.168.1.4     192.168.1.5

Case example:

[OK ]: PC1, PC2 has image available form 192.168.1.3:7007/picture1.jpeg and 192.168.1.4:7007/picture1.jpeg

[OK ]: PC3 if i open the site from 192.168.1.2 i can see picture1 and picture2. As my HTML code is:

<img src="http://192.168.1.3:7007/picture1.jpeg?1323809545000?1323809546000?1323809547000" class="monitor_realtime" />

<img src="http://192.168.1.4:7007/picture1.jpeg?1323809545000?1323809546000?1323809547000" class="monitor_realtime" />

[NOT OK]: But if i now remotely from public location open the page i can not see the pictures.

How can i see pictures when i am opening it remotely (local browsing works)?

Answer 1

I had similar problem, but I couldn't change the router configuration. So I came up with alternative solution for such cases. Instead of setting the route from one network to another I have changed the way the images are served without changing their location. My solution is described here. The code snippets are for my stack (Asp.NET/Nancy/Razor) but the idea is technology agnostic. In short, you can convert the images "on the fly" to base64 string and serve them embedded in you page from your public server. It works perfect for me with following code (C#):

private string convertToBase64(string imageURL)
{
    var request = WebRequest.Create(imageURL);

    using (var response = request.GetResponse())
    {
        using (var stream = response.GetResponseStream())
        {
            using (Image image = Image.FromStream(stream))
            {
                using (MemoryStream m = new MemoryStream())
                {
                    image.Save(m, image.RawFormat);
                    byte[] imageBytes = m.ToArray();
                    string base64String = Convert.ToBase64String(imageBytes);
                    return string.Format("data:image/png;base64,{0}", base64String);
                }
            }
        }
    }
}

And then converted image is passed to the View as a one of the @Model properties (Base64Image):

<img id="photo" src="@Model.Base64Image" title="@Model.Description" /> 

Answer 2

The context of 192.168.1.4 is different depending on if you're on the webserver (local) network or the remote computer. The remote computer would look on its own network (not yours) for that image. You need to use a public IP address or some other remotely exposed address for the pictures for this to work. Or you could use some strange service that pulls them from the local network and caches them on the web server or something.

Answer 3

Are you saying that PC1 and PC2 also both have a Web server running on port 7007? If so, presumably the router does not forward requests to those Web servers. If you plan to access content hosted on a LAN, then the router must know to forward those requests to the relevant server.

EDIT: Based on context provided in your comment to m4tt1mus' answer, you'd need to go with the second option. You could set up the router to forward port 81 to port 7007 of PC1 and port 82 to port 7007 of PC2.