2017-05-21 6 views
0

私は初心者/趣味のプログラマーです。私はオンラインで見つけたコードをまとめてgpioピンを持っているウェブカメラアプリケーションに取り組んでいます。私は私のLANまたは外部からページにアクセスするかどうかによって変更する必要があるindex.phpファイルにimg srcタグがあります。外部IPからのクライアントの場合はimg srcタグを変更

LANに接続しているかどうかによって、img srcタグを内部または外部のIPに手動で変更すると動作する別のフォーラムで、次の情報が見つかりました。 index.phpファイルを手動で変更する必要はありません。

オプションラズベリーパイフォーラムで見つけたもの: 外部IPを使用するようにタグを変更します。これにより内部ネットワークが切断された場合は、内部対外部の別のページを使用するか、HTTPクライアントが内部または外部IPから来ているかどうかを判断するためのスクリプトを作成し、それに応じてタグを変更することができます。

クライアントが外部ネットワークまたは内部ネットワークにあるかどうかによってimg srcタグを変更する代替インデックスページまたはスクリプトを実装する方法を教えてもらえますか?ここで

は、IMGのsrcタグとインデックス・ページのコードです:

<!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> 

おかげ

+1

だけSRCにホスト名が含まれていません: ''

+0

は、特異静的IP内部IPです、またはそれは異なるIPの範囲ですか? –

+0

JSを使用して画像を「ホットロード」する必要があるかもしれません。正規表現テストから画像のsrcを構築する場合は、 ''(window.location.test(/192\.168 \ ./){/ *はローカル* /} else {/ *は外部* /} 'のようにしてください。 – haxxxton

答えて

0

あなたが要求のIPを取得し、変更を加えることができ、あなたのページをレンダリングするためにPHPを使用している考えますその結果に基づいてレンダリングされた出力に出力する。

get_client_ip()回答ポストに記載されているセキュリティ上の懸念がありますが、これは画像のsrcを変更するために使用されていることを考えると、(内部IP設定を潜在的に公開する以外は) 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> 
+0

ありがとう!それは素晴らしい仕事でした!実際にコードを投稿してくれてありがとう。それはとても役に立ちました。 – Mulepunch

関連する問題