大疆Mobile SDK初步开发

1. 从MSDK示例代码开始

• 配置代码运行环境
  （1）下载Moblie SDK：DJI MSDK下载。
  （2）准备Android开发环境，推荐使用Android Studio 2.1.1以上版本。官网下载网址：Download Android Studio或者 Android Studio

• 从GitHub上下载Android demo project：Mobile-SDK-Android 。

• 在大疆官网创建APP KEY。在大疆官网的个人中心的应用一栏中可以生成APP KEY
  

• 在创建界面需要注意的是Package Name中需要填写的是实际代码程序中的包名，其余选项随意填写

• 创建完成后点击打开示例代码中的Manifests->AndroidManifests.xml文件，把App key粘贴到android:value后

• 连接手机，手机打开USB调试模式，如果Android Android未查询到手机可以在命令提示符中查询adb devices，没有显示连接设备则说明手机未安装adb 驱动

• 点击run运行程序。

• 手机连接无人机遥控器测试APP.

2. 进行视频流的接收

• 在大疆官网文档中详细的介绍了如何完成一个对无人机视频流进行解码：Android Video Stream Decoding Sample - DJI Mobile SDK Documentation.

• 1.初始化一个NativeHelper的实例对象，来监听来自无人机高空的视频数据。
  2.将原始的H.264视频数据送入FFmpeg中解析。
  3.将解析完成的视频数据从FFmpeg中取出，并将解析后的数据缓存到图像帧序列中
  4.将MediaCodec作为一个解码器，然后对视频中的I帧进行捕获。
  5.解码完成后，可为MediaCodec的输出数据配置一个TextureView或SurfaceView用来对视频画面进行预览，或者调用监听器对解码数据进行监听完成其他操作。
  6.释放FFmpeg和MediaCodec资源。
  

• 通过上述流程我们能够知道要能够在设备上显示无人机相机画面大体上分为三步：接受无人机视频流、对视频流解码以及把解码后数据输出画面。那么为什么要把无人机传输过来的视频解码为YUV格式呢？

• 原因是在Android系统中，图像是以YUVImage的格式传递的，因此，在存储数据的时候我们就需要使用YUV图像格式。

• 我们可以下载官网给出的 sample project：Github Page ，在项目代码中大疆给出了两种进行解码的方式：利用大疆自己编写的DJIViedeoStreamDecoder解码器以及利用之前大疆就编写好的DJICodecManager解码器。在布局中分别在livestream_preview_ttv和livestream_preview_sf中显示画面。

• 在代码meida的DJIVideoStreamDecoder.java文件中我们可以看到初始化解码器MediaCodec的源代码：

• 	/**
       * Initialize the hardware decoder.
       */
      private void initCodec() {
        
          if (width == 0 || height == 0) {
        
              return;
          }
          if (codec != null) {
        
              releaseCodec();
          }
          loge("initVideoDecoder----------------------------------------------------------");
          loge("initVideoDecoder video width = " + width + "  height = " + height);
          // create the media format
          MediaFormat format = MediaFormat.createVideoFormat(VIDEO_ENCODING_FORMAT, width, height);
          if (surface == null) {
        
              logd("initVideoDecoder: yuv output");
              // The surface is null, which means that the yuv data is needed, so the color format should
              // be set to YUV420.
              format.setInteger(MediaFormat.KEY_COLOR_FORMAT, MediaCodecInfo.CodecCapabilities.COLOR_FormatYUV420Planar);
          } else {
        
              logd("initVideoDecoder: display");
              // The surface is set, so the color format should be set to format surface.
              format.setInteger(MediaFormat.KEY_COLOR_FORMAT, MediaCodecInfo.CodecCapabilities.COLOR_FormatSurface);
          }
          try {
        
              // Create the codec instance.
              codec = MediaCodec.createDecoderByType(VIDEO_ENCODING_FORMAT);
              logd( "initVideoDecoder create: " + (codec == null));
              // Configure the codec. What should be noted here is that the hardware decoder would not 
              // output any yuv data if a surface is configured into, which mean that if you want the yuv 
              // frames, you should set "null" surface when calling the "configure" method of MediaCodec.
              //就是说要配置解码器之前要把surface设为"null"
              codec.configure(format, surface, null, 0);
              logd( "initVideoDecoder configure");
              //            codec.configure(format, null, null, 0);
              if (codec == null) {
        
                  loge("Can't find video info!");
                  return;
              }
              // Start the codec
              codec.start();
          } catch (Exception e) {
        
              loge("init codec failed, do it again: " + e);
              e.printStackTrace();
          }
      }
  

