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)]
具体的关于视频的接口与方法请看:
|