動画配信の方法

動画配信は、設定画面の「配信設定」ページで、有効/無効を切り替えます。

設定項目説明
「カメラ画像を配信する」チェック 動画配信のON/OFFを切り替えます。
チェックを付けただけでは配信されません!
実際に動画配信を行うためには、監視開始ボタンを押して、監視状態にしてください。
配信ポート番号 動画の配信ポート番号を指定します。
使用可能な値は0〜65535ですが、自由に使える番号として決められているのは49152番以降と決められています。
複数のカメラで動画配信を行う場合、既に使用されている番号とは異なる番号を指定してください。
画像サイズ ビューワ向けに配信する画像のサイズをパーセントで指定します
更新間隔 ビューワが画像を更新する間隔をミリ秒単位で指定します。

動画配信を有効にしたら、プレビュー画面の左下にある ボタンをおして、監視を開始すると、動画が配信されます。

配信された動画の受信方法

配信された動画は、ウェブブラウザで見ることができます。
下記のURLにアクセスすると、LiveCapture3から配信された動画を見ることができます。

http://[LiveCapture3をインストールしたPCのIPアドレス]:[配信ポート番号]/

例えば、インストールしたPCのアドレスが「192.168.11.10」、配信ポート番号が「55555」の場合には、 「http://192.168.11.10:55555/」にアクセスします。
当然、配信側のPCでFirewallを設定している場合は、指定したポート番号のInbound(受信)TCPを許可する必要があります。

動画配信の仕様

LiveCapture3では動画配信の為に、内部で簡易HTTPサーバを組み込んでします。
このHTTPサーバでは、以下の3つのアクションに対応します。

1. ビューワの取得

配信ルートURL(http://XXX.XXX.XXX.XXX:PPPP/)へアクセスが来た場合、LiveCapture3は、JavaScriptで記述されたHTMLページを返却します。
このJavaScriptがブラウザで解釈され、動画受信ビューワとして動きます。

ビューワの処理としては、指定された画像サイズ、更新間隔でJPEGを取得しに行く処理になっており、MotionJPEGストリームを受信する形ではありません。
ただ、ブラウザは通常Keep-Aliveで取得しに来ますので、TCPセッションとしては最初の1本を使い続け、その中をJPEGが流れていく形ですので、見た目的にはほとんど動画として見えます。
また、HTML5のCanvasを使って画像表示を行っていますので、ちらつきがないだけでなく、PCだけでなくスマホなど、HTML5対応のブラウザであれば見れると思います。

JavaScriptのソースコードは、受信したブラウザ上で確認できますので、ご自由にコードを再利用していただいて構いません。
例えば、ちゃんとしたHTTPサーバを用意し、そこから4分割表示のJavaScriptを配信、画像受信URL部分をLiveCapture3の配信URLにすれば、4分割表示のビューワを実現することも可能です。

2. 静止画の取得

「/SnapJpeg」に対してアクセスすると、その時の静止画(JPEG)を取得できます。引数として画像の幅(w)、高さ(h)を指定できます。
例えば、画像サイズ500x250で静止画を取得する場合は

http://192.168.11.10:55555/SnapJpeg?w=500&h=250

にアクセスすると取得できます。サイズを指定しない場合はオリジナルサイズで返却されます。

LiveCapture3から配信される受信ビューワは、この/SnapJpegを繰り返し使用することで実現しています。

3. MotionJPEGの取得

「/MotionJpeg」に対してアクセスすると、MotionJPEGストリームが返却されます。/SnapJpeg同様に、w/hでサイズを指定可能です。
例えば、画像サイズ250x200でMotionJPEGを取得する場合は

http://192.168.11.10:55555/MotionJpeg?w=250&h=200

にアクセスします。

Androidアプリなど、処理能力があるアプリケーションで受信する場合はこちらの方が良いと思います。
実際、LiveCapture2では、(Appletですが)JavaでMotionJPEGを受信するビューワを配信していました。
そのまま使えるコードではないと思いますが、参考になると思いますので、LiveCapture2で使用していたJavaApplet版のMotionJPEGビューワのソースコードを置いておきます。
ご自由に改変してご使用くださって結構です。

LiveCapture2のJavaApplet版MotionJPEGビューワのソースコード

ちなみに、MotionJPEGという動画フォーマットには定型フォーマットが存在しません。
例えばビデオカメラなどではAVIコンテナにJPEGとLPCMを入れて、MotionJPEGと表記している物もありますし、MOV形式のMotionJPEGもあります。
ネットワークカメラなどのHTTP上のストリーミング形式のものは、Content-Type: multipart/x-mixed-replaceを使用して複数のJPEGを連続して送ったりしています。
つまり、JPEG画像の連続フレームで構成されたものは、すべてMotionJPEGと名乗っている状態です。

Panasonicなど、主要メーカ製のネットワークカメラは、ほとんどがHTTP上のmultipartストリーミング形式になっており、LiveCapture2/LiveCapture3でもMotionJPEGは、この方式で配信しています。

このmultipart/x-mixed-replaceというのは、Netscape社が提唱した、サーバからのプッシュ配信の為のものです。
ブラウザ側は新たなpartが送られてきたら、表示中のものを破棄して新しいPartを表示する、という内容なのですが、あまり広まりませんでした。
その為、通常のブラウザでこのContentTypeを処理できるものは存在しないと考えた方が良いと思います。
(手元のFireFoxでは再生できましたが。。。)
さらに、通常のブラウザでは、x-mixed-replaceだけでなく、multipart/*の解釈自体が定まっていません。

ということで、この形式のMotionJPEGを表示させるためには、サーバが一方的に送りつけてくるコマ送りJPEGを遅延なく受信⇒デコード⇒表示を繰り返し処理可能な能力をもったクライアントアプリケーションを作る必要があります。

以下はLiveCapture3でのMotionJPEGの配信形式です。

Panasonic製のネットワークカメラなども同様のフォーマットのMotionJPEGになっていますが、若干の差異があったりします。

実際のクライアント側の作り方に関してですが、Multipart間のヘッダーの仕様も様々なので、ちゃんとpartを理解して受信するプログラムを記述するよりも、JPEG画像の開始コードと終了コードを目安に受信した方が接続性は上がると思います。