EasyAR 初学者入门指南(5)---录屏功能

时间:2021-11-11 06:05:47
录屏功能成为了每个AR APP 的标配。确实,通过录屏技术我们可以记录我们当前操作手机时所看到的一些惊艳画面(尤其对于AR而言),目前市面上有许多的录屏集成方案,但单纯对于AR开发而言,EasyAR SDK2.0无疑是最好的选择。2.0的Pro版本为我们集成了录屏技术,甚至不需要写任何代码,便可以轻松实现。

开发预览:
1.点击按钮,出现start文字(大约2s后字体消失,主要是给用户一个提示)

EasyAR 初学者入门指南(5)---录屏功能


2.可以拖动识别后出现的物体(旋转或放大,以前的教程: EasyAR开发技巧---模型交互操作 ),主要是体现录屏的效果

3.再次点击按钮,出现视频保存路径

EasyAR 初学者入门指南(5)---录屏功能


然后录制的视频就会默认保存到(/sdcard/Movies) 路径下
比如:

EasyAR 初学者入门指南(5)---录屏功能



EasyAR 初学者入门指南(5)---录屏功能


4.EasyAR SDK 的强大之处在于录屏时不会录取UI层

开发素材:

按钮(不得商用):链接: https://pan.baidu.com/s/1slbkAzr 密码: 4qbs

Step 1:准备

我们在官网下载EasyAR 2.0 Pro 版本的samples
ps:以后我们的开发都在官方的sample 基础上进行开发,这样可以提高我们的开发效率。


EasyAR 初学者入门指南(5)---录屏功能

EasyAR 初学者入门指南(5)---录屏功能



然后解压之后,在unity里打开" HelloARRecording "

EasyAR 初学者入门指南(5)---录屏功能

EasyAR 初学者入门指南(5)---录屏功能


在unity中打开" HelloARRecording " 场景,首先填写Key值。在官网上申请Key(需要开通Pro功能)
EasyAR 初学者入门指南(5)---录屏功能

EasyAR 初学者入门指南(5)---录屏功能

我们可以尝试着将其打包成APK在移动端运行看下效果(录屏功能目前只支持在移动端测试,pc端不支持)。

Step2:给模型添加交互

接下来我们需要给模型添加手势交互操作,这样在录屏起来效果更加明显。默认的场景下有两张识别图,我们选择一张作为测试。

EasyAR 初学者入门指南(5)---录屏功能

EasyAR 初学者入门指南(5)---录屏功能

添加脚本:这是一段移动端手势交互操作的脚本,在之前的文章中也有说过( EasyAR开发技巧---模型交互操作 )。大家可以将其作为模版来使用,只需要修改一些简单的变量数值来达到你想要的效果。

脚本下载地址:链接: https://pan.baidu.com/s/1gePtFVX 密码: 4g2n

using  UnityEngine;

using  System.Collections;

public   class   Gesture  :  MonoBehaviour  {

     private   Touch  oldTouch1;  

     private   Touch  oldTouch2;  

     void  Update()
    {
         if  ( Input .touchCount <=  0 )
        {
             return ;
        }
         if  ( 1  ==  Input .touchCount)
        {
             Touch  touch =  Input .GetTouch( 0 );
             Vector2  deltaPos = touch.deltaPosition;
            transform.Rotate( Vector3 .down * deltaPos.x,  Space .World);
        }
         Touch  newTouch1 =  Input .GetTouch( 0 );

         Touch  newTouch2 =  Input .GetTouch( 1 );

         if  (newTouch2.phase ==  TouchPhase .Began)

        {
            oldTouch2 = newTouch2;

            oldTouch1 = newTouch1;

             return ;
        }
         float  oldDistance =  Vector2 .Distance(oldTouch1.position, oldTouch2.position);

         float  newDistance =  Vector2 .Distance(newTouch1.position, newTouch2.position);

         float  offset = newDistance - oldDistance;

         float  scaleFactor = offset /  200f ;

         Vector3  localScale = transform.localScale;

         Vector3  scale =  new   Vector3 (localScale.x + scaleFactor,

            localScale.y + scaleFactor,

            localScale.z + scaleFactor);

         if  (scale.x >=  0.05f  && scale.y >= 0.05f  && scale.z >=  0.05f )
        {
            transform.localScale = scale;
        }
        oldTouch1 = newTouch1;
        oldTouch2 = newTouch2;

    }

}

然后添加给指定的模型就ok

