全景服务

1. 介绍

简介

全景服务（Panorama Kit）是华为为开发者提供的全景图片和全景视频浏览服务。您可以通过SDK集成全景服务，在Android手机上快速将二维的平面图模拟成真实的三维空间，给用户带来沉浸感与真实感。

您将建立什么

在这个Codelab中，你将使用已经创建好的Demo Project实现对全景开放服务的API调用，通过Demo Project你可以体验到:

调用全景SDK浏览全景图片；
调用全景SDK浏览全景视频。

您将会学到什么

如何集成全景SDK
如何调用全景SDK浏览全景图片
如何调用全景SDK浏览全景视频

2. 您需要做什么

硬件要求

开发计算机（台式机或笔记本电脑）。
HUAWEI手机一部，用于运行开发集成全景SDK的应用。
一根数据线，用于连接开发计算机与手机。

软件要求

Android Studio 3.6.1及以上版本
JDK 1.8及以上版本
SDK Platform 19及以上版本
Gradle 5.4.1及以上版本
HMS Core（APK）为4.0.0.300及以上版本
HMS Core SDK为4.0.0.300及以上版本
EMUI 4.0及以上版本

需要的知识点

Android基础开发能力
Android多线程开发能力

3. 能力接入准备

全景SDK为纯端侧能力，无须接入华为AGC即可调用。

4. 集成SDK

下载示例代码

源码下载

下载示例代码后，将代码解压缩至本地路径。

构建工程

步骤1： 打开Android Studio。
步骤2： 选择"File" -> "Open"，选择示例代码解压缩后的路径。

步骤3： 点击"ok"按钮。
步骤4： 查看仓库路径、依赖包、权限、混淆脚本的配置。Demo中已配置好，但后续您自己的工程中，需参考并修改。

在项目级build.gradle文件中配置maven仓库路径：


buildscript { 
        repositories { 
            ... 
            maven { url 'https://developer.huawei.com/repo/' } 
        } 
        ... 
    } 
     
    allprojects { 
        repositories { 
            ... 
            maven { url 'https://developer.huawei.com/repo/' } 
        } 
    } 
    ...

在应用级build.gradle文件中配置了依赖包，如下：


dependencies { 
        ... 
        implementation 'com.huawei.hms:panorama:4.0.4.301' 
        ... 
    }

在Manifest中配置了读写外部存储的权限（在Android 6.0及以上的版本，还需要您动态申请该权限），如下：
```
    ... 
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
      ...
  
  
```

配置混淆脚本，在app/proguard-rules.pro文件中配置了如下三行：


-ignorewarnings
    -keepattributes *Annotation*
    -keepattributes Exceptions
    -keepattributes InnerClasses
    -keepattributes Signature
    -keepattributes SourceFile,LineNumberTable
    -keep class com.hianalytics.android.**{*;}
    -keep class com.huawei.updatesdk.**{*;}
    -keep class com.huawei.hms.**{*;}

配置HMS Core SDK的Maven仓地址

Android Studio的代码库配置在Gradle插件7.0以下版本、7.0版本和7.1及以上版本有所不同。请根据您当前的Gradle插件版本，选择对应的配置过程。

7.0以下版本

7.0版本

7.1及以上版本

7.0以下版本

打开Android Studio项目级"build.gradle"文件。
添加HUAWEI agcp插件以及Maven代码库。

在"buildscript > repositories"中配置HMS Core SDK的Maven仓地址。
在"allprojects > repositories"中配置HMS Core SDK的Maven仓地址。
如果App中添加了"agconnect-services.json"文件则需要在"buildscript > dependencies"中增加agcp插件配置。


