언리얼 엔진(UE)의 미디어 프레임워크는 비디오 및 오디오 캡처 디바이스를 엔진 내에서 재생할 수 있는 미디어의 한 형태로 지원합니다. 예를 들어, 웹캠에서 라이브 비디오 피드를 받아 UE 내 스태틱 메시나 HUD 일부에 직접 재생할 수 있습니다. 아니면, 프로젝트를 모바일 디바이스에 디플로이한 후 전방 또는 후방 카메라 비디오 피드를 받아 어플리케이션 안에서 재생시킬 수도 있습니다.
이 예제에서는, 웹캠에서 비디오 캡처 피드를 받아 게임플레이 도중 HUD 일부에 표시하도록 하겠습니다.
Electra Media Player는 현재 라이브 비디오 캡처 재생을 지원하지 않습니다.
Steps
여기서는 블루프린트 삼인칭 템플릿 프로젝트에 시작용 콘텐츠 를 포함시켜 사용하고 있습니다. 그리고 컴퓨터에 웹캠이 연결되어 있어야 합니다.
-
소스 패널을 펼치고 Movies 라는 폴더를 만든 뒤, 그 안에 미디어 플레이어 를 만들고 MediaPlayer 라는 미디어 텍스처 를 연결합니다.
-
MediaPlayer 애셋을 연 뒤 Media URL 칸 옆 Capture Devices (캡처 디바이스)를 클릭하여 펼친 뒤 Video (비디오) 아래에서 카메라를 찾습니다.
캡처 디바이스의 수와 표시되는 이름은 컴퓨터 구성 상태에 따라 스크린샷과 다를 수 있습니다.
비디오 캡처 디바이스를 선택하면, 카메라의 비디오가 미디어 에디터 플레이어 안에 표시됩니다.
-
Media URL 칸에 표시된 Media URL 스트링을 선택한 후 우클릭 복사합니다.
클릭하여 원본을 확인합니다.
The URL string displayed may differ from the screenshot based on your computer setup.
-
Inside the Content Browser, right-click and under User Interface select Widget Blueprint and call it HUD.
You are going to use your Media Texture inside your User Interface to display a picture-in-picture style HUD taking in and using your webcam video.
-
Open the HUD Widget Blueprint, then from the Content Drawer, drag-and-drop the MediaPlayer_Video texture into the HUD graph. You will see the video populate the Image field under Appearance.
-
Close the HUD Widget Blueprint, then from the Main Editor Toolbar, click Blueprints then select Open Level Blueprint.
While you are not directly opening a Media Source and instead have copied the Media URL, you still need to open it in order for it to play at runtime.
-
In the My Blueprint panel, create a variable called Media Player of the Media Player Object Reference type and assign your Media Player.
클릭하여 원본을 확인합니다.
컴파일 버튼을 클릭하여 블루프린트를 컴파일해야 Media Player 변수의 Default Value 할당이 가능할 것입니다.
-
Ctrl 키를 누르고 MediaPlayer 변수를 그래프에 끌어놓은 뒤, 우클릭하고 Event BeginPlay 노드를 추가합니다.
작업을 하고자 하는 미디어 플레이어로의 레퍼런스와 게임플레이 시작을 알릴 이벤트를 만들었습니다.
-
우클릭하고 Create Widget 노드를 추가한 뒤 (Class 는 HUD), Return Value 에서 Add to Viewport 를 사용하여 그림처럼 연결합니다.
여기서는 게임이 시작되면, HUD 위젯 블루프린트를 만들어 플레이어 뷰포트에 추가하고 있습니다.
-
그래프의 Media Player 노드에서 Open URL 을 사용하여 3단계에서 복사한 URL 을 붙여넣고 그림처럼 연결합니다.
클릭하여 원본을 확인합니다.
이제 에디터에서 플레이하면, 웹캠의 비디오가 원하는 위치에 배치한 HUD 이미지 상에 나타날 것입니다.
예제에서, 열려는 미디어 URL 을 지정했지만 그게 무엇인지를 항상 알 수는 없습니다. 이 기능으로 프로젝트를 패키징하여 다른 이에게 배포한 뒤, 최종 사용자가 연결한 캡처 디바이스를 구해 그 중 하나를 사용할 수도 있습니다. 아니면 프로젝트를 모바일 디바이스에 디플로이하고 전방 또는 후방 카메라 비디오 피드를 구해 그것을 미디어 소스로 사용할 수도 있습니다. Enumerate Capture Devices 함수를 사용하여 연결된 캡처 디바이스 전부를 반환한 뒤 그 디바이스 관련 정보를 구할 수 있습니다.
-
그래프에서 우클릭하고 Enumerate Video Capture Devices 함수를 검색하여 추가합니다.
오디오, 비디오, 웹캠 캡처 디바이스를 열거해 주는 함수입니다 (웹캠은 모바일 디바이스에서 전방 또는 후방 카메라를 구할 수 있습니다).
-
Filter 핀을 끌어놓고 Make Bitmask 노드를 사용합니다.
Make Bitmask 노드를 사용하면 특정 디바이스 서브셋 필터를 적용할 수 있습니다.
-
Make Bitmask 노드를 선택한 채, 디테일 패널에서 Bitmask Enum 을 EMediaVideoCaptureDeviceFilter 로 변경한 뒤 필터에서 각각을 켭니다.
여기서는 활성화된 옵션 각각을 필터링하여 캡처 디바이스를 반환하고 있습니다 (생략하고자 하는 것을 제외시켜 반환 디바이스 목록을 좁힐 수 있습니다).
-
Out Devices 에서 Get Copy 노드를 사용여 그 출력 핀에서 Break MediaCpatureDevice 노드를 통해 Open URL 에 그림처럼 연결합니다.
클릭하여 원본을 확인합니다.
이 프로세스는 사용가능한 첫 번째 캡처 디바이스를 찾아 그 URL 을 반환한 뒤, Open URL 에 사용하여 재생할 소스를 엽니다.
-
컴파일 후 레벨 블루프린트를 닫고 메인 툴바의 플레이 버튼을 눌러 에디터에서 플레이합니다.
최종 결과
에디터에서 플레이하면, 엔진으로 푸시된 카메라의 비디오 피드가 HUD 에 나타날 것입니다.
모바일 디바이스의 전방 또는 후방 카메라를 구하려면:
- Enumerate Video Capture Devices 노드를 사용하여 Bitmask Enum 을 EMediaWebcamCaptureDeviceFilter 옵션으로 설정합니다.
- Make Bitmask 노드에서 구하고자 하는 카메라를 설정합니다.