• 下面是解析为YUV格式(MainActivity.java中)的源代码：

• @Override
     public void onYuvDataReceived(MediaFormat format, final ByteBuffer yuvFrame, int dataSize, final int width, final int height) {
        
         //In this demo, we test the YUV data by saving it into JPG files.
         //DJILog.d(TAG, "onYuvDataReceived " + dataSize);
         if (count++ % 30 == 0 && yuvFrame != null) {
        
             final byte[] bytes = new byte[dataSize];
             yuvFrame.get(bytes);
             //DJILog.d(TAG, "onYuvDataReceived2 " + dataSize);
             AsyncTask.execute(new Runnable() {
        
                 @Override
                 public void run() {
        
                     // two samples here, it may has other color format.
                     //两种像素格式 NV12或者YUV420P
                     int colorFormat = format.getInteger(MediaFormat.KEY_COLOR_FORMAT);
                     switch (colorFormat) {
        
                         case MediaCodecInfo.CodecCapabilities.COLOR_FormatYUV420SemiPlanar:
                             //NV12
                             if (Build.VERSION.SDK_INT <= 23) {
          //android API<=23
                                 oldSaveYuvDataToJPEG(bytes, width, height);
                             } else {
        
                                 newSaveYuvDataToJPEG(bytes, width, height);
                             }
                             break;
                         case MediaCodecInfo.CodecCapabilities.COLOR_FormatYUV420Planar:
                             //YUV420P
                             newSaveYuvDataToJPEG420P(bytes, width, height);
                             break;
                         default:
                             break;
                     }
                 }
             });
         }
     }
  

• 代码如果有不明白的方法调用或者类名，可以去大疆官网查询相关的API。在本次开发过程中我选择了相对更加稳定和延迟更小的livestream_preview_sf.

• 初步理解代码内容后，我们可以Run示例程序查看结果。

3. 增加对无人机的初步控制

• 本步骤参考DJI MSDK开发文档中的Simulator 模拟器功能实现部分，代码以及文件参考： Github Page.

• 在能显示无人机相机视角的基础上，我们现在的目标是添加飞机的自动起飞和降落以及能操控无人机的虚拟摇杆的功能。

• 首先自动起飞和自动降落功能在大疆API已经有了，我们只需要很简单的调用以及在Android布局中增加两个按钮即可。
  

• 对于按钮点击事件进行判断如下：

• 	//无人机起飞动作实现
            case R.id.btn_take_off:
                if (mFlightController != null){
        
                    mFlightController.startTakeoff(
                            new CommonCallbacks.CompletionCallback() {
        
                                @Override
                                public void onResult(DJIError djiError) {
        
                                    if (djiError != null) {
        
                                        showToast(djiError.getDescription());
                                    } else {
        
                                        showToast("Take off Success");
                                    }
                                }
                            }
                    );
                }
                break;
  
            //无人机降落动作实现
            case R.id.btn_land:
                if (mFlightController != null){
        
                    mFlightController.startLanding(
                            djiError -> {
        
                                if (djiError != null) {
        
                                    showToast(djiError.getDescription());
                                } else {
        
                                    showToast("Start Landing");
                                }
                            }
                    );
                }
  
  

• 我们第二步是增加两个虚拟摇杆，而为了操控杆控件，我们基于OnScreenJoystick文件实施操纵杆控制 。我们主要用到两个文件OnScreenJoystick.java和OnScreenJoystickListener.java.
  

