播放实时视频采集画面

展示如何拉入实时视频采集画面并在UE4中使用媒体框架工具播放。

Windows
MacOS
Linux
See Also
On this page

虚幻引擎4(UE4)中的媒体框架以能够在引擎中播放的媒体格式支持视频和音频采集设备。例如,您可以从网络摄像头获取实时视频,然后在UE4中的静态网格体上或作为HUD的一部分直接播放。或者,您可以将项目部署到移动设备,并检索前置或后置摄像头视频,并在应用程序中播放。

在本示例中,我们将以网络摄像头的视频采集为例,在游戏期间作为HUD的一部分播放这个视频。

WebCamHero.png

步骤

在本操作指南中,我们使用启用了 初学者内容包蓝图第三人称模板(Blueprint Third Person Template) 项目。 您还必须在电脑上连接网络摄像头。

  1. 展开 源(Sources) 面板,创建名为 电影(Movies) 的文件夹,然后在该文件夹中,创建 媒体播放器(Media Player) 并链接名为 MediaPlayer媒体纹理(Media Texture) 资源。

    WebCam_01.png

  2. 打开 MediaPlayer 资源,然后在 媒体URL(Media URL) 字段旁边,单击并展开 采集设备(Capture Devices),在 视频(Video) 下找到您的摄像头。

    WebCam_02.png

    根据您的电脑设置,显示的采集设备数量和名称可能与截图不同。

    在选择您的视频采集设备时,来自摄像头的视频将显示在媒体播放编辑器内部。

  3. 高亮显示并单击右键,复制“媒体URL(Media URL)”字段中显示的 媒体URL 字符串。

    WebCam_03.png

    根据您的电脑设置,显示的URL字符串可能与截图不同。

  4. 内容浏览器 单击右键,在 用户界面(User Interface) 下面,选择 控件蓝图(Widget Blueprint) 并命名为 HUD

    WebCam_04.png

    我们将在该用户界面内部使用 媒体纹理(Media Texture) 来显示从网络摄像头获取视频的画中画风格HUD。

  5. 打开 HUD 控件蓝图,然后从 选用板(Palette) 窗口,将 图像(Image) 拖到图形上并根据需要调整大小。

    WebCam_05.png

    我们将窗口放在左上角,但是您可以放在任何想放的地方。

  6. 选中该 图像(Image),在 细节(Details) 面板中的 笔刷(Brush) 下面,将 图像(Image) 设置为 第1步 创建的 MediaPlayer_Video 媒体纹理。

    WebCam_06.png

  7. 关闭 HUD 控件蓝图,然后从主编辑器工具栏中,单击 蓝图(Blueprints),并选择 打开关卡蓝图(Open Level Blueprint)

    WebCam_07.png

    虽然我们并没有直接打开媒体源,而是复制媒体URL,但仍需要将其打开以便在运行时播放。

  8. 我的蓝图(My Blueprint) 面板中,创建一个 媒体播放器对象引用(Media Player Object Reference) 类型的变量并命名为 媒体播放器(Media Player),然后分配 媒体播放器(Media Player)

    WebCam_08.png

    您可能需要单击 编译(Compile) 按钮来编译蓝图,然后再分配“媒体播放器(Media Player)”变量的 默认值(Default Value)

  9. 按住 Ctrl 键并将 媒体播放器(MediaPlayer) 变量拖到图形上,然后单击右键并添加 事件开始播放(Event BeginPlay) 节点。

    WebCam_09.png

    我们已经创建了想要对其执行操作的媒体播放器的引用和用于指示游戏开始的事件

  10. 单击右键并添加 创建控件(Create Widget) 节点(以 HUD 作为 类(Class)),然后拖出 返回值(Return Value) 引脚,使用 添加到视口(Add to Viewport) 并按图所示进行连接。

    WebCam_10.png

    我们在这里要表达的是,当游戏开始时,创建HUD控件蓝图,然后将其添加到玩家视口。

  11. 拖出图形中 媒体播放器(Media Player) 节点引脚,使用 打开URL(Open URL) 并粘贴在 第3步 复制的URL,并按图所示进行连接。

    WebCam_11.png

    如果您现在在编辑器中播放,来自网络摄像头的视频将会出现在您在所需位置放置的HUD图像上。

    WebCam_12.png

    在我们的示例中,我们指定了要打开的媒体URL,但需要知道的是,实际情况并非总是如此。 您可能会将项目打包并通过这种功能分发给其他人,然后想要获取最终用户连接的采集设备并使用其中的一个设备。 或者,您可能想将项目部署到移动设备,并需要前置或后置摄像头视频来用作媒体源。 您可以使用 列举采集设备(Enumerate Capture Devices) 功能来返回所有连接的采集设备,并获取有关这些设备的信息。

  12. 在图形中单击右键,搜索并添加 列举视频采集设备(Enumerate Video Capture Devices) 函数。

    WebCam_13.png

    有一些用于音频、视频和网络摄像头采集设备的列举元素(网络摄像头用于移动设备,因为您可以获取前置或后置摄像头)。

  13. 拖出 过滤器(Filter) 引脚并使用 创建位掩码(Make Bitmask) 节点。

    WebCam_14.png

    使用“创建位掩码(Make Bitmask)”将使您能够筛选出一组特定的设备子集。

  14. 选中 创建位掩码(Make Bitmask) 节点,在 细节(Details) 面板中,将 位掩码列举(Bitmask Enum) 更改为 EMediaVideoCaptureDeviceFilter,然后在过滤器中启用它们。

    WebCam_14b.png

    这里我们将筛选每一个启用的选项来返回采集设备(您可以排除想要省略的设备,缩小返回设备列表)。

  15. 输出设备(Out Devices),使用 获取副本(Get Copy) 节点并拖出其输出引脚,使用 Break MediaCpatureDevice 节点并连接到 打开URL(Open URL),如图所示。

    单击查看大图。

    该过程将查找第一个可用采集设备,并返回其URL,之后将通过“打开URL(Open URL)”使用这个URL来打开视频源进行播放。

  16. 编译(Compile) 并关闭关卡蓝图,然后单击主工具栏中的 播放(Play) 按钮来在编辑器中播放。

最终结果

当您在编辑器中播放时,来自您的摄像头的视频将会通过引擎推送并显示在您的HUD上。

要获取移动设备上的前置或后置摄像头:

  • 使用 列举视频采集设备(Enumerate Video Capture Devices) 节点,然后将 位掩码列举(Bitmask Enum) 设置为 EMediaWebcamCaptureDeviceFilter 选项。

  • 创建位掩码(Make Bitmask) 节点上,标出您想要获取的摄像头。

WebCam_15.png

Select Skin
Light
Dark

Welcome to the new Unreal Engine 4 Documentation site!

We're working on lots of new features including a feedback system so you can tell us how we are doing. It's not quite ready for use in the wild yet, so head over to the Documentation Feedback forum to tell us about this page or call out any issues you are encountering in the meantime.

We'll be sure to let you know when the new system is up and running.

Post Feedback