EaayAR_VideoPlay

作者: 萧非子 | 来源:发表于2017-12-08 09:09 被阅读18次

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 开发有一定的了解。不熟悉的可以查阅：

http://forum.easyar.cn/portal.php?mod=view&aid=2

Step 2:开发环境搭建

下载EasyAR SDK for Basic（Unitypackage），并导入Unity，示例如下：

[图片上传中...(image-20dfce-1512695321896-31)]

[图片上传中...(image-a099eb-1512695321896-30)]

常规操作，删除

Main Camera

，

将

EasyAR_ImageTracker-1

拖到面板中，并填写Key

[图片上传中...(image-a2fb96-1512695321895-29)]

拖动

ImageTarget

到面板中,命名为"

Local_Play

"

[图片上传中...(image-596f3d-1512695321895-28)]

Step 3:本地视频播放

首先我们新建一个脚本：

SampleImageTargetBehaviour

主要用来判断识别图的found 与 lost

代码内容（与显示模型时的处理方法相同）：

[图片上传中...(image-cca264-1512695321895-27)]

具体也可参考官网：

https://www.easyar.cn/doc/EasyAR%20SDK/Getting%20Started/2.0/Setting-up-EasyAR-Unity-SDK.html

删除ImageTarget组件上的脚本（

ImageTargetBehaviour

），将我们新建的脚本挂上去

[图片上传失败...(image-35c645-1512695321895)]

新建一个文件夹：

StreamingAssets

用来放我们的识别图与视频资源

ps：本次案例演示使用的识别图（namecard）是（后续不做描述）：

[图片上传中...(image-90bae-1512695321895-25)]

填写识别图信息（两种方法：1.直接填写图片名.jpg 2.通过json格式）

具体操作细节可以看：

http://forum.easyar.cn/portal.php?mod=view&aid=2

[图片上传中...(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 预制体拖到面板中,命名为"

URL_Play

"

[图片上传中...(image-a1667-1512695321894-17)]

然后在ImageTarget 下面新建一个脚本(

AutoPlay_URL

) ,脚本内容与上面创建本地视频播放时的

SampleImageTargetBehaviour

脚本内容相同（可以采取复制）：

[图片上传中...(image-6f4fcf-1512695321894-16)]

PS：本次同样采取的是同一张识别图方便测试，在实际案例中需根据自己需求更换识别图

然后我们创建一个

Plane，

在它的上面挂一段脚本

（

VideoPlayerBehaviour

.cs

）,

与之前操作相似，填好相关参数（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

在其下面创建一个

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)]

具体的关于视频的接口与方法请看：

https://www.easyar.cn/doc/EasyAR%20SDK/Unity%20Plugin%20Reference/1.0/VideoPlayerBaseBehaviour.html?highlight=videoplayer

|

网友评论

easyAR

本文标题：EaayAR_VideoPlay

本文链接：https://www.haomeiwen.com/subject/vhwsixtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

EaayAR_VideoPlay

相关文章