• 在OnScreenJoystickListener.java中看到当我们触摸到虚拟摇杆视图时会触发的监听方法onTouch.

  public interface OnScreenJoystickListener {
        
  
      /** Called when the joystick is touched.
       * @param joystick The joystick which has been touched.
       * @param pX The x coordinate of the knob. Values are between -1 (left) and 1 (right).
       * @param pY The y coordinate of the knob. Values are between -1 (down) and 1 (up).
       */
      public void onTouch(final OnScreenJoystick joystick, final float pX, final float pY);
  }
  
  

  方法具体的实现代码如下：

  @Override
      public boolean onTouch(final View arg0, final MotionEvent pEvent) {
        
          final float x = pEvent.getX();
          final float y = pEvent.getY();
  
          switch (pEvent.getAction()) {
                //返回动作类型
  
              case MotionEvent.ACTION_UP:    //手指离开摇杆时触发
                  if (isAutoCentering()) {
        
                      mKnobX = Math.round((mBackgroundSize - mKnobSize) * 0.5f);
                      mKnobY = Math.round((mBackgroundSize - mKnobSize) * 0.5f);
                  }
                  break;
              default:
                  // Check if coordinates are in bounds. If they aren't move the knob
                  // to the closest coordinate inbounds.
                  if (checkBounds(x, y)) {
        
                      mKnobX = Math.round(x - mKnobSize * 0.5f);
                      mKnobY = Math.round(y - mKnobSize * 0.5f);
                  } else {
        
                      final double angle = Math.atan2(y - mRadius, x - mRadius);
                      mKnobX = (int) (Math.round(mRadius
                              + (mRadius - mKnobSize * 0.5f) * Math.cos(angle)) - mKnobSize * 0.5f);
                      mKnobY = (int) (Math.round(mRadius
                              + (mRadius - mKnobSize * 0.5f) * Math.sin(angle)) - mKnobSize * 0.5f);
                  }
          }
  
          if (mJoystickListener != null) {
        
              mJoystickListener.onTouch(this,
                      (0.5f - (mKnobX / (mRadius * 2 - mKnobSize))) * -2,
                      (0.5f - (mKnobY / (mRadius * 2 - mKnobSize))) * 2);
          }
          return true;
      }
  

• 然后把需要配置文件添加到res中，在大疆文档实现UI界面的第四步配置资源中已经描述的非常清楚了，此处把内容复制在下面：

  • 将示例项目中的joystick.png和joystick_bg.png文件复制并粘贴到左侧导航器的mipmap文件夹中。
  • 将以下图像和xml文件从教程Github Sample项目的drawable文件夹复制到您的项目中，它们用于按钮的UI：

  

  • 接下来，打开"colors.xml"文件，并在底部添加以下代码以声明黑色叠加颜色：

  <color name="black_overlay">#66000000</color>
  

  • 此外，打开"strings.xml"文件并添加"success"字符串：

  <string name="success">Success</string>
  

  • 最后，打开"styles.xml"文件并添加以下代码以声明"common_button"样式：

  <!-- Common button style -->
  <style name="common_button">
      <item name="android:layout_width">100dp</item>
      <item name="android:layout_height">45dp</item>
      <item name="android:layout_marginTop">10dp</item>
      <item name="android:background">@drawable/round_btn</item>
      <item name="android:paddingLeft">5dp</item>
      <item name="android:paddingRight">5dp</item>
      <item name="android:textAllCaps">false</item>
      <item name="android:textColor">@android:color/white</item>
      <item name="android:textSize">14sp</item>
  </style>
  

• 随后在布局中加入两个摇杆

  <com.dji.simulatorDemo.OnScreenJoystick
          android:id="@+id/directionJoystickLeft"
          android:layout_width="130dp"
          android:layout_height="130dp"
          android:layout_alignParentLeft="true"
          android:layout_alignParentBottom="true"
          android:layout_marginBottom="10dp"
          android:layout_marginLeft="10dp"
          android:background="@mipmap/joystick_bg"/>
  
      <com.dji.simulatorDemo.OnScreenJoystick
          android:id="@+id/directionJoystickRight"
          android:layout_width="130dp"
          android:layout_height="130dp"
          android:layout_alignParentRight="true"
          android:layout_alignParentBottom="true"
          android:layout_marginBottom="10dp"
          android:layout_marginRight="10dp"
          android:background="@mipmap/joystick_bg"/>
  

• 在MainActivity中我们初始化UI元素变量，重写onTouch()和onClick()方法。

• 确认根据文档步骤无误后，Run代码查看是否出现问题。

4. 结果展示

• 后面我又加入了拍照和录象的功能，因为在大疆文档中都有很详细的介绍所以此处不过多赘述。

• 最后做出来的UI界面如下：
  

• 本文只是非常基础的根据大疆官方文档所做的一个练习，供大家参考。