
5.6 识别图片播放视频
视频播放只能在移动端进行调试。另外,视频播放对Unity版本有一定要求。已知在Unity 2018.1的版本是正常的,但是在Unity 2018.2的版本中会出现播放出一块黑色区域的现象。
5.6.1 在平面上播放视频
(1)在导入EasyAR SDK以后,添加“StreamingAssets”目录,并将要识别的图片导入到该目录中。
(2)新建一个场景,删除原有的“Main Camera”,从目录“EasyAR/Prefabs/Composites”里将预制件“EasyAR_ImageTracker-1”拖动添加到场景中,并将EasyAR的“SDK License Key”复制到“EasyARBehaviour”组件的“Key”属性中。
(3)将“EasyAR/Prefabs/Primitives”目录下的预制件“ImageTarget”拖动添加到场景中。
(4)将场景中的“ImageTracker”游戏对象拖入“ImageTarget”游戏对象的“ImageTargetBehaviour”组件的“Loader”属性中为该属性赋值,如图5-45所示。

图5-45
(5)将要识别的图片的路径填写在“ImageTargetBehaviour”组件的“Path”属性中,路径以“StreamingAssets”目录为根目录。
(6)设置“ImageTargetBehaviour”组件的“Storage”属性为“Assets”。
(7)将“ImageTarget”的“Size”属性按照要识别的图片比例进行设置。
(8)在“ImageTarget”游戏对象上单击鼠标右键,选择“3D Object→Plane”,为“ImageTarget”游戏对象添加一个类型为Plane的子对象。
(9)调整“Plane”游戏对象的大小,让其和父节点“ImageTarget”大小一致。
“Plane”的大小就是播放视频的大小,尽管与识别图片大小不一致也不会影响视频的播放,但是一般播放视频的大小和识别图片大小一致时给人的体验是最好的,如图5-46所示。

图5-46
(10)将目录“EasyAR/Scripts”目录中的“VideoPlayerBehaviour”脚本拖到“Plane”游戏对象下。
(11)将要播放的视频导入“StreamingAssets”目录,然后修改“VideoPlayerBehaviour”组件的属性。
(12)将要播放的视频的路径填写在“VideoPlayerBehaviour”组件的“Path”属性中,路径以“StreamingAssets”目录为根目录。
(13)将“Video Scale Factor Base”的值修改为“0.1”。
(14)将所有选框都选中。
(15)设置“VideoPlayerBehaviour”组件的“Storage”属性为“Assets”,如图5-47所示。运行结果如图5-48所示。提示的内容是“Video playback is available only on Android & iOS”,即视频播放只支持在安卓和苹果的移动端运行。播放视频的程序调试起来会比较麻烦,都需要打包以后在移动设备上运行才能看到结果。

图5-47

图5-48
(16)单击“File”菜单下的“Build Settings”,打开发布设置,如图5-49所示。

图5-49
(17)删除“Scenes In Build”下不用的场景,单击“Add Open Scenes”将当前场景添加到“Scenes In Build”当中。也可以直接将当前场景拖到“Scenes In Build”中,如图5-50所示。

图5-50
(18)单击“Platform”下的“Android”选项,然后单击“Player Settings”按钮打开运行设置窗口,如图5-51所示。

图5-51
用安卓来调试比用苹果调试方便一些。苹果调试需要将项目先发布成Xcode的项目然后再调试。这个过程不光需要有苹果的手机或者iPad,还必须有苹果计算机。所以,一般推荐使用安卓手机来调试。
(19)在“Inspector”窗口中修改“PlayerSettings”下的“Company Name”和“Product Name”的值,不能用默认的,自己取一个名称填入即可,如图5-52所示。

图5-52
(20)单击“Other Settings”标签,将EasyAR Key中的“PackageName”填入到“Other Settings”下的“Package Name”中。选中发布的最低版本,只要高于4.0即可,如图5-53所示。

图5-53
(21)EasyAR在导出Android和iOS应用时需要把Graphics API设置为OpenGL ES 2.0。在“Other Settings”标签下,将默认的“Auto Graphics API”的选项去掉,如图5-54所示。

图5-54
(22)单击右边的“+”按钮,再单击“OpenGLES2”,将OpenGL ES 2.0添加到项目中,如图5-55所示。

图5-55
(23)选中“Graphics APIs”下的其他项目,然后单击右边的“-”按钮,删除不用的项目,如图5-56所示。

图5-56
(24)选中“Rendering”下的“Static Batching”和“Dynamic Batching”选项,将“Rendering”下的其他选项去掉,如图5-57所示。

图5-57
(25)在“Build Settings”窗口中,单击“Build”按钮。
(26)在弹出的窗口中选择apk文件的保存路径,输入文件名,单击“保存”按钮,即可完成发布,如图5-58所示。将apk文件复制到手机上并安装,运行结果如图5-59所示。