buildscript { 
            repositories { 
                google() 
                jcenter() 
                // 配置HMS Core SDK的Maven仓地址。 
                maven {url 'https://developer.huawei.com/repo/'} 
            } 
            dependencies { 
                ... 
                // 增加agcp插[最新版本](https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-sdk-changenotes-0000001058732550)推荐您使用最新版本的agcp插件。 
                classpath 'com.huawei.agconnect:agcp:1.6.0.300'
            } 
        } 
         
        allprojects { 
            repositories { 
                google() 
                jcenter() 
                // 配置HMS Core SDK的Maven仓地址。 
                maven {url 'https://developer.huawei.com/repo/'} 
            } 
        }

7.0版本

打开Android Studio项目级"build.gradle"文件。
添加HUAWEI agcp插件以及Maven代码库。

在"buildscript > repositories"中配置HMS Core SDK的Maven仓地址
如果App中添加了"agconnect-services.json"文件则需要在"buildscript > dependencies"中增加agcp插件配置。


buildscript { 
              repositories { 
                  google() 
                  jcenter() 
                  // 配置HMS Core SDK的Maven仓地址。 
                  maven {url 'https://developer.huawei.com/repo/'} 
              } 
              dependencies { 
                  ... 
                  // 增加agcp插件配置，推荐您使用最新版本的agcp插件。 
                  classpath 'com.huawei.agconnect:agcp:1.6.0.300' 
              } 
          }

打开项目级"settings.gradle"文件，配置HMS Core SDK的Maven仓地址。


dependencyResolutionManagement { 
            ... 
            repositories { 
                google() 
                jcenter()  
                // 配置HMS Core SDK的Maven仓地址。 
                maven {url 'https://developer.huawei.com/repo/'} 
            } 
        }

7.1及以上版本

打开Android Studio项目级"build.gradle"文件。

如果App中添加了"agconnect-services.json"文件则需要在"buildscript > dependencies"中增加agcp插件配置。


buildscript { 
dependencies { 
    ... 
    // 增加agcp插[最新版本](https://developer.huawei.com/consumer/cn/doc/development/AppGallery-connect-Guides/agc-sdk-changenotes-0000001058732550)推荐您使用最新版本的agcp插件。 
    classpath 'com.huawei.agconnect:agcp:1.6.0.300'
} 
}

打开项目级"settings.gradle"文件，配置HMS Core SDK的Maven仓地址。


pluginManagement { 
      repositories { 
          gradlePluginPortal() 
          google() 
          mavenCentral() 
          // 配置HMS Core SDK的Maven仓地址。 
          maven { url 'https://developer.huawei.com/repo/' } 
      } 
  } 
  dependencyResolutionManagement { 
      ... 
      repositories { 
          google() 
          mavenCentral() 
          // 配置HMS Core SDK的Maven仓地址。 
          maven { url 'https://developer.huawei.com/repo/' } 
      } 
  }

测试验证

导入完成后，点击图标进行同步，可在下图所示框中观察同步状况：
同步完成后，点击图标，运行Android Studio工程打包生成APK，并安装在测试手机上，运行效果如下图所示：

前三个按钮分别代表全景图片的三种调用方式，点击其中的一个可看到全景图浏览的效果：

第四个按钮为全景视频的调用方式，点击后可看到全景视频的浏览效果：

并且在进入全景服务后，可以点击或来切换浏览模式。

初级演练（应用外全景展示）

您可以修改Demo中的图片URI来指定其他任意图片，例如：


Uri uri = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.pano);

如果您需要浏览环形全景图，可以通过API指定类型IMAGE_TYPE_RING来浏览：


Panorama.getInstance().loadImageInfo(this, uri, PanoramaInterface.IMAGE_TYPE_RING).setResultCallback(new ResultCallbackImpl());

高级演练（应用内全景展示）

如果您想要更灵活的使用全景服务，需要调用全景SDK的LocalInterface，可参考LocalDisplayActivity中的实现代码。

步骤1 新建一个Layout。

Layout用于放置全景显示的View，左下角放置一个ImageButton，显示切换控制方式的图标。

步骤2 获取LocalInterface对象。


mLocalInterface = Panorama.getInstance().getLocalInstance(this);

