找回密码
 立即注册
搜索
EasyAR 教程 Unity 查看内容

EasyAR 初学者入门指南(5)---显示视频

AlbertLee 2017-12-7 18:34

EasyAR 扫描识别图出现视频的三张方式与常用接口

相较于扫描识别图后出现模型,视频所能传达的信息更丰富,体验更好,因此常常用在品牌营销上。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,示例如下:


常规操作,删除 Main Camera EasyAR_ImageTracker-1 拖到面板中,并填写Key

拖动 ImageTarget 到面板中,命名为"Local_Play"

Step 3:本地视频播放
首先我们新建一个脚本:SampleImageTargetBehaviour 主要用来判断识别图的found 与 lost
代码内容(与显示模型时的处理方法相同):

删除ImageTarget组件上的脚本(ImageTargetBehaviour),将我们新建的脚本挂上去

新建一个文件夹:StreamingAssets 用来放我们的识别图与视频资源
ps:本次案例演示使用的识别图(namecard)是(后续不做描述):

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

然后在ImageTarget 下新建一个 Plane ,适当的调节大小

在Plane 上面挂一个脚本:VideoPlayerBehaviour 。并且对其参数进行设置,示例如图:

部分参数说明:
(1)path :本地视频路径: 文件名.mp4 格式
(2)Type:视频格式

(3)Video Scale Mode:视频缩放格式

(4)Video Scale Plane:定义在哪个平面进行缩放

(5)Video Scale Factor Base:缩放因子。建议0.1
(6)Storage : 储存加载方式

一切准备好之后,打包成APK,在移动端测试即可(目前不支持在PC端直接进行测试)

Step 4: URL 在线视频播放
首先将一个ImageTarget 预制体拖到面板中,命名为"URL_Play"

然后在ImageTarget 下面新建一个脚本(AutoPlay_URL) ,脚本内容与上面创建本地视频播放时的SampleImageTargetBehaviour 脚本内容相同(可以采取复制):

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

然后我们创建一个 Plane,在它的上面挂一段脚本VideoPlayerBehaviour.cs),与之前操作相似,填好相关参数(Path可以先不用管,因为我们需要代码获取URL):

新建一个文件夹"Resources" ,将制作好的Plane 放进去制成预制体

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(00.225f0);
            subGameObject.transform.localRotation = new Quaternion();
            subGameObject.transform.localScale = new Vector3(0.8f0.45f0.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


编译测试即可。

Step 5: 透明视频播放

透明视频较于普通的视频在视觉上有很大的美感与创新感,在营销上也有不错的应用。在介绍使用EasyAR SDK开发关于透明视频功能之前,先简单介绍一下如何制作透明视频(本篇先简单介绍,后续会专门出一篇讲解)。
(1)导入带RGB+Alpha通道视频,在AE里面创建一个合成:

(2)选中合成Ctrl+K,设置合成大小(推荐使用原视频大小宽度乘以2倍),选中视频图层,Ctrl+D复制视频

(3)调整合成里面的视频位置(如何对称:初始状态时,两个视频内容在画布中央位置重叠。将图层1视频向左移动,移动尺寸=视频初始宽度/2,将图层2视频右移相同像素)

(4)把右边的一个视频加个特效使右边变成白色遮罩即可,使用哪种具体特效都可以,只要能变成白色遮罩就行:选择右边图层,点击右键--效果--颜色校正—(具体效果)

(5)输出视频(推荐用MP4格式)

与本地视频播放和URL视频播放一样,拖一个ImageTarget 到面板中,命名为"Transparentvideo_Play"

将之前创建的SampleImageTargetBehaviour 挂在上面,填写相关参数

在其下面创建一个Sphere,调整相应大小

然后在Sphere上面挂一个脚本:VideoPlayerBehaviour 调整相应参数:

我们新建一个材质球"Transparent",Shader 设置为 EasyAR--TransparentVideo

挂到Sphere上面即可。编译运行。


Step 6:常用接口
EasyAR 为我们封装了许多有用的接口,方便我们调用实现市面上常见的功能。
就比如:我们在扫描识别图之后播放视频,想要手动控制暂停与开始,使用EasyAR SDK可以方便快速的实现

我们在上面本地视频的基础上进行开发。在Plane上面添加Box Collider 组件,并勾选Trigger

新建一个脚本"VideoCon",挂在Plane上

编写代码,其实处理方法十分简单:

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;
        }

    }
}

主要运用到:这两个方法

其实还有很多可以实现的,比如做个进度条控制进度,相关方法:

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
  • as363812807 2018-2-23 16:47
    请问为什么按照教程一步步操作之后导出的APK,视频只能听到声音,看不到画面???