WPF - XDL Tutorial

XDL VideoView 활용 첫번째

(piXoneer XDL Tutorial)

 

 

 

 

     

NXVideoView를 활용하여 다양한 포맷의 동영상을

도시하는 기능을 구현합니다.

 

 

2019. 04.

 

 

목차

XDL VideoView 활용 첫번째... 1

1    사용하기... 3

1.1    NXVideoView 이용한 예제 프로그램 만들기... 3

1.2    Driver복사하기... 4

1.3    메뉴 생성하기... 5

1.4    NXVideoView컨트롤 올리기... 6

1.5    동영 열기 기능... 6

 

 

 

 

1     사용하기

 

1.1    NXVideoView를 이용한 예제 프로그램 만들기

1.1.1     Visual Studio 2015을 실행한다.

1.1.2     메뉴 [파일]-[새로 만들기]-[프로젝트]를 선택한다.

 

 

1.1.3     [새 프로젝트] 대화상자에서 왼쪽의 템플릿 창에서 “Visual C#”을 선택하고, 대화상자 중간의 목록에서 “WPF 응용 프로그램을 선택한다.

사용자가 원하는 경로를 선택한 다음 프로젝트 이름을 “XDL_VideoView1” 으로 입력하고 [새 프로젝트] 대화상자의 확인버튼을 클릭한다. 이 문서에서는 대화상자 오른쪽 아래에 있는 “솔루션용 디렉터리 만들기”는 선택하지 않겠다. “확인” 버튼을 누르면 프로젝트가 기본적으로 생성되고 화면에 Window을 디자인할 수 있는 화면이 뜬다. 만약 아래와 같은 Window 창이 생성되지 않으면, [솔루션 탐색기] 창에서 MainWindow.xaml”를 마우스 더블클릭을 하여 창을 연다.

 

1.1.4     솔루션 탐색기의 프로젝트 하부의 [참조]의 오른쪽 마우스 클릭을 통해 [참조추가]를 선택한다.

 

 

1.1.5     [찾아보기]탭으로 이동한 후 “C:\Pixoneer\XDL1.2\bin\”경로로 이동한다. Ctrl키를 누른 채 “NXDL.dll, “NXVideo.dll”을 선택한 후 “확인”버튼을 선택한다.

1.1.6     솔루션 탐색기의 프로젝트 하부의 [참조]항에 NXDL, NXVideo가 추가되었음을 확인한다.

1.1.7     NXVideo를 활용하기 위해 MainWindow.xaml 창에서 namespace를 다음과 같이 추가한다.

1.2    Driver복사하기

Driver는 현재 데모 버전에서는 설치된 경로로부터 실행 경로 하부로 직접 복사하여 넣어야 한다. 차기 버전은 복사를 하지 않아도 실행될 수 있도록 구성된다.

 

1.2.1     XDL 라이브러리가 설치된 경로(C:\Pixoneer\XDL1.2\bin)로 이동한다.

 

1.2.2     VDDrivers폴더를 통째로 복사하여 현재 프로젝트의 “…..\XDL_VideoView1\bin\Debug”폴더 하부에 복사하여 넣는다.

1.2.3     F5키를 눌러 프로그램을 실행하면 다음과 같이 구성된다.

 

1.3    메뉴 생성하기

1.3.1     MainWindow.xaml창에서 기본으로 생성된 Grid 레이아웃에 Grid.RowDefinition을 이용하여 두 개의 Row을 생성한다. 도구 상자에서 Menu컨트롤을 끌어다가 첫 번째 Cell에 배치하고 오른쪽 버튼을 클릭하여 MenuItem 추가한다.


 

MenuItem이 추가된 것을 확인한 뒤 [속성]창에서 Header“File”“Tools”를 각각 입력한다

 

 

아래와 같은 메뉴를 얻을 수 있다.

 

 

[File] 하부에 추가적으로 메뉴를 생성하려고 한다. [File]에 오른쪽 버튼을 클릭하고 MenuItem을 추가한다. [File] 하부에 MenuItem이 생성된 것을 확인할 수 있다.

 

 