步骤3 初始化并设置图片Uri和图片类型。


mLocalInterface.init(); 
mLocalInterface.setImage(uri, PanoramaInterface.IMAGE_TYPE_SPHERICAL);

步骤4 获取View并加入之前新建的Layout中。


RelativeLayout mLayout= findViewById(R.id.relativeLayout); 
View mPanoramaView= mLocalInterface.getView(); 
mLayout.addView(mPanoramaView);

监听Button的事件用来切换控制方式


mChangeModeButton = findViewById(R.id.changeModeButton); 
...
 initControlMode();
...
private void initControlMode() {
    mChangeModeButton.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (controlModeCount % 3 == 0) {
                mLocalInstance.setControlMode(PanoramaInterface.CONTROL_TYPE_TOUCH);
                mChangeModeButton.setText(R.string.button_touch);
            } else if (controlModeCount % 3 == 1) {
                mLocalInstance.setControlMode(PanoramaInterface.CONTROL_TYPE_POSE);
                mChangeModeButton.setText(R.string.button_pose);
            } else {
                mLocalInstance.setControlMode(PanoramaInterface.CONTROL_TYPE_MIX);
                mChangeModeButton.setText(R.string.button_mix);
            }
            controlModeCount++;
        }
    });
    mChangeModeButton.performClick();
}

步骤5 将View的触摸事件传给SDK。


mPanoramaView.setOnTouchListener(this); 
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
    if (mPanoramaView != null && mPanoramaView.equals(view)) {
        if (mLocalInstance != null) {
            mLocalInstance.updateTouchEvent(motionEvent);
            return true;
        }
    }
    return false;
}

步骤6 点击图标，运行Android Studio工程打包生成APK，并安装在测试手机上，点击localInterface即可看到效果：

—-结束

如果您想要在运行过程中加载其他的全景图片，可以调用setImage接口指定不同的全景图：


private void doDisplaySpherical() {
        Uri uri = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.pano);
        Log.i(LOG_TAG, "test uri " + uri.toString());
        int ret = mLocalInstance.setImage(uri, PanoramaInterface.IMAGE_TYPE_SPHERICAL);
        if (ret != ResultCode.SUCCEED) {
            logAndToast("doDisplaySpherical setImage failed " + ret);
            return;
        }

        addViewToLayout();
    }

同理，如果您想要在运行过程中加载其他的全景视频，可以调用getSurface接口指定全景视频类型，调用initMediaPlayer方法播放视频：


private void doDisplayVideo() {
        Surface videoSurface = mLocalInstance.getSurface(PanoramaInterface.IMAGE_TYPE_SPHERICAL);
        if (videoSurface == null) {
            logAndToast("videoSurface is null");
            return;
        }

        Uri videoUri = Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.sample);
        initMediaPlayer(videoUri, videoSurface);

        addViewToLayout();
}
private void initMediaPlayer(Uri videoUri, Surface surface) {
        mPlayer = new MediaPlayer();
        try {
            mPlayer.setDataSource(getApplicationContext(), videoUri);
        } catch (IOException e) {
            e.printStackTrace();
            return;
        }
        mPlayer.setLooping(true);
        mPlayer.setSurface(surface);

        try {
            mPlayer.prepare();
        } catch (IOException e) {
            Log.e(LOG_TAG, "Media Player prepare exception");
        }
        mPlayer.start();

        float ratio = mPlayer.getVideoWidth() / (float) mPlayer.getVideoHeight();
        Log.i(LOG_TAG, "ratio = " + ratio);
        mLocalInstance.setValue(PanoramaInterface.KEY_VIDEO_RATIO, String.valueOf(ratio));
}

已复制代码

5. 恭喜您

干得好，您已经成功完成了Codelab并学到了：

如何集成全景SDK
如何调用全景SDK浏览全景图片
如何调用全景SDK浏览全景视频

6. 参考

您可以阅读下面链接，了解更多相关的信息。
开发指南

API文档

FAQ

Back