图5-58

图5-59
5.6.2 视频播放的关键类
VideoPlayerBehaviour类是实现视频播放的关键类,可以被添加到任何物体上,视频将会在其上被播放,如图5-60所示。

图5-60
在“Path”属性里填写视频的路径,需要确保是UNIX方式的,使用“/”来分隔路径元素。
“Path”属性里的视频除了本地路径外,还可以是URL地址,例如官方给的https://sightpvideo-cdn.sightp.com/sdkvideo/EasyARSDKShow201520.mp4。
“Type”属性用于设置视频的类型,普通的视频用默认的“Normal”即可。
● Normal:普通视频。
● Transparent Side By Side:透明视频,左半边是RGB通道,右半边是Alpha通道。
● Transparent Top And Bottom:透明视频,上半边是RGB通道,下半边是Alpha通道。
“Video Scale Mode”用于设置视频缩放方式。
● None:不缩放。
● Fill:填充ImageTarget,视频会被缩放到与ImageTarget同样大小。
● Fit:适配ImageTarget,视频会被缩放到最大可适配到ImageTarget里面的大小。在多数情况下,选择该选项即可。
● Fit Width:适配ImageTarget的宽度,视频宽度会被设成和ImageTarget的宽度相同,而视频比例不变。
● Fit Height:适配ImageTarget的高度,视频高度会被设成和ImageTarget的高度相同,而视频比例不变。
“Video Scale Plane”用于设置视频在哪个平面进行缩放。
“Video Scale Factor Base”属性用于设置视频的基础缩放系数,在视频缩放过程中缩放后的视频大小会乘以这个系数。通常可以将plane设为0.1,其他简单物体设为1。
“Enable Auto Play”属性决定当图片被识别时是否自动播放视频。“Storage”属性是设置视频的路径,和图片追踪对象的类ImageTargetBaseBehaviour类的Storage属性类似。具体可以参看5.5.2小节。如果需要播放的视频源于URL地址,则需要选择为“Absolute”。
5.6.3 在3D物体上播放视频
EasyAR不仅可以在平面上播放视频,还可以在其他3D物体上播放视频。只要将之前例子中播放的游戏对象从“Plane”改成其他3D物体即可。
重复5.6.1小节的步骤(1)~(7),添加“EasyAR_ImageTracker-1”游戏对象和“ImageTarget”游戏对象并设置。
(8)在“ImageTarget”游戏对象上单击鼠标右键,选择“3D Object→Cube”,为“ImageTarget”游戏对象添加方块的3D对象的子对象。
(9)调整“Cube”游戏对象的大小和位置,让其成为在“ImageTarget”上方的一个方块,长宽略小于“ImageTarget”,如图5-61所示。

图5-61
(10)将目录“EasyAR/Scripts”目录中的“VideoPlayerBehaviour”脚本拖到“Cube”游戏对象下。
(11)将要播放的视频导入“StreamingAssets”目录,然后修改“VideoPlayerBehaviour”组件的属性。
(12)将要播放的视频的路径填写在“VideoPlayerBehaviour”组件的“Path”属性中,路径以“StreamingAssets”目录为根目录。
(13)将“Video Scale Factor Base”的值修改为“1”。
(14)将所有复选框都选中。
(15)设置“VideoPlayerBehaviour”组件的“Storage”属性为“Assets”,如图5-62所示。

图5-62
重复5.6.1小节的步骤(16)~(26),将项目打包成apk,并安装到移动设备上,运行效果如图5-63所示。这时会看到视频在一个方块的几个面上同时播放。

图5-63
5.6.4 播放透明视频
透明视频是一种特殊的视频,具体制作方式可以上网搜索。官方提供的透明视频直接播放的效果如图5-64所示。

图5-64
在透明视频播放的时候,需要3D物体上有特殊的纹理。透明视频播放只需要在上一小节的例子中修改两个地方,其他操作步骤都一样。
(1)修改3D物体的“Mesh Renderer”,为3D物体添加特殊的纹理。首先单击“Cube”游戏对象;接着单击“Mesh Renderer”组件左边的小箭头,打开详细内容;然后单击“Element 0”属性右边的按钮,在新窗口“Select Material”中选择“TransparentVideo”选项,如图5-65所示。

图5-65
(2)将“Cube”游戏对象下“Video Player Behaviour”组件的“Type”属性修改为“Transparent Side By Side”,如图5-66所示。修改完成后,打包,发送到移动设备运行。

图5-66
从技术上而言,透明视频的效果不如用Unity自带的粒子效果来实现更好、可控度更高、修改更方便。如果从成本上来说,某些情况下透明视频制作成本会低一些,也是一种选择,如图5-67所示。

图5-67