• TOP
• WPF

[C#][M-JPEG over HTTP][WPF]ネットワークカメラの画像取得

2014-01-13T18:15:00+09:00 2021-05-02T10:51:48Z WPF

1. 概要
アイ・オー・データなどのネットワークカメラ(TS-WLCAMシリーズ)はM-JPEG over HTTPと言う形式でビデオ映像が配信されています。この形式は音声は含まれず、映像はJPEG形式です。
この形式はHTTP レスポンスヘッダのContent Typeが以下となっています。

multipart/x-mixed-replace;boundary=<boundary-name>

送られてくる画像はこのレスポンスで指定される<boundary-name>で区切られて送られてきます。.NET Frameworkはこの形式の画像を標準対応していませんが、CodePlexで公開されているMJPEG Decoder(https://github.com/BrianPeek/mjpeg/)を使用することで使うことが可能です。
この記事ではWPFでの使用例を記載します。
2. MJPEG Decoderをダウンロードする
MJPEG DecoderのサイトからMJPEG Decoderのバイナリをダウンロードします。

3. プロジェクトを作成する
WPFアプリケーションを指定して新しいプロジェクトを作成します。

4. 参照に2.でダウンロードしたモジュールを追加します。
(1)ダウンロードしたMJPEG_bin.zipを展開します。
(2)MjpegProcessor.dllを作成したプロジェクトにコピーします。
(3)ソリューションエクスプローラで参照の追加を選択します。

(4)MjpegProcessor.dllを参照で追加します。

5. ソースコードに実装します。
(1)XAMLエディタでGUIを作成します。

<Window x:Class="TestMjpegDecoder.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="TestMjpegDecoder" Height="350" Width="525">
<DockPanel>
<DockPanel DockPanel.Dock="Top">
<Button Name="btnStart" Width="48" DockPanel.Dock="Right" Content="開始" Click="btnStart_Click"/>
<Button Name="btnStop" Width="48" DockPanel.Dock="Right" Content="停止" Click="btnStop_Click"/>
<TextBox Name="textUrl" Height="24" DockPanel.Dock="Left"/>
</DockPanel>
<Viewbox>
<Image Name="imgMJPEG"/>
</Viewbox>
</DockPanel>
</Window>

(2)MjpegProcessorの名前空間を追加します。

using MjpegProcessor;

(3)初期化処理を追加します。

MjpegDecoder m_jpegdecoder;
public MainWindow()
{
InitializeComponent();
//インスタンスを作成する
m_jpegdecoder = new MjpegDecoder();
//フレーム取得ハンドラを設定する
m_jpegdecoder.FrameReady += FrameReady;
}
public void FrameReady(object sender, FrameReadyEventArgs e)
{
//取得した画像をimageに設定する
imgMJPEG.Source = e.BitmapImage;
}

(4)開始のハンドラを追加します。

private void btnStart_Click(object sender, RoutedEventArgs e)
{
m_jpegdecoder.ParseStream(new Uri(textUrl.Text));
}

(5)停止のハンドラを追加します。

private void btnStop_Click(object sender, RoutedEventArgs e)
{
m_jpegdecoder.StopStream();
}

サンプルコードのダウンロード
TestMjpegDecoder.zip