title: How to Read DJI H264 FPV Feed as OpenCV Mat Object?
body: <p>TDLR: All DJI developers would benefit from decoding raw H264 video stream byte arrays to a format compatible with OpenCV. </p>
  
  <p>I've spent a lot of time looking for a solution to reading DJI's FPV feed as an OpenCV Mat object. I am probably overlooking something fundamental, since I am not too familiar with Image Encoding/Decoding. </p>
  
  <p>Future developers who come across it will likely run into a bunch of the same issues I had. It would be great if DJI developers could use opencv directly without needing a 3rd party library.</p>
  
  <p>I'm willing to use ffmpeg or JavaCV if necessary, but that's quite the hurdle for most Android developers as we're going to have to use cpp, ndk, terminal for testing, etc. That seems like overkill. Both options seem quite time consuming. <a href="https://stackoverflow.com/questions/22497540/javacv-decoding-h-264-live-stream-coming-from-red5-server-on-android-device">This JavaCV H264 conversion</a> seems unnecessarily complex. I found it from <a href="https://stackoverflow.com/questions/28123759/how-to-decode-the-byte-array-h264-format-in-to-video-in-android">this relevant question</a>. </p>
  
  <p>I believe the issue lies in the fact that we need to decode both the byte array of length 6 (info array) and the byte array with current frame info simultaneously. </p>
  
  <p>Basically, DJI's FPV feed comes in a number of formats. </p>
  
  <ol>
  <li>Raw H264 (MPEG4) in VideoFeeder.VideoDataListener</li>
  </ol>
  
  <pre><code>    // The callback for receiving the raw H264 video data for camera live view
      mReceivedVideoDataListener = new VideoFeeder.VideoDataListener() {
          @Override
          public void onReceive(byte[] videoBuffer, int size) {
              //Log.d("BytesReceived", Integer.toString(videoStreamFrameNumber));
              if (videoStreamFrameNumber++%30 == 0){
                  //convert video buffer to opencv array
                  OpenCvAndModelAsync openCvAndModelAsync = new OpenCvAndModelAsync();
                  openCvAndModelAsync.execute(videoBuffer);
              }
              if (mCodecManager != null) {
                  mCodecManager.sendDataToDecoder(videoBuffer, size);
              }
          }
      };
  
  </code></pre>
  
  <ol start="2">
  <li>DJI also has it's own Android decoder sample with FFMPEG to convert to YUV format. </li>
  </ol>
  
  <pre><code>    @Override
      public void onYuvDataReceived(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 &amp;&amp; yuvFrame != null) {
              final byte[] bytes = new byte[dataSize];
              yuvFrame.get(bytes);
              AsyncTask.execute(new Runnable() {
                  @Override
                  public void run() {
                      if (bytes.length &gt;= width * height) {
                          Log.d("MatWidth", "Made it");
                          YuvImage yuvImage = saveYuvDataToJPEG(bytes, width, height);
                          Bitmap rgbYuvConvert = convertYuvImageToRgb(yuvImage, width, height);
  
                          Mat yuvMat = new Mat(height, width, CvType.CV_8UC1);
                          yuvMat.put(0, 0, bytes);
                          //OpenCv Stuff
                      }
                  }
              });
          }
      }
  </code></pre>
  
  <p>Edit: For those who want to see DJI's YUV to JPEG function, here it is from the sample application:</p>
  
  <pre><code>private YuvImage saveYuvDataToJPEG(byte[] yuvFrame, int width, int height){
          byte[] y = new byte[width * height];
          byte[] u = new byte[width * height / 4];
          byte[] v = new byte[width * height / 4];
          byte[] nu = new byte[width * height / 4]; //
          byte[] nv = new byte[width * height / 4];
  
          System.arraycopy(yuvFrame, 0, y, 0, y.length);
          Log.d("MatY", y.toString());
          for (int i = 0; i &lt; u.length; i++) {
              v[i] = yuvFrame[y.length + 2 * i];
              u[i] = yuvFrame[y.length + 2 * i + 1];
          }
          int uvWidth = width / 2;
          int uvHeight = height / 2;
          for (int j = 0; j &lt; uvWidth / 2; j++) {
              for (int i = 0; i &lt; uvHeight / 2; i++) {
                  byte uSample1 = u[i * uvWidth + j];
                  byte uSample2 = u[i * uvWidth + j + uvWidth / 2];
                  byte vSample1 = v[(i + uvHeight / 2) * uvWidth + j];
                  byte vSample2 = v[(i + uvHeight / 2) * uvWidth + j + uvWidth / 2];
                  nu[2 * (i * uvWidth + j)] = uSample1;
                  nu[2 * (i * uvWidth + j) + 1] = uSample1;
                  nu[2 * (i * uvWidth + j) + uvWidth] = uSample2;
                  nu[2 * (i * uvWidth + j) + 1 + uvWidth] = uSample2;
                  nv[2 * (i * uvWidth + j)] = vSample1;
                  nv[2 * (i * uvWidth + j) + 1] = vSample1;
                  nv[2 * (i * uvWidth + j) + uvWidth] = vSample2;
                  nv[2 * (i * uvWidth + j) + 1 + uvWidth] = vSample2;
              }
          }
          //nv21test
          byte[] bytes = new byte[yuvFrame.length];
          System.arraycopy(y, 0, bytes, 0, y.length);
          for (int i = 0; i &lt; u.length; i++) {
              bytes[y.length + (i * 2)] = nv[i];
              bytes[y.length + (i * 2) + 1] = nu[i];
          }
          Log.d(TAG,
                "onYuvDataReceived: frame index: "
                    + DJIVideoStreamDecoder.getInstance().frameIndex
                    + ",array length: "
                    + bytes.length);
          YuvImage yuver = screenShot(bytes,Environment.getExternalStorageDirectory() + "/DJI_ScreenShot", width, height);
          return yuver;
      }
  
      /**
       * Save the buffered data into a JPG image file
       */
      private YuvImage screenShot(byte[] buf, String shotDir, int width, int height) {
          File dir = new File(shotDir);
          if (!dir.exists() || !dir.isDirectory()) {
              dir.mkdirs();
          }
          YuvImage yuvImage = new YuvImage(buf,
                  ImageFormat.NV21,
                  width,
                  height,
                  null);
  
          OutputStream outputFile = null;
  
          final String path = dir + "/ScreenShot_" + System.currentTimeMillis() + ".jpg";
  
          try {
              outputFile = new FileOutputStream(new File(path));
          } catch (FileNotFoundException e) {
              Log.e(TAG, "test screenShot: new bitmap output file error: " + e);
              //return;
          }
          if (outputFile != null) {
              yuvImage.compressToJpeg(new Rect(0,
                      0,
                      width,
                      height), 100, outputFile);
          }
          try {
              outputFile.close();
          } catch (IOException e) {
              Log.e(TAG, "test screenShot: compress yuv image error: " + e);
              e.printStackTrace();
          }
  
          runOnUiThread(new Runnable() {
              @Override
              public void run() {
                  displayPath(path);
              }
          });
          return yuvImage;
      }
  
  </code></pre>
  
  <ol start="3">
  <li>DJI also appears to have a "getRgbaData" function, but there is literally not a single example online or by DJI. Go ahead and Google "DJI getRgbaData"... There's only the reference to the api documentation that explains the self explanatory parameters and return values but nothing else. I couldn't figure out where to call this and there doesn't appear to be a callback function as there is with YUV. You can't call it from the h264b byte array directly, but perhaps you can get it from the yuv data.</li>
  </ol>
  
  <p>Option 1 is much more preferable to option 2, since YUV format has quality issues. Option 3 would also likely involve a decoder. </p>
  
  <p>Here's a screenshot that DJI's own YUV conversion produces. <a href="https://i.stack.imgur.com/LPJDb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LPJDb.jpg" alt="WalletPhoneYuv"></a> </p>
  
  <p>I've looked at a bunch of things about how to improve the YUV, remove green and yellow colors and whatnot, but at this point if DJI can't do it right, I don't want to invest resources there.</p>
  
  <p>Regarding Option 1, I know there's FFMPEG and JavaCV that seem like good options if I have to go the video decoding route. </p>
  
  <p>Moreover, from what I understand, OpenCV can't handle reading and writing video files without FFMPEG, but I'm not trying to read a video file, I am trying to read an H264/MPEG4 byte[] array. The following code seems to get positive results.</p>
  
  <pre><code>    /* Async OpenCV Code */
      private class OpenCvAndModelAsync extends AsyncTask&lt;byte[], Void, double[]&gt; {
          @Override
          protected double[] doInBackground(byte[]... params) {//Background Code Executing. Don't touch any UI components
              //get fpv feed and convert bytes to mat array
              Mat videoBufMat = new Mat(4, params[0].length, CvType.CV_8UC4);
              videoBufMat.put(0,0, params[0]);
              //if I add this in it says the bytes are empty.
              //Mat videoBufMat = Imgcodecs.imdecode(encodeVideoBuf, Imgcodecs.IMREAD_ANYCOLOR);
              //encodeVideoBuf.release();
              Log.d("MatRgba", videoBufMat.toString());
              for (int i = 0; i&lt; videoBufMat.rows(); i++){
                  for (int j=0; j&lt; videoBufMat.cols(); j++){
                      double[] rgb = videoBufMat.get(i, j);
                      Log.i("Matrix", "red: "+rgb[0]+" green: "+rgb[1]+" blue: "+rgb[2]+" alpha: "
                              + rgb[3] + " Length: " + rgb.length + " Rows: "
                              + videoBufMat.rows() + " Columns: " + videoBufMat.cols());
                  }
              }
              double[] center = openCVThingy(videoBufMat);
              return center;
          }
          protected void onPostExecute(double[] center) {
              //handle ui or another async task if necessary
          }
      }
  
  </code></pre>
  
  <p>Rows = 4, Columns > 30k. I get lots of RGB values that seem valid, such as red = 113, green=75, blue=90, alpha=220 as a made up example; however, I get a ton of 0,0,0,0 values. That should be somewhat okay, since Black is 0,0,0 (although I would have thought the alpha would be higher) and I have a black object in my image. I also don't seem to get any white values 255, 255, 255, even though there is also plenty of white area. I'm not logging the entire byte so it could be there, but I have yet to see it.</p>
  
  <p>However, when I try to compute the contours from this image, I almost always get that the moments (center x, y) are exactly in the center of the image. This error has nothing to do with my color filter or contours algorithm, as I wrote a script in python and tested that I implemented it correctly in Android by reading a still image and getting the exact same number of contours, position, etc in both Python and Android.</p>
  
  <p>I noticed it has something to do with the videoBuffer byte size (bonus points if you can explain why every other length is 6)</p>
  
  <pre><code>2019-05-23 21:14:29.601 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 2425
  2019-05-23 21:14:29.802 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 2659
  2019-05-23 21:14:30.004 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 6
  2019-05-23 21:14:30.263 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 6015
  2019-05-23 21:14:30.507 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 6
  2019-05-23 21:14:30.766 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 4682
  2019-05-23 21:14:31.005 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 6
  2019-05-23 21:14:31.234 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 2840
  2019-05-23 21:14:31.433 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 4482
  2019-05-23 21:14:31.664 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 6
  2019-05-23 21:14:31.927 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 4768
  2019-05-23 21:14:32.174 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 6
  2019-05-23 21:14:32.433 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 4700
  2019-05-23 21:14:32.668 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 6
  2019-05-23 21:14:32.864 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 4740
  2019-05-23 21:14:33.102 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 6
  2019-05-23 21:14:33.365 21431-22086/com.dji.simulatorDemo D/VideoBufferSize: 4640
  </code></pre>
  
  <p>My questions:</p>
  
  <p>I. Is this the correct format to read an h264 byte as mat? 
  Assuming the format is RGBA, that means row = 4 and columns = byte[].length, and CvType.CV_8UC4. Do I have height and width correct? Something tells me YUV height and width is off. I was getting some meaningful results, but the contours were exactly in the center, just like with the H264. </p>
  
  <p>II. Does OpenCV handle MP4 in android like this? If not, do we need to use FFMPEG or JavaCV?</p>
  
  <p>III. Does the int size have something to do with it? Why is the int size occassionally 6, and other times 2400 to 6000? I've heard about the difference between this frames information and information about the next frame, but I'm simply not knowledgeable enough to know how to apply that here.</p>
  
  <p>I'm starting to think this is where the issue lies. Since I need to get the 6 byte array for info about next frame, perhaps my modulo 30 is incorrect. So should I pass the 29th or 31st frame as a format byte for each frame? How is that done in opencv or are we doomed to use the complicated ffmpeg? How would I go about joining the neighboring frames/ byte arrays?</p>
  
  <p>IV. Can I fix this using Imcodecs? I was hoping opencv would natively handle whether a frame was color from this frame or info about next frame. I added the below code, but I am getting an empty array:</p>
  
  <pre><code>Mat videoBufMat = Imgcodecs.imdecode(new MatOfByte(params[0]), Imgcodecs.IMREAD_UNCHANGED);
  </code></pre>
  
  <p>This also is empty:</p>
  
  <pre><code>Mat encodeVideoBuf = new Mat(4, params[0].length, CvType.CV_8UC4);
  encodeVideoBuf.put(0,0, params[0]);
  Mat videoBufMat = Imgcodecs.imdecode(encodeVideoBuf, Imgcodecs.IMREAD_UNCHANGED);
  </code></pre>
  
  <p>V. Should I try converting the bytes into Android jpeg and then import it? Why is djis yuv decoder so complicated looking? It makes me cautious from wanting to try ffmpeg or Javacv and just stick to Android decoder or opencv decoder. </p>
  
  <p>VI. At what stage should I resize the frames to speed up calculations?</p>
  
  <p><strong>Edit:</strong> DJI support got back to me and confirmed they don't have any samples for doing what I've described. This is a time for we the community to make this available for everyone! </p>
  
  <p>Upon further research, I don't think opencv will be able to handle this as opencv's android sdk has no functionality for video files/url's (apart from a homegrown MJPEG codec). </p>
  
  <p>So is there a way in Android to convert to mjpeg or similar in order to read? In my application, I only need 1 or 2 frames per second, so perhaps I can save the image as jpeg. </p>
  
  <p>But for real time applications we will likely need to write our own decoder. Please help so that we can make this available to everyone! This <a href="https://stackoverflow.com/questions/13307086/decoding-raw-h264-stream-in-android">question</a> seems promising: </p>