생성된MenuItem[속성]창에서 Header“Open”으로 입력한다. MenuItem의 이름은 아래의 표를 참고하여 입력한다.

 

 

아래와 같은 메뉴가 구성되었음을 확인할 수 있다.

 

 

아래의 표를 참고하여 메뉴를 생성하도록 한다.

 

Control Type

Header

Name

MenuItem

_File

 

MenuItem

_Open

openFileMenuItem

 

1.3.2      이어서 메뉴에 동일한 방법으로 MenuItem을 사용해 [Tool] – [Play], [Pause], [Stop], [Resume]을 생성하고 이를 확인한다.

 

 

아래의 표를 참고하여 메뉴를 생성한다.

 

Control Type

Header

Name

MenuItem

_Tools

 

MenuItem

_Play

playToolsMenuItem

MenuItem

_Pause

pauseToolsMenuItem

MenuItem

_Stop

stopToolsMenuItem

MenuItem

_Resume

resumeToolsMenuItem

 

또한 XAML창이 아래와 같이 생성됨을 알 수 있다..

 

<Grid>
      <Grid.RowDefinitions>
            <RowDefinition Height="30"/>
            <RowDefinition Height="*"/>
      </Grid.RowDefinitions>
        <Menu Grid.Row="0">
            <MenuItem Header="_File" Margin="5,5,4,5">
                <MenuItem x:Name="openFileMenuItem" Header="_Open"/>
            </MenuItem>
            <MenuItem Header="_Tools">
                <MenuItem x:Name="playToolsMenuItem" Header="_Play"/>
                <MenuItem x:Name="pauseToolsMenuItem" Header="_Pause"/>
                <MenuItem x:Name="stopToolsMenuItem" Header="_Stop"/>
                <MenuItem x:Name="resumeToolsMenuItem" Header="_Resume"/>
            </MenuItem>
        </Menu>
</Grid>

 

1.4    NXVideoView컨트롤 추가하기

1.4.1     두 번째 CellGrid를 배치하고 WindowsFormsHost 컨트롤을 도구상자로부터 끌어서 생성하거나 XAML 창에 입력하여 생성한다. 이는 Window formsHosting 해주는 개체이며 Window Forms Control을 사용할 때 이용된다. (WindowFormIntegrationSystem.Window.Forms을 어셈블리에 대한 참조 추가를 한다.)

 

 

빨간색 원을 클릭한 상태로 WindowFormsHost창의 크기를 변화시켜 두 번째 Row Grid창에 맞게 설정한다. 다음과 같은 Window 창을 얻을 수 있다..

 

 

1.4.2     앞서 추가한 namespacenxVideo를 이용하여 NXVideoView컨트롤을 불러온다. NXVideoView의 이름(Name) nxVideoView1으로 한다.

 

<Grid Grid.Row="1">
       <WindowsFormsHost  Margin="3,0,0,3">
           <nxVideo:NXVideoView x:Name="nxVideoView1">
       </WindowsFormsHost>
</Grid>

 

1.4.3     [F5]를 눌러 프로그램을 실행시킨다.

 

 

1.5    동영상 열기 기능

1.5.1     디자인창에서 [File]-[Open]을 더블 클릭하여 함수를 자동 생성한다.

 

 

private void openFileMenuItem_Click(object sender, RoutedEventArgs e)
{

}

 

1.5.2     NXVideo객체들을 사용하기 위해서 다음과 같이 NXVideo 네임스페이스를 추가한다.

using Pixoneer.NXDL.NXVideo;

 

1.5.3     NXVideoView구현시 필요한 XVideoIO, XVideo, XVideoChannel객체를 선언한다.

XVideoIO m_VideoIO; // Video입출력에 관한 객체를 생성. 
// XVideoIO객체는 XVideo객체를 생성한다.

XVideo m_Video; // XVideo객체는 실질적으로 비디오 스트리밍을 받아서 처리하는 객체이다. 
XVideoChannel m_channel;  
// XVideoChannel은 보통 1개의 파일에는 1개의 스트리밍이 존재하지만, 
// MPEG2TS와 같이 MultiChannel을 지원하는 것도 존재한다.
// 결국 XVideoChannel이 스트리밍에 대한 파싱 및 도시를 위한 
// 비디오 Frame 데이터 관리를 수행한다.

 

