If you come across any mistakes or bugs in this tutorial, please let us know by sending emails to dev@dji.com. Please feel free to send us Github pull request and help us fix any issues.
In this tutorial, you will learn how to use the MediaManager to interact with the file system on the SD card of the aircraft's camera. By the end of this tutorial, you will have an app that you can use to preview photos, play videos, download or delete files and so on.
In order for our app to manage photos and videos, however, it must first be able to take and record them. Fortunately, by using DJI Android UX SDK, you can implement shooting photos and recording videos functionalities easily with standard DJI Go UIs.
You can download the tutorial's final sample project from this Github Page.
We use Mavic Pro and Nexus 5 as an example to make this demo. For more details of customizing the layouts for iPhone devices, please check the tutorial's Github Sample Project.
Application Activation and Aircraft Binding in China
For DJI SDK mobile application used in China, it's required to activate the application and bind the aircraft to the user's DJI account.
If an application is not activated, the aircraft not bound (if required), or a legacy version of the SDK (< 4.1) is being used, all camera live streams will be disabled, and flight will be limited to a zone of 100m diameter and 30m height to ensure the aircraft stays within line of sight.
Now, create a new project in Android Studio, open Android Studio and select File -> New -> New Project to create a new project, named 'MediaManagerDemo'. Enter the company domain and package name (Here we use "com.dji.mediaManagerDemo") you want and press Next. Set the minimum SDK version as API 19: Android 4.4 (KitKat) for "Phone and Tablet" and press Next. Then select "Empty Activity" and press Next. Lastly, leave the Activity Name as "MainActivity", and the Layout Name as "activity_main", press "Finish" to create the project.
Please check the Getting Started with UX SDK tutorial to learned how to import the DJI Android UX SDK Maven Dependency to your project. If you haven't read that previously, please take a look at it and implement the related features. Once you've done that, continue to implement the next features.
Implementing the UI of Application
Building the Default Layout using UX SDK
Now, create a new Empty Activity class with the name of "DefaultLayoutActivity" in the com.dji.mediaManagerDemo package. Replace the code with the following, remember to import the related classes as Android Studio suggested:
switch (v.getId()) { case R.id.btn_mediaManager: { Intent intent = new Intent(this, MainActivity.class); startActivity(intent); break; } default: break; } } }
In the code above, we create a Button variable mMediaManagerBtn and initialize it in the onCreate() method. Moreover, implement the onClick() method of the Button and invoke startActivity() method to start the MainActivity.
Next, continue to open the "activity_default_layout.xml" file, and replace the code with the following:
<!-- Widgets in top status bar --> <LinearLayout android:id="@+id/signal" android:layout_width="match_parent" android:layout_height="25dp" android:background="@color/dark_gray" android:orientation="horizontal">
<!--Take off and return home buttons on left --> <LinearLayout android:layout_width="40dp" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginStart="12dp" android:orientation="vertical">
<!-- Widget to see first person view (FPV) --> <dji.ux.widget.FPVWidget android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/play_btn" android:layout_toStartOf="@+id/pointing_drawer_sd" android:id="@+id/FPVWidget" />
In the xml above, we define the following UI elements:
Create 10 Buttons with the names of "BACK", "DELETE", "RELOAD", "DOWNLOAD", "STATUS", "PLAY", "RESUME", "PAUSE", "STOP" and "MOVETO" on the upper left corner.
Create a FPVWidget widget below the Buttons to show the live camera video stream.
Create an ImageView to show the downloaded photo and overlay it over the FPVWidget.
Create a RecyclerView on the right side to show the info of media files list.
Lastly, create a ScrollView with a TextView to show the video playback state info.
Here is a screenshot of the implemented UI of MainActivity:
Initializing the UI Elements in MainActivity
Once you finished the steps above, let's open the "MainActivity.java" file and replace the code with the following:
@Override publicvoidonClick(View v){ switch (v.getId()) { case R.id.back_btn: { break; } case R.id.delete_btn:{ break; } case R.id.reload_btn: { break; } case R.id.download_btn: { break; } case R.id.status_btn: { break; } case R.id.play_btn: { break; } case R.id.resume_btn: { break; } case R.id.pause_btn: { break; } case R.id.stop_btn: { break; } case R.id.moveTo_btn: { break; } default: break; } } }
In the code above, we implement the following:
Create variables for Button, RecyclerView, SlidingDrawer, ImageView and TextView.
Next, create an initUI() method to initialize the UI elements and invoke the setOnClickListener method of Buttons to set MainActivity as the listener. Then invoke the initUI() method in the onCreate() method.
Lastly, implement the onClick() method for all the Buttons.
Registering the Application
After you finish the above steps, let's register our application with the App Key you apply from DJI Developer Website. If you are not familiar with the App Key, please check the Get Started.
Moreover, please check the Creating an Camera Application tutorial and the sample project of this tutorial for the detailed implementations of the MApplication, DemoApplication and ConnectionActivity
Now let's build and run the project and install it to your Android device. If everything goes well, you should see the "Register Success" textView like the following screenshot when you register the app successfully.
Refreshing Media File List
Initializing MediaManager
Now, continue to work on the "MainActivity.java" file. Firstly, add the following codes at the beginning of the MainActivity class:
In the code above, we firstly initialize the mListAdapter and invoke the setAdapter() method of RecyclerView to set it as listView's adapter. Then initialize the mLoadingDialog to show messages.
Furthermore, implement the following two methods to show and hide the mLoadingDialog dialog:
In the code above, we implement the following features:
Firslty, initialize the updateFileListStateListener and update the value of currentFileListState variable inside the onFileListStateChange callback method.
Next, in the initMediaManager() method, check if the product is connected, if not, reset the mediaFileList and invoke the notifyDataSetChanged() method of FileListAdapter to update the listView.
If the product is connected, initialize the mMediaManager by invoking the getMediaManager() method of Camera.
Fetching Media File List
Once we have finished the steps above, we can start to fetch the media files list from the Camera SD card and show them on the listView.
Implement the following methods as shown below:
privatevoidgetFileList(){ mMediaManager = DemoApplication.getCameraInstance().getMediaManager(); if (mMediaManager != null) {
if ((currentFileListState == MediaManager.FileListState.SYNCING) || (currentFileListState == MediaManager.FileListState.DELETING)){ DJILog.e(TAG, "Media Manager is busy."); }else{
mMediaManager.refreshFileListOfStorageLocation(SettingsDefinitions.StorageLocation.SDCARD, new CommonCallbacks.CompletionCallback() {
@Override publicvoidonResult(DJIError djiError){ if (null == djiError) { hideProgressDialog();
//Reset data if (currentFileListState != MediaManager.FileListState.INCOMPLETE) { mediaFileList.clear(); lastClickViewIndex = -1; lastClickView = null; }
privatevoidgetThumbnails(){ if (mediaFileList.size() <= 0) { setResultToToast("No File info for downloading thumbnails"); return; } for (int i = 0; i < mediaFileList.size(); i++) { getThumbnailByIndex(i); } }
In the code above, we implement the following features:
In the getFileList() method, we fetch the latest mMediaManager object and check if it's not null. Then check the value of the currentFileListState variable. If the state is neither SYNCING nor DELETING, invoke the refreshFileListOfStorageLocation() method of MediaManager to refresh the file list from the SD card.
In the onResult() callback method, if there is no error, then check if the currentFileListState value is not equal to MediaManager.FileListState.INCOMPLETE and reset the mediaFileList list, the lastClickViewIndex and the lastClickView variables.
Invoke the getSDCardFileListSnapshot() method of MediaManager to get the current file list and store it in the mediaFileList variable.
Sort the media files in the mediaFileList based on the created time. Then invoke the resume() method of FetchMediaTaskScheduler to resume the scheduler and invoke the getThumbnails() method in the onResult() callback method. If there is an error, invoke the hideProgressDialog() method to hide the progress dialog.
Next, create the getThumbnailByIndex() method to initialize the FetchMediaTask tasks for FetchMediaTaskContent.THUMBNAIL, and then move the tasks to the end of FetchMediaTaskScheduler.
After that, create the getThumbnails() method to go through the files in the mediaFileList and invoke the getThumbnailByIndex() method to initialize the FetchMediaTask tasks.
Lastly, initialize the taskCallback variable and implement the onUpdate() callback method. If there is no error, check the value of the option variable. If the value is equal to either FetchMediaTaskContent.PREVIEW or FetchMediaTaskContent.THUMBNAIL, invoke the notifyDataSetChanged() method of the FileListAdapter in the UI thread to update the listView.
Once you finish the steps above, continue to insert the following code below the mMediaManager = DemoApplication.getCameraInstance().getMediaManager(); in the initMediaManager() method:
if (null != mMediaManager) { mMediaManager.addUpdateFileListStateListener(this.updateFileListStateListener); DemoApplication.getCameraInstance().setMode(SettingsDefinitions.CameraMode.MEDIA_DOWNLOAD, new CommonCallbacks.CompletionCallback() { @Override publicvoidonResult(DJIError error){ if (error == null) { DJILog.e(TAG, "Set cameraMode success"); showProgressDialog(); getFileList(); } else { setResultToToast("Set cameraMode failed"); } } }); if (mMediaManager.isVideoPlaybackSupported()) { DJILog.e(TAG, "Camera support video playback!"); } else { setResultToToast("Camera does not support video playback!"); } scheduler = mMediaManager.getScheduler(); }
In the code above, we implement the following features:
Check if the mMediaManager is not null, then invoke the addUpdateFileListStateListener() method of mMediaManager to add listener for file list state update.
Invoke the setMode() method of Camera and set the CameraMode to MEDIA_DOWNLOAD. In the completion block, if there is no error, invoke the showProgressDialog() method to show the fetch file progress and invoke the getFileList() method to fetch the media file list. Lastly, initialize the FetchMediaTaskScheduler to schedule the fetch media file task.
Furthermore, create a new XML Layout file and name it as "media_info_item.xml" in the layout folder, replace the code with the following:
In the code above, we define the layout of the ItemHolder in listView. Add one ImageView on the left side and four TextViews on the right side as shown below:
Lastly, continue to implement the following methods to show fetched media files in the listView:
Define the ItemHolder class, which extends from the RecyclerView.ViewHolder. Inside the class, define one ImageView and four TextViews and initialize them by invoking the findViewById() method.
Define the FileListAdapter class and extend it from RecyclerView.Adapter<ItemHolder>. In this class, Override the getItemCount() method and return the size of the mediaFileList.
Moreover, in the onCreateViewHolder method, we define the layout of the ItemHolder in listView using the "media_info_item.xml" file.
In the onBindViewHolder method, get the mediaFile variable from the mediaFileList by using the index value. Then update the infos of the ItemHolder with this mediaFile, like file_name, file_type, thumbnail_img, etc. Set the mediaFile as the tag of thumbnail_img and set the tag of itemView as the index value. We will use them later. Also, invoke the setOnClickListener() method of ImageView to register the callback to be invoked when the thumbnail_img is clicked.
Furthermore, if the current ItemHolder is selected, invoke the setSelected() method of its itemView variable and pass true to it. Then, invoke the setOnClickListener() method and pass the itemViewOnClickListener variable to register the callback to be invoked when the itemView is clicked.
Next, initialize the itemViewOnClickListener and ImgOnClickListener variables and override their onClick() methods. When the itemView is clicked, update the value of lastClickViewIndex and the selected state of lastClickView. When the thumbnail_img is clicked, create the selectedMedia variable by invoking the getTag() method of the selected thumbnail_img and then check if the selectedMedia and mMediaManager variables are null. If not, invode the addMediaTask() method and pass the selectedMedia variable to get the preview image.
Lastly, implement the addMediaTask() method to fetch the MediaFile and show its preview image in the mDisplayImageView variable. In the onUpdate() callback method, invoke the getPreview() method of MediaFile to get the preview image.
For more details of the implementation, please check the sample code of this tutorial on Github.
So far, we have finished implementing refreshing the media file list, and show them in the RecyclerView listView. Also, you can select a specific media file and preview the image.
Now, build and run the project and install it to your Android device. If everything goes well, you should see something similar to the following gif animation:
Downloading and Editing the Media Files
Once you finish the steps above, continue to add the following codes at the beginning of the MainActivity class:
Here, we initialize the mDownloadDialog and configure different settings for it. Also, override the onCancel() callback method of OnCancelListener and invoke the exitMediaDownloading() method of MediaManager to stop the media fil downloading process when the cancel button is pressed.
Next, implement the following methods to show and hide the download mDownloadDialog:
@Override publicvoidonProgress(long total, long current){ }
@Override publicvoidonRateUpdate(long total, long current, long persize){ int tmpProgress = (int) (1.0 * current / total * 100); if (tmpProgress != currentProgress) { mDownloadDialog.setProgress(tmpProgress); currentProgress = tmpProgress; } }
In the code above, we implement the following features:
In the downloadFileByIndex() method, we firstly check if the media type is either PANORAMA or SHALLOW_FOCUS by invoking the getMediaType() method of MediaFile, if not, continue to execute.
Invoke the fetchFileData() method of MediaFile to fetch the media files' full resolution data from the SD card. In the onFailure() method, invoke the HideDownloadProgressDialog() method to hide the mDownloadDialog, also reset the value of the currentProgress variable to -1.
In the onRateUpdate() method, we calculate the current download progress and save it to the tmpProgress variable. Then update the mDownloadDialog and currentProgress based on this variable. In the onStart() method, reset the currentProgress variable and invoke the ShowDownloadProgressDialog() method to show the mDownloadDialog.
In the onSuccess() method, invoke the HideDownloadProgressDialog() method to hide the mDownloadDialog and reset the currentProgress variable.
Moreover, in the deleteFileByIndex() method, we firstly create an ArrayList variable fileToDelete, then check if the size of the mediaFileList is bigger than the index. Next, invoke the add() method of ArrayList and to add the selected media file you want to delete. Invoke the deleteFiles() method of MediaManager() and pass the fileToDelete variable to delete media files from SD card. In the completion block, we override the onSuccess() method to reset the selected view, and update the listView with the removed item.
Lastly, implement the onClick() method of delete_btn, reload_btn and download_btn buttons as shown below:
case R.id.delete_btn:{ deleteFileByIndex(lastClickViewIndex); break; } case R.id.reload_btn: { getFileList(); break; } case R.id.download_btn: { downloadFileByIndex(lastClickViewIndex); break; }
For more details of the implementation, please check the sample code of this tutorial on Github.
Now, we can test the features we have implemented so far. Build and run the project and install it to your Android device. If everything goes well, you should see something similar to the following gif animation:
Working on the Video Playback
Now, continue to implement the video playback feature of MediaManager. In the onDestroy() method, insert the following code below the lastClickView = null; :
if (mMediaManager != null) { mMediaManager.stop(null); mMediaManager.removeFileListStateCallback(this.updateFileListStateListener); mMediaManager.removeMediaUpdatedVideoPlaybackStateListener(updatedVideoPlaybackStateListener); mMediaManager.exitMediaDownloading(); if (scheduler!=null) { scheduler.removeAllTasks(); } }
Here, we invoke the stop() method of MediaManager to stop the playing video. Then invoke the removeMediaUpdatedVideoPlaybackStateListener() method to remove the listener. Moreover, invoke the removeFileListStateCallback() method to remove the file list state callback. Next, invoke the exitMediaDownloading() method to exit the MEDIA_DOWNLOAD mode and enter the SHOOT_PHOTO mode. Lastly, if the scheduler is not null, invoke the removeAllTasks() method to remove all the existing media tasks.
Next, insert the following code below the mMediaManager.addUpdateFileListStateListener(this.updateFileListStateListener); in the initMediaManager() method:
In the code above, invoke the addMediaUpdatedVideoPlaybackStateListener() method and pass the updatedVideoPlaybackStateListener variable to add the listener for video playback state update.
Furthermore, initialize the updatedVideoPlaybackStateListener variable and implement the updateStatusTextView() and addLineToSB() methods as shown below:
privatevoidaddLineToSB(StringBuffer sb, String name, Object value){ if (sb == null) return; sb. append((name == null || "".equals(name)) ? "" : name + ": "). append(value == null ? "" : value + ""). append("\n"); }
privatevoidsetResultToText(final String string){ if (mPushTv == null) { setResultToToast("Push info tv has not be init..."); } MainActivity.this.runOnUiThread(new Runnable() { @Override publicvoidrun(){ mPushTv.setText(string); } }); }
Here, we implement the following features:
When intialize the updatedVideoPlaybackStateListener, we override the onUpdate() method. Then invoke the updateStatusTextView() method by passing the videoPlaybackState variable as param to update the video playback status info in the mPushTv TextView.
In the updateStatusTextView() method, we create the pushInfo variable firstly and invoke the addLineToSB() method to append video playback state info. Then invoke the setResultToText() method to show it it the mPushTv TextView.
Moreover, continue to implement the following methods:
privatevoidplayVideo(){ mDisplayImageView.setVisibility(View.INVISIBLE); MediaFile selectedMediaFile = mediaFileList.get(lastClickViewIndex); if ((selectedMediaFile.getMediaType() == MediaFile.MediaType.MOV) || (selectedMediaFile.getMediaType() == MediaFile.MediaType.MP4)) { mMediaManager.playVideoMediaFile(selectedMediaFile, new CommonCallbacks.CompletionCallback() { @Override publicvoidonResult(DJIError error){ if (null != error) { setResultToToast("Play Video Failed" + error.getDescription()); } else { DJILog.e(TAG, "Play Video Success"); } } }); } }
privatevoidmoveToPosition(){
LayoutInflater li = LayoutInflater.from(this); View promptsView = li.inflate(R.layout.prompt_input_position, null); AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this); alertDialogBuilder.setView(promptsView); final EditText userInput = (EditText) promptsView.findViewById(R.id.editTextDialogUserInput); alertDialogBuilder.setCancelable(false).setPositiveButton("OK", new DialogInterface.OnClickListener() { publicvoidonClick(DialogInterface dialog, int id){ String ms = userInput.getText().toString(); mMediaManager.moveToPosition(Integer.parseInt(ms), new CommonCallbacks.CompletionCallback() { @Override publicvoidonResult(DJIError error){ if (null != error) { setResultToToast("Move to video position failed" + error.getDescription()); } else { DJILog.e(TAG, "Move to video position successfully."); } } }); } }) .setNegativeButton("Cancel", new DialogInterface.OnClickListener() { publicvoidonClick(DialogInterface dialog, int id){ dialog.cancel(); } }); AlertDialog alertDialog = alertDialogBuilder.create(); alertDialog.show();
}
Here, we implement the following features:
In the playVideo() method, we firstly hide the mDisplayImageView image view. Then initialize the selectedMediaFile variable and check if the media type is either MOV or MP4. If so, invoke the playVideoMediaFile() method of MediaManager and pass the selectedMediaFile variable as the param to start the video playback. In the completion block, override the onResult() method to show toast message to inform users if there is any error.
In the moveToPosition() method, we firstly create the promptsView from the layout of prompt_input_position. Then initialize the alertDialogBuilder and set its view as promptsView. After that, initialize the userInput variable from the promptsView. Invoke the setCancelable() method to set dialog as not cancelable. Also invoke the setPositiveButton() method to set a listener to be invoked when the positive button of the dialog is pressed. Moreover, override the onClick() method and invoke the moveToPosition() method of MediaManager to skip to the new position in seconds from the start of the video.
Furthermore, create a new XML Layout file and name it as "prompt_input_position.xml" in the layout folder, replace the code with the following:
In the code above, we create a TextView and a EditText as shown below:
Lastly, let's implement the onClick() method of status_btn, play_btn, resume_btn, pause_btn, stop_btn and moveTo_btn as shown below:
case R.id.status_btn: { if (mPushDrawerSd.isOpened()) { mPushDrawerSd.animateClose(); } else { mPushDrawerSd.animateOpen(); } break; } case R.id.play_btn: { playVideo(); break; } case R.id.resume_btn: { mMediaManager.resume(new CommonCallbacks.CompletionCallback() { @Override publicvoidonResult(DJIError error){ if (null != error) { setResultToToast("Resume Video Failed" + error.getDescription()); } else { DJILog.e(TAG, "Resume Video Success"); } } }); break; } case R.id.pause_btn: { mMediaManager.pause(new CommonCallbacks.CompletionCallback() { @Override publicvoidonResult(DJIError error){ if (null != error) { setResultToToast("Pause Video Failed" + error.getDescription()); } else { DJILog.e(TAG, "Pause Video Success"); } } }); break; } case R.id.stop_btn: { mMediaManager.stop(new CommonCallbacks.CompletionCallback() { @Override publicvoidonResult(DJIError error){ if (null != error) { setResultToToast("Stop Video Failed" + error.getDescription()); } else { DJILog.e(TAG, "Stop Video Success"); } } }); break; } case R.id.moveTo_btn: { moveToPosition(); break; }
In the code above, we implement the following features:
In the case of status_btn button, invoke the isOpened() method of the mPushDrawerSd variable to check if it's open, if so, invoke the animateClose() method of it to close the drawer with an animation. Otherwise, invoke the animateOpen() method of it to open the drawer with an animation.
In the case of play_btn button, invoke the playVideo() method to start the video playback.
In the case of resume_btn button, invoke the resume() method of MediaManager to resume the paused video and override the onResult() method and show toast message to inform user if there is any error.
In the case of pause_btn button, invoke the pause() method of MediaManager to pause the playing video and override the onResult() method and show toast message to inform user if there is any error.
In the case of stop_btn button, invoke the stop() method of MediaManager to stop the playing video and override the onResult() method and show toast message to inform user if there is any error.
Lastly, for the case of moveTo_btn button, invoke the moveToPosition() method to skip to the new position in seconds from the start of the video.
We have gone through a long way in this tutorial, now let's build and run the project, connect the demo application to your Mavic Pro (Please check Run Application for more details) and check all the features we have implemented so far.
If everything goes well, you should see something similar to the following gif animations like this:
Summary
In this tutorial, you have learned how to use MediaManager to preview photos, play videos, download or delete files, you also learn how to get and show the video playback status info. By using the MediaManager, the users can get the metadata for all the multimedia files, and has access to each individual multimedia file. Hope you enjoy it!
