Change img src tag if client from external ip

Question

I am a beginner / hobbyists programmer. I am working on a webcam application that also has some gpio pins by piecing together code I have found online. I have an img src tag in an index.php file that needs to change depending on whether I access the page from within my lan or externally.

I found the following information on another forum that works if I manually change the img src tag to be an internal or external ip depending on if I am on my LAN or not, but I would like to be able to access the page from either one without needing to manually change the index.php file.

Options I found on raspberry pi forum: Change the tag to use your external IP. If this breaks the internal network, you can either use a separate page for internal vs external, or you can write a script to determine if the http client is coming from an internal or external IP, and change the tag accordingly.

Could someone show me how to implement an alternate index page or script that would change the img src tag depending on if the client is on an external or internal network?

Here is the code for the index page with img src tag:

    <!DOCTYPE html>
    !--TheFreeElectron 2015,        http://www.instructables.com/member/TheFreeElectron/ -->

<html>
<head>
    <meta charset="utf-8" />
    <title>Raspberry Pi Gpio</title>
</head>
 <body style="background-color: black;">    
    <center>
    <img src="http://192.168.0.34:8080/stream/video.mjpeg">
    </center>
 <!-- On/Off button's picture -->       
<?php
$val_array = array(0,0,0,0,0,0,0,0);
//this php script generate the first page in function of the file
for ( $i= 0; $i<8; $i++) {
    //set the pin's mode to output and read them
    system("gpio mode ".$i." out");
    exec ("gpio read ".$i, $val_array[$i], $return );
}
//for loop to read the value
$i =0;
for ($i = 0; $i < 8; $i++) {
    //if off
    if ($val_array[$i][0] == 0 ) {
        echo ("<img id='button_".$i."' src='data/img/red/red_".$i.".jpg' onclick='change_pin (".$i.");'/>");
    }
    //if on
    if ($val_array[$i][0] == 1 ) {
        echo ("<img id='button_".$i."' src='data/img/green/green_".$i.".jpg' onclick='change_pin (".$i.");'/>");
    }    
}
?>
<!-- javascript -->
    <script src="script.js"></script>
 </body>
</html>

Thanks

Is the internal IP a singular static IP, or is it a range of different IP's? — Zac Webb, May 21 '17 at 23:47
you might need to "hot load" the image using JS. Do something like `if( window.location.test(/192\.168\./){ /* is local */ }else{ /* is external */ }` building the src of your image from the regex test — haxxxton, May 22 '17 at 00:45
Thanks @haxxxton . but I'm not really sure where to add this code. I tried adding it at the bottom of the original code. See below but it is not correct. Can you help me on adding this correctly? if (window.location.test(/192\.168\./){}else{}; } ?> — Mulepunch, May 22 '17 at 01:03
@Zac Webb The internal ip is a singular static ip. From within my LAN I can see the video using the IP address and port shown above in the code. To view it from outside my LAN I have to forward the port and change the ip in the code above to be the ip of my modem but then I can only view it from outside my LAN and I have change it again to view it in my LAN. — Mulepunch, May 22 '17 at 01:08
@tereško I tied that but the video stream will not load without the full http://....text — Mulepunch, May 22 '17 at 01:09
Hadnt looked closely enough to realise you were using PHP (totally my bad), a PHP solution should suffice, rather than waiting until post client render. — haxxxton, May 22 '17 at 01:36

score 0 · Accepted Answer · edited May 23 '17 at 12:26

Given you are using PHP to render your page, you can get the IP of the request and make changes to the rendered output based upon the result.

There are some security concerns listed at the get_client_ip() answer post, but given this is just being used to change the src of an image, i believe there is no real issue (other than potentially exposing your internal IP configuration) to someone attempting to "spoof" their IP.

<?php 
    // https://stackoverflow.com/a/15699240/648350
    // Function to get the client IP address
    function get_client_ip() {
        $ipaddress = '';
        if (isset($_SERVER['HTTP_CLIENT_IP']))
            $ipaddress = $_SERVER['HTTP_CLIENT_IP'];
        else if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
            $ipaddress = $_SERVER['HTTP_X_FORWARDED_FOR'];
        else if(isset($_SERVER['HTTP_X_FORWARDED']))
            $ipaddress = $_SERVER['HTTP_X_FORWARDED'];
        else if(isset($_SERVER['HTTP_FORWARDED_FOR']))
            $ipaddress = $_SERVER['HTTP_FORWARDED_FOR'];
        else if(isset($_SERVER['HTTP_FORWARDED']))
            $ipaddress = $_SERVER['HTTP_FORWARDED'];
        else if(isset($_SERVER['REMOTE_ADDR']))
            $ipaddress = $_SERVER['REMOTE_ADDR'];
        else
            $ipaddress = 'UNKNOWN';
        return $ipaddress;
    }
    // define our default image src prefix
    $image_src_prefix = "http://192.168.0.34:8080/";
    const LOCAL_IP_PREFIX = "192.168."; // define our local ip prefix (ie. some LAN's use "10.0.")
    // test for ip starting with our local IP prefix
    if( substr(get_client_ip(), 0, strlen(LOCAL_IP_PREFIX)) !== LOCAL_IP_PREFIX ){
        // we are NOT local so update the image src prefix
        $image_src_prefix = "http://INSERT_EXTERNAL_IP_HERE/";
    }
?>
<!DOCTYPE html>
    !--TheFreeElectron 2015,        http://www.instructables.com/member/TheFreeElectron/ -->

<html>
<head>
    <meta charset="utf-8" />
    <title>Raspberry Pi Gpio</title>
</head>
 <body style="background-color: black;">    
    <center>
    <img src="<?php echo $image_src_prefix; ?>/stream/video.mjpeg">
    </center>
 <!-- On/Off button's picture -->      
<?php
$val_array = array(0,0,0,0,0,0,0,0);
//this php script generate the first page in function of the file
for ( $i= 0; $i<8; $i++) {
    //set the pin's mode to output and read them
    system("gpio mode ".$i." out");
    exec ("gpio read ".$i, $val_array[$i], $return );
}
//for loop to read the value
$i =0;
for ($i = 0; $i < 8; $i++) {
    //if off
    if ($val_array[$i][0] == 0 ) {
        echo ("<img id='button_".$i."' src='data/img/red/red_".$i.".jpg' onclick='change_pin (".$i.");'/>");
    }
    //if on
    if ($val_array[$i][0] == 1 ) {
        echo ("<img id='button_".$i."' src='data/img/green/green_".$i.".jpg' onclick='change_pin (".$i.");'/>");
    }   
}
?>
<!-- javascript -->
    <script src="script.js"></script>
 </body>

Thanks! That worked great! Thanks for actually posting the code also. That was very helpful. — Mulepunch, May 22 '17 at 01:53

Change img src tag if client from external ip

1 Answers1