EaayAR_VideoPlay
|
相较于扫描识别图后出现模型，视频所能传达的信息更丰富，体验更好，因此常常用在品牌营销上。EasyAR SDK 对此功能提供了较好的支持。这篇分享主要是关于EasyAR 扫描识别图出现视频的几种方式与一些市面上常见的功能开发。
目录：
1.本地视频
2.URL
3.透明视频
4.常用功能
Step 1: 准备
所需资源：
（1）识别图：链接:https://pan.baidu.com/s/1o8Lxqu2 密码:g846
（2）视频： 链接:https://pan.baidu.com/s/1slumOTR 密码:3i6w
建议学习本篇之前，对EasyAR 开发有一定的了解。不熟悉的可以查阅：
<font size="4" style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">http://forum.easyar.cn/portal.php?mod=view&aid=2</font>
Step 2:开发环境搭建
下载EasyAR SDK for Basic（Unitypackage），并导入Unity，示例如下：
[图片上传中...(image-20dfce-1512695321896-31)]
[图片上传中...(image-a099eb-1512695321896-30)]
常规操作，删除
<font size="4" style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">Main Camera</font>
，
将
<font size="4" style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">EasyAR_ImageTracker-1</font>
拖到面板中，并填写Key
[图片上传中...(image-a2fb96-1512695321895-29)]
拖动
<font size="4" style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">ImageTarget</font>
到面板中,命名为"
Local_Play
"
[图片上传中...(image-596f3d-1512695321895-28)]
Step 3:本地视频播放
首先我们新建一个脚本：
<font size="4" style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">SampleImageTargetBehaviour</font>
主要用来判断识别图的found 与 lost
代码内容（与显示模型时的处理方法相同）：
[图片上传中...(image-cca264-1512695321895-27)]
<font size="4" style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">具体也可参考官网：
https://www.easyar.cn/doc/EasyAR%20SDK/Getting%20Started/2.0/Setting-up-EasyAR-Unity-SDK.html</font>
删除ImageTarget组件上的脚本（
<font size="4" style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">ImageTargetBehaviour</font>
），将我们新建的脚本挂上去
[图片上传失败...(image-35c645-1512695321895)]
新建一个文件夹：
<font size="4" style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">StreamingAssets</font>
用来放我们的识别图与视频资源
ps：本次案例演示使用的识别图（namecard）是（后续不做描述）：
[图片上传中...(image-90bae-1512695321895-25)]
填写识别图信息（两种方法：1.直接填写图片名.jpg 2.通过json格式）
具体操作细节可以看：
<font size="4" style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">http://forum.easyar.cn/portal.php?mod=view&aid=2</font>
[图片上传中...(image-138dec-1512695321895-24)]
然后在ImageTarget 下新建一个 Plane ，适当的调节大小
[图片上传中...(image-bd614-1512695321895-22)]
在Plane 上面挂一个脚本：
VideoPlayerBehaviour 。
并且对其参数进行设置，示例如图：
[图片上传中...(image-9cec45-1512695321895-23)]
部分参数说明：
（1）path ：本地视频路径： 文件名.mp4 格式
（2）Type：视频格式
[图片上传中...(image-1162b4-1512695321895-21)]
（3）Video Scale Mode：视频缩放格式
[图片上传中...(image-16c84d-1512695321895-20)]
（4）Video Scale Plane：定义在哪个平面进行缩放
[图片上传中...(image-3c8562-1512695321895-19)]
（5）Video Scale Factor Base：缩放因子。建议0.1
（6）Storage ： 储存加载方式
[图片上传中...(image-7e774a-1512695321895-18)]
一切准备好之后，打包成APK，在移动端测试即可（目前不支持在PC端直接进行测试）
Step 4: URL 在线视频播放
首先将一个ImageTarget 预制体拖到面板中,命名为"
<font size="4" style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">URL_Play</font>
"
[图片上传中...(image-a1667-1512695321894-17)]
然后在ImageTarget 下面新建一个脚本(
AutoPlay_URL
) ,脚本内容与上面创建本地视频播放时的
<font size="4" style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">SampleImageTargetBehaviour</font>
脚本内容相同（可以采取复制）：
[图片上传中...(image-6f4fcf-1512695321894-16)]
PS：本次同样采取的是同一张识别图方便测试，在实际案例中需根据自己需求更换识别图
然后我们创建一个
Plane，
在它的上面挂一段脚本
（
<font size="4" style="word-wrap: break-word; margin: 0px; padding: 0px; text-decoration: none; font-style: normal;">VideoPlayerBehaviour
.cs</font>
）,
与之前操作相似，填好相关参数（Path可以先不用管，因为我们需要代码获取URL）：
[图片上传中...(image-400991-1512695321894-15)]
新建一个文件夹"
Resources
" ,将制作好的Plane 放进去制成预制体
[图片上传中...(image-cba925-1512695321894-14)]
在
AutoPlay_URL
脚本中继续编写相关代码：
首先在开头定义一个URL：
private
string
video =
@"https://sightpvideo-cdn.sightp.com/sdkvideo/EasyARSDKShow201520.mp4"
;
接着定义一个方法"LoadVideo" 来加载我们的视频资源
public
void
LoadVideo()
{
GameObject
subGameObject = Instantiate(
Resources
.Load(
"Plane"
,
typeof
(
GameObject
)))
as
GameObject
;
subGameObject.transform.parent =
this
.transform;
subGameObject.transform.localPosition =
new
Vector3
(
0
,
0.225f
,
0
);
subGameObject.transform.localRotation =
new
Quaternion
();
subGameObject.transform.localScale =
new
Vector3
(
0.8f
,
0.45f
,
0.45f
);
VideoPlayerBaseBehaviour
videoPlayer = subGameObject.GetComponent<
VideoPlayerBaseBehaviour
();
if
(videoPlayer)
{
videoPlayer.Storage =
StorageType
.Absolute;
videoPlayer.Path = video;
videoPlayer.EnableAutoPlay =
true
;
videoPlayer.EnableLoop =
true
;
videoPlayer.Open();
}
}
具体的数值大家可以自行设置。
最后在Start 方法中调用即可：
protected
override
void
Start()
{
base
.Start();
LoadVideo();
}
完整代码如下：链接
:https://pan.baidu.com/s/1dFs93Zr 密码:w5b7
[图片上传中...(image-725e09-1512695321894-13)]
编译测试即可。
Step 5: 透明视频播放
透明视频较于普通的视频在视觉上有很大的美感与创新感，在营销上也有不错的应用。在介绍使用EasyAR SDK开发关于透明视频功能之前，先简单介绍一下如何制作透明视频（本篇先简单介绍，后续会专门出一篇讲解）。
（1）导入带RGB+Alpha通道视频，在AE里面创建一个合成：
[图片上传中...(image-797de5-1512695321893-12)]
（2）选中合成Ctrl+K，设置合成大小(推荐使用原视频大小宽度乘以2倍），选中视频图层，Ctrl+D复制视频
[图片上传中...(image-67af4a-1512695321893-11)]
（3）调整合成里面的视频位置（如何对称：初始状态时，两个视频内容在画布中央位置重叠。将图层1视频向左移动，移动尺寸=视频初始宽度/2，将图层2视频右移相同像素）
[图片上传中...(image-39f5b9-1512695321893-10)]
（4）把右边的一个视频加个特效使右边变成白色遮罩即可，使用哪种具体特效都可以，只要能变成白色遮罩就行：选择右边图层，点击右键--效果--颜色校正—（具体效果）
[图片上传中...(image-9da160-1512695321893-9)]
（5）输出视频（推荐用MP4格式）
与本地视频播放和URL视频播放一样，拖一个ImageTarget 到面板中，命名为"
Transparentvideo_Play
"
[图片上传中...(image-ebb2bc-1512695321893-8)]
将之前创建的
SampleImageTargetBehaviour
挂在上面，填写相关参数
[图片上传中...(image-24cfc7-1512695321893-7)]
在其下面创建一个
Sphere
，调整相应大小
[图片上传中...(image-4aef07-1512695321893-6)]
然后在
Sphere
上面挂一个脚本：
VideoPlayerBehaviour
调整相应参数：
[图片上传中...(image-7e401c-1512695321893-5)]
我们新建一个材质球"
Transparent
",Shader 设置为
EasyAR--TransparentVideo
[图片上传中...(image-7b3751-1512695321893-4)]
挂到Sphere上面即可。编译运行。
Step 6:常用接口
EasyAR 为我们封装了许多有用的接口，方便我们调用实现市面上常见的功能。
就比如：我们在扫描识别图之后播放视频，想要手动控制暂停与开始，使用EasyAR SDK可以方便快速的实现
我们在上面本地视频的基础上进行开发。在
Plane
上面添加
Box Collider
组件，并勾选Trigger
[图片上传中...(image-db2481-1512695321893-3)]
新建一个脚本"VideoCon"，挂在Plane上
[图片上传中...(image-a94cd0-1512695321892-2)]
编写代码，其实处理方法十分简单：
using
System.Collections;
using
System.Collections.Generic;
using
UnityEngine;
using
EasyAR;
public
class
VideoCon
:
MonoBehaviour
{
private
bool
isClick =
false
;
void
OnMouseDown()
{
if
(!isClick) {
this
.GetComponent<
VideoPlayerBehaviour
().Pause ();
isClick =
true
;
}
else
{
this
.GetComponent<
VideoPlayerBehaviour
().Play ();
isClick =
false
;
}
}
}
主要运用到：这两个方法
[图片上传中...(image-69b357-1512695321892-1)]
其实还有很多可以实现的，比如做个进度条控制进度，相关方法：
[图片上传中...(image-198c61-1512695321892-0)]
具体的关于视频的接口与方法请看：
|
