有限会社マックスポート雑記帳: Webカメラの画像表示(Panasonicカメラ）

1年ほど前に調査していたネタ。

PanasonicのWebカメラをAndroidで表示したい。
たとえば　・・
株式会社リネット様
http://180.131.124.38:8101/CgiStart?page=Single&Language=1

株式会社SimPro様
http://simpro.mydns.jp:84/CgiStart?page=Single&Resolution=640x480&Quality=Standard&Mode=JPEG&RPeriod=65535&Size=STD&PresetOperation=Move&SendMethod=1&Language=1

PCのブラウザでは動画を表示できますが、Androidのブラウザでは表示できません。
そしてまたAndroid版FireFoxだけは表示できるのも謎です。
ではこれらの映像をAndroidのアプリで表示するにはどうしたらいいでしょうか？

※　HTMLコードばかりで長くなってしまいますが、ご容赦ください。
　追いかけていくポイントはこれらの中のほんの少しだけなので。

■　上記ページのHTMLコードを見てみよう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="expires" CONTENT="0">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META NAME="ROBOTS" CONTENT="NONE">
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<TITLE>Network Camera</TITLE>
</HEAD>
<FRAMESET border=0 frameSpacing=0 rows=30,8,* frameBorder=0>
<FRAME name=bar src="CgiTagMenu?page=Single&Language=1" scrolling=no NORESIZE>
<FRAME name=hrbar src="BarFoot.html" scrolling=no NORESIZE>
<FRAME name=body src="ViewerFrame?page=Single&Language=1">
</FRAMESET>
</HTML>

これだけ？　トップページには確かにこれだけ　・・　３つのフレームがあるだけです。

■　それではこの内部を追いかけてみる。

映像が含まれていると思われる場所のソース
ViewerFrame?page=Single&Language=1をクリックして出てきたソースを見てみる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
<META HTTP-EQUIV="expires" CONTENT="0">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
<META NAME="ROBOTS" CONTENT="NONE">
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
<TITLE>ViewerFrame</TITLE>
<SCRIPT Language="JavaScript">
<!--
if(top.location.href.match("/CgiStart") == null) {
 top.location.href = "CgiStart?page=Single&page=Single&Language=1";
}
// -->
</SCRIPT>
</HEAD>
<FRAMESET COLS="123,*" FRAMEBORDER=0 BORDER=0 FRAMESPACING=0>
　　<FRAMESET ROWS="26,*">
 <FRAME SCROLLING=no SRC="nphControlCamera?Direction=&Resolution=640x480&Quality=Standard&Size=STD&Width=640&Height=480&NewPosition.x=&NewPosition.y=&PresetOperation=Move&Language=1&RPeriod=0" NAME="Message">
 <FRAME SRC="nphPanTiltControl?Resolution=640x480&Quality=Standard&Size=STD&PresetOperation=Move&Language=1&RPeriod=0" NAME="Control">
　　</FRAMESET>
　　<FRAMESET ROWS="24,*">
 <FRAME SRC="CgiTitle?Resolution=640x480&Size=STD&Sound=Enable&Language=1" NAME="audio" NORESIZE SCROLLING="NO">
 <FRAME SRC="ImageViewer?Resolution=640x480&Quality=Standard&Size=STD&PresetOperation=Move&Data=0&Frame2=PanTilt&Type=&Language=1&RPeriod=0&Sound=Enable" NAME="right">
　　</FRAMESET>
　<NOFRAMES>
　　<BODY>　</BODY>
　</NOFRAMES>
</FRAMESET>
</HTML>

映像データと思われるものはまだない。

でもAndroid版FireFoxでは表示されるので、これらのコードをたどっていくと映像データが存在するはず！

■　もう少し追いかけてみよう。

　上記コードの中から、この部分をクリックして出てきたソースを見る。

 ImageViewer?Resolution=640x480&Quality=Standard&Size=STD&PresetOperation=Move&Data=0&Frame2=PanTilt&Type=&Language=1&RPeriod=0&Sound=Enable

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN">
<HTML>
<HEAD>
　<META HTTP-EQUIV="expires" CONTENT="0">
　<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
　<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
　<META NAME="ROBOTS" CONTENT="NONE">
　<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
　<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=Shift_JIS">
　<TITLE>ImageViewer</TITLE>
　<META HTTP-EQUIV="Refresh" CONTENT="1800;URL=ImageViewer?Resolution=640x480&Quality=Standard&RPeriod=3&Size=STD&Sound=Enable&Language=1">
　<META http-equiv="Content-Script-Type" content="text/javascript">
　<META http-equiv="Content-Style-Type" content="text/css">
</HEAD>
<BODY BGCOLOR="#EFEFEF" TEXT="#ffffff" 
      LINK="#ffffff" VLINK="#ffffff" ALINK="#ffffff" TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">
<!-- ** view ** -->
<FORM METHOD="POST" ACTION="nphControlCamera" TARGET="Message">
<INPUT TYPE=hidden NAME="Width" VALUE="640">
<INPUT TYPE=hidden NAME="Height" VALUE="480">
<INPUT TYPE=hidden NAME="Language" VALUE="1">
<INPUT TYPE=hidden NAME="Direction" VALUE="Direct">
<INPUT TYPE=hidden NAME="PermitNo" VALUE="-2104609529">
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0>
　<TR><TD title="マウスでクリックした位置を画面の中央に移動します。"><INPUT TYPE=image NAME="NewPosition" SRC="nphMotionJpeg?Resolution=640x480&Quality=Standard" WIDTH=640 HEIGHT=480 BORDER=0></TD></TR>
</TABLE>
</FORM>
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" style="padding-left: 10px;">
<TR><TD HEIGHT=1></TD></TR>
<TR><TD HEIGHT="24"><FONT Face="Arial" Style="font-size: 11px;" COLOR="blue">音声が聴こえないときはこちらをクリックしてください</FONT></TD></TR>
<TR><TD><A HREF="http://panasonic.biz/netsys/netwkcam/support/technic/sound/index.html" target="_blank"><FONT Face="Arial" Style="font-size: 11px;" COLOR="blue">http://panasonic.biz/netsys/netwkcam/support/technic/sound/index.html</FONT></A></TD></TR>
<TR>
<TD HEIGHT="24">
      <FONT FACE="Arial" STYLE="font-size: 11px" COLOR="black">
        <B>IPv4
         で動作中</B>
      </FONT>
    </TD>
  </TR>
</TABLE>
<!-- ** /view ** -->
</BODY>
</HTML>

！！！！　SRC="nphMotionJpeg?　・・・" というのが気になりますね！！！

ここをクリックしてみましょう。

■　こういう表示になります。

--myboundary
Content-length: 31015
Content-type: image/jpeg

ﾘ�#ﾀ� ﾝ      � ��������������������ﾛ�C� 
       ( 
 (H0  0H`H&(6M`phX::JhpplhXhjpppjoppzzzzz€€€€€€€€€€ﾛ�C       0  2dB8Dddddddddddddddddddddddddddddddddddddddddddddddddddﾀ�   � €  "�      ﾄ� ��        ��������         
 ﾄ�ｵ �           �� }   �    !1A  Qa "q 2￠｡ #Bｱﾁ Rﾑ�$3br�

 　　　　：　以下、文字化けした記号が続く。

やっとたどり着きました！

文字化けした記号部分を31015バイト分受信して、そのデータをjpeg表示したらカメラ画像が出てきます。

■　Androidアプリで実現するには、こういう手順です。

　PanasonicカメラのHTMLコードから上記のコードを追いかけ、SRC="npnMotionJpeg" というキーワードまでたどっていく。

  Content-lengthで取得できるバイト数分のメモリ領域を確保し、その内部に受信データを蓄積する。

　蓄積したデータをjpeg画像表示～メモリ解放を行う。

　もう一度ここにアクセスすると、バイト数、データ内容が変化しているため、メモリ確保、jpegデータ取得、jpegデータ表示、メモリ解放を繰り返す。

　この方法でPanasonicカメラの動画表示ができます！

　ここまで追いかけて表示してくれるAndroid用ブラウザはFireFoxだけだったんですね。

　やり方がわかれば実現はさほど難しくありません。

　是非興味がある方、お試しください。

　現段階では都合上ソースの公開は控えておきますが、興味のある方は連絡ください。

有限会社マックスポート雑記帳

2013年4月8日月曜日

Webカメラの画像表示(Panasonicカメラ）

0 件のコメント:

コメントを投稿