【UE Unreal Camera】【保姆级教程】手把手教你通过UE打开摄像头/预览图像画面

概述

  最近在做一个游戏的开发,需要通过UE去打开用户的摄像头(ios,android上的手机摄像头;windows,mac上的电脑摄像头),预览图像,并且获取图像的帧数据进行数据的处理。UE作为一个成熟的,跨平台的游戏开发引擎,按理说应该有现成的api来进行实现我这个并不算刁钻的功能吧。
  本篇文章记录了通过UE来实现上述功能的具体实现方式,以及实现的过程中遇到的大坑,最后比使用UE来完成上述功能的一系列更好的方法

功能的实现

  经过一番研究,UE确实有相关操作相机的功能。根据UE的官方文档:“虚幻引擎4(UE4)中的媒体框架以能够在引擎中播放的媒体格式支持视频和音频采集设备)”。(UE播放实时视频采集)UE提供相关操作相机的模块叫做MediaPlayer。通过MediaPlayer可以获取相机列表,并且打开相机,并实现相机的预览。让我来手把手教你如何实现吧~

1 准备工作

  既然是手把手,那当然是从新项目开始,首先创建一个空白模板的UE工程

ue emmylua调试_unreal engine 4


  接着在内容浏览器中新建一个媒体播放器,并为其创建对应的MediaTexture。(勾选如下内容)

ue emmylua调试_移动设备_02


  成功之后如下所示:

ue emmylua调试_移动设备_03


  准备工作完成,现在就可以开始绘制蓝图,打开相机了!2 打开相机

  打开相机这一块,首先要表扬一下UE,这一块官方文档写的挺不错也很详细了,照着他的蓝图去画就可以了,当然这个官方文档中前两步Create HUD Widget和Add to Viewport是用来创建Widget蓝图的,是和操纵相机无关的,为了更简化得说明,在我自己实例工程中没有这两步。

官网得打开媒体播放器蓝图(供参考)

ue emmylua调试_ue emmylua调试_04


  (如果你要快速达到目的,下面的文字可以不看,只要根据第一步所说的,创建好了相关的变量,然后在关卡蓝图中照着我这个蓝图画一下,就可以达到目的

ue emmylua调试_unreal engine 5_05

  下面讲一下图中的关键节点:

Enumerate Video Capture Devices:

  枚举出对应的摄像头设备,在Out Devices中输出找到的摄像头设备的ID。在输入节点的Filter中可以添加对摄像头ID筛选的条件。(比如针对移动设备来说,可以在此选择只列举前置摄像头,后置摄像头等)点击这个Make Bitmask的节点,在它的属性栏可以设置对应的位掩码选项。

ue emmylua调试_unreal engine 5_06


  对于移动设备来说,获取视频列表和创建位掩码的选择略有不同,移动设备使用的是这一套,关注一下红框标注的地方,这是和上面介绍的打开windows摄像头不同的地方。

ue emmylua调试_c++_07


Open Url:

  通过该函数可以打开相机,函数需要输入相机的url,这个我们已经通过breakMediaCaptureDevice获取到了,还需要输入的是一个媒体播放器。还记得最开始我们就创建了一个媒体播放器吗?我们需要在蓝图中找到它,然后将它最为输入,输入到这个函数中。

ue emmylua调试_移动设备_08


  大功告成!现在我们返回关卡见面,点击运行按钮。

ue emmylua调试_unreal engine 4_09


  在运行时我们点击这个CameraMediaPlayer,就可以看到摄像头采集的画面,恭喜你,你已经通过UE打开了摄像头!

  当然我们要做的事情是要让采集的画面运行在游戏中,接下来我来教你如何在游戏中展示相机画面!3 画面预览

  这一步异常简单。All you need is just a plane!😉

  如下图所示,拖一个平面到关卡界面中去,如果找不到平面可以点击“窗口”—>“模式”。

ue emmylua调试_ue emmylua调试_10


  哈~到这里已经做好了哈。我已经成功的使用UE打开了摄像头,平且将画面移到了游戏关卡中。注意这一套是对Windows的摄像头和Android手机的摄像头通用的。

至于如何在iOS中实现相同的功能,以及如何获取对应图像的帧数据,我们下期见!

Demo工程说明

  Demo工程包含以上所讲内容实例,进入工程以后,点击运行,就可以看到效果,并显示在游戏中。打包出来以后同样可以在Android手机上使用。(注意Mac电脑和iOS手机不可用)