Rx 및 OpenCVSharp를 사용하여 쉽게 카메라 캡처 앱 만들기

소개



최근 몇년은 프로젝트에 틈이 없고(게다가 타이트 스케줄) 자신의 자기 단련이 완만하게 되어 있었습니다만, 굉장히 사내 니트가 되었습니다 이것을 기회에 다양한 것에 도전해 업할까라고 생각하고 있습니다.
자신의 경험 분야는 C#/WPF/MVVM이므로, 그것을 조합해 할 수 있는 것을 실험해 나가고 싶습니다.

카메라 캡처 앱



WPF/MVVM/Rx (Reactive Extensions)/OpenCV를 조합하면 1 시간 정도로 카메라 캡처 앱을 만들 수 있습니다.
이번에는 그것을 소개합니다.

MVVM 프레임워크



Livet은 ugaya40이 중심으로 개발한 국산 MVVM 프레임워크입니다.
메이저인 곳에서는, PRISM 이나 MVVM Light Toolkit 등 여러가지 있습니다만, 우선은 국산이라고 하는 곳에서 안심감이 있는 것은 아닐까요.

Livet 도입



Livet의 도입은, Livet의 셋업 프로그램을 취득해, 셋업을 하기만 하면 됩니다.

Rx (Reactive Extensions) 도입



NuGet에서 구하십시오.

OpenCVSharp 도입



NuGet에서 구하십시오.

작성 절차



  • VS2013을 시작하여 새 프로젝트를 만들 때 "Livet WPF4.5 MVVM Application"을 선택하십시오.


  • 여기서 조심하고 싶은 것은, Livet의 프로젝트를 작성하면 솔루션 플랫폼이 「x86」이 됩니다. 나중에 도입하는 「OpenCVSharp」는 「AnyCPU」이외라면 도입의 마지막으로 에러가 되므로, 여기서 「AnyCPU」를 작성해 주세요.

  • 솔루션 플랫폼 콤보 상자 선택
  • 구성 관리자를 선택하고 구성 관리자를 엽니 다.
  • "액티브 솔루션 플랫폼"에서 "새로 만들기"를 선택
  • 「새 솔루션 플랫폼」의 화면이 열리므로 「Any CPU」가 표시되고 있는 것을 확인하고 「OK」를 누릅니다.
  • 이상으로 「Any CPU」가 작성됩니다.



  • 패키지를 도입합니다.
    [도구]-[NuGet 패키지 관리자]-[패키지 관리자 콘솔]을 선택하여 NuGet 콘솔을 엽니다.


  • Rx (Reactive Extensions) 패키지를 도입하십시오.PM> Install-Package Rx-WPF
  • 그런 다음 OpenCVSharp 패키지를 도입하십시오.PM>Install-Package OpenCvSharp-AnyCPU

  • 이상으로 아래 준비는 끝입니다.

    구현



    ViewModel 측



    ViewModels 폴더 안에 MainWindowViewModel.cs가 있으므로 열어주십시오.
    using의 추가 정의는 다음과 같습니다.

    MainWindowViewModel.cs
    using System.Reactive.Linq;
    using System.Reactive.Concurrency;
    using OpenCvSharp;
    using OpenCvSharp.Extensions;
    using System.Windows.Media.Imaging;
    

    그런 다음 public void Initialize() 근처를 다음 코드로 다시 작성하십시오.

    MainWindowViewModel.cs
    #region ImageSource 表示画像
    private BitmapSource _CaptureImageSource;
    /// <summary>
    /// 表示画像
    /// </summary>
    public BitmapSource CaptureImageSource
    {
        get
        { return _CaptureImageSource; }
        set
        { 
            if (_CaptureImageSource == value)
                return;
            _CaptureImageSource = value;
            RaisePropertyChanged();
        }
    }
    #endregion
    
    /// <summary>
    /// 初期化
    /// </summary>
    public void Initialize()
    {
        var capture = new CvCapture(0);
        Observable.Interval(TimeSpan.FromMilliseconds(1), DispatcherScheduler.Current)
            .Select(_ => Cv.QueryFrame(capture))
            .Where(frame => frame != null)
            .Subscribe(frame =>
            {
                var bitmapSource = frame.ToBitmapSource();
                frame.Dispose();
                this.CaptureImageSource = bitmapSource;
            });
    }
    

    View측



    Views 폴더 안에 있는 MainWindow.xaml 를 열고 <Grid> 근처를 다음과 같이 다시 씁니다.

    MainWindow.xaml
    <Grid>
        <Image Source="{Binding CaptureImageSource}" />
    </Grid>
    

    실행



    VS2013의 "시작"버튼을 눌러 실행하십시오.
    PC에 웹캠이 있으면 이미지가 나타날 것입니다.

    매우 쉽게 캡처 프로그램을 할 수 있습니다.

    좋은 웹페이지 즐겨찾기