EasyAR 初学者入门指南(5)---录屏功能

EasyAR 初学者入门指南(5)---录屏功能


Step 3:UI
创建UI之前,我们先来分析一下与录屏功能有关的组件和脚本。
1.首先是绑定在" EasyAR_Startup " 组件上的脚本----" HelloARRecording.cs ",它是我们实现录屏功能的主要脚本文件。里面有两个重要的方法--- StartRecord(),StopRecord() ,分别控制录屏的开始与结束。

StartRecord()

   public   void  StartRecord()
        {
             string  path_root =  Application .persistentDataPath +  "/" ;
             if  ( Application .platform ==  RuntimePlatform .Android)
                path_root =  "/sdcard/Movies/" ;
             ARBuilder .Instance.RecorderBehaviour.OutputFile = path_root +  "EasyAR_Recording_"  + System. DateTime .Now.ToString( "yyyy-MM-dd_HH-mm-ss" ) +  ".mp4" ;

             ARBuilder .Instance.RecorderBehaviour.StartRecording();
            isRecording =  true ;
            StartShowMessage =  true ;
        }

注意保存的默认路径: "/sdcard/Movies/" + "yyyy-MM-dd_HH-mm-ss.mp4"

StopRecord():
public   void  StopRecord()
        {
             ARBuilder .Instance.RecorderBehaviour.StopRecording();
            isRecording =  false ; }
2.关于 Recorder 组件与它上面绑定的 RecorderBehaviour 脚本

EasyAR 初学者入门指南(5)---录屏功能

EasyAR 初学者入门指南(5)---录屏功能


该脚本主要是处理录屏后视频的保存质量等信息。

EasyAR 初学者入门指南(5)---录屏功能

EasyAR 初学者入门指南(5)---录屏功能


我们接下来实现UI部分,关于UI,你可以用unity自带的,也可以用NGUI。
关于NGUI的插件资源:链接: https://pan.baidu.com/s/1geFQmen 密码: py7u

在本次的案例中我使用的是NGUI,首先创建一个" 2D Sprite " 命名为Button。

EasyAR 初学者入门指南(5)---录屏功能

EasyAR 初学者入门指南(5)---录屏功能

修改它的图片:

EasyAR 初学者入门指南(5)---录屏功能

EasyAR 初学者入门指南(5)---录屏功能


并绑定Button事件。然后创建一个Label,用于显示我们的文字提示信息。将label调整好合适大小,默认label 里的text内容为空。
效果如下:

EasyAR 初学者入门指南(5)---录屏功能

EasyAR 初学者入门指南(5)---录屏功能


Step 4:修改脚本

我们主要在" HelloARRecording " 这上面做功夫,它是我们实现录屏的核心代码。原" HelloARRecording " 脚本是通过OnGUI来实现按钮,但是没有文字提示,体验不是很好,所以我们主要修改的内容是:
1.用我们的Button替换OnGUI的显示,并绑定事件。

2.点击Button 时有相应的文字提示。

首先注释掉OnGUI()方法,创建两个 协程 ,主要控制文字的显示时间。

示例:

开头定义label之后:

IEnumerator  showMessage1()
        {
            label.gameObject.SetActive ( true );
            label.text =  "Start" ;
             yield   return   new   WaitForSeconds ( 2f );
            label.gameObject.SetActive ( false );
        }
IEnumerator  showMessage2()
        {
            label.gameObject.SetActive ( true );
            label.text =  "Recorded at "  +  ARBuilder .Instance.RecorderBehaviour.OutputFile;
             yield   return   new   WaitForSeconds ( 2f );
            label.gameObject.SetActive ( false );
        }

接着我们写一个方法: Record(),主要是通过一个bool标志位来实现按钮的点击。

         public   void  Record()
        {
             if  (!isClick) {
            
                StartRecord ();

                StartCoroutine (showMessage1());
                isClick =  true ;
            }  else  {
            
                StopRecord ();

                StartCoroutine (showMessage2());

                isClick =  false ;
            }


        }

然后我们在unity里为该Button绑定Record() 方法即可。
代码比较简单,完整代码:链接: https://pan.baidu.com/s/1geBM7fX 密码: j7m8。

然后我们在移动端测试,点击按钮,就会开始录制,并且时长不受限制,录制效果很赞。

实现了录屏功能,另一个需求就是分享我们的视频到朋友圈等等,所以下一部分我们会接着实现分享功能。