1.5.4     MainWindow 생성자에서 XVideoIO의 객체 생성을 수행한다.

public MainWindow()
{
       InitializeComponent();
       m_VideoIO = new XVideoIO(); // VideoIO를 생성
}

 

1.5.5     [File]-[Open]을 눌렀을 때 생성될 Open 대화상자와 선택된 파일에 대한 XVideo객체를 생성한다. 또한, XVideo객체에 실제 스트리밍을 담당하는 XVideoChannel객체를 활성화(Activate) 시켜 Frame을 내부적으로 생성하도록 지시한다.

 

private void openFileMenuItem_Click(object sender, RoutedEventArgs e)
{
      // 파일 Open을 수행한다.
      OpenFileDialog openFileDialog = new OpenFileDialog();
      openFileDialog.Filter = "TS file(*.ts)|*.ts||";
      openFileDialog.RestoreDirectory = true;

      Nullable<bool> result = openFileDialog.ShowDialog();      
      if (result != true) return;

// XVideoIO 객체로부터 XVideo 객체를 생성한다.
      string strError = null;
      m_Video = m_VideoIO.OpenFile(openFileDialog.FileName, "XFFMPDRIVER", 
out strError);

      if (m_Video == null)
      {
            MessageBox.Show(strError);
            return;
      }

      // XVideoView 객체에 XVideo 객체와 Muti Channel인 경우를 고려하여 XVideo 객체
// 안의 Channel에 대한 인덱스를 설정한다.
      int nIdxChannel = 0;
      nxVideoView1.SetVideoChannel(m_Video, nIdxChannel);

      // XVideo객체로부터 특정 인덱스에 해당하는 Channel을 꺼낸다.
      m_channel = m_Video.GetChannel(nIdxChannel);

      if (m_channel == null)
      {
            MessageBox.Show("Channel is not valid");
       }

       // Channel을 활성화 시키고 Play시킨다.
       m_channel.Activate();
}

 

1.5.6     메뉴에서 [Play], [Pause], [Resume], [Stop]버튼을 통해 자동으로 함수를 생성한다.

private void playToolsMenuItem_Click(object sender, RoutedEventArgs e)
{
      if (m_channel == null)
      {
           MessageBox.Show(" 재생을 위한 File을 추가 하십시오.");
      }
      else
      {
           m_channel.Play();
      }
}

private void pauseToolsMenuItem_Click(object sender, RoutedEventArgs e)
{
      if (m_channel == null)
      {
           MessageBox.Show("재생을 위한 File을 추가 하십시오.");
      }
      else
      {
           m_channel.Pause();
      }
}

private void stopToolsMenuItem_Click(object sender, RoutedEventArgs e)
{
      if (m_channel == null)
      {
           MessageBox.Show("재생을 위한 File을 추가 하십시오.");
      }
      else
      {
           m_channel.Stop();
      }
}

private void resumeToolsMenuItem_Click(object sender, RoutedEventArgs e)
{
      if (m_channel == null)
      {
          MessageBox.Show("재생을 위한 File을 추가 하십시오.");
      }
      else
      {
          m_channel.Resume();
      }
}

 

1.5.7     종료시에 XVideo객체와 XVideoView와 관계를 끊기 위해서 Window의 속성에서 WindowClose를 위한 함수를 자동 생성한다.

 

 

 

private void Window_Closing(object sender, System.ComponentModel.CancelEventArgs e)
{
      // Video 종료시에 XVideoView와 XVideo와의 관계를 정리한다.
      nxVideoView1.ResetVideoChannel();
      if (m_Video != null)
           m_Video.Close();
}

1.5.8     [F5]키를 눌러 프로그램을 실행한다. 홈페이지에서 샘플영상을 다운 받는다. [File]-[Open]메뉴를 눌러 football.ts파일을 연다. [Tool]-[Play], [Tool]-[Pause], [Tool]-[Resume], [Tool]-[Stop]을 눌러 기능을 확인한다.