Get frames in a video in Sketchware

 This sample shows how to get the frames in a video and display it in a GridView in Sketchware.

1. Create a new project in Sketchware.

2. In main.xml add a LinearLayout linear1. Below this add a ListView listview1.

3. Create a more block custom.xml. Add an ImageView imageview1 in it.

4. For listview1, select custom.xml as Custom View. Set height of linear1 to match_parent.

5. In View main.xml add a Floating Action Button _fab.

6. Add a FilePicker Component fp: video/*, and a Camera component cam.

7. Create a More block extra and declare GridView gridview1 and a list of bitmap images frames using following codes:

} GridView gridview1;

ArrayList<Bitmap> frames; {

8. Create a String path, a Map variable map, a List String list and a List Map imagelist.

9. In onCreate event put following codes.

gridview1 = new GridView(this);

gridview1.setLayoutParams(new GridView.LayoutParams(GridView.LayoutParams.MATCH_PARENT, GridView.LayoutParams.MATCH_PARENT));

gridview1.setBackgroundColor(Color.WHITE);

gridview1.setNumColumns(2); gridview1.setColumnWidth(GridView.AUTO_FIT);

gridview1.setVerticalSpacing(16); gridview1.setHorizontalSpacing(2); gridview1.setStretchMode(GridView.STRETCH_COLUMN_WIDTH);

linear1.removeAllViews();

linear1.addView(gridview1);

gridview1.setAdapter(new Listview1Adapter(imagelist));

((BaseAdapter)gridview1.getAdapter()).notifyDataSetChanged();

10. In fab onClick event, use File Picker fp pick files block.

11. In File Picker onFilesPicked event, use following codes:

path = _filePath.get((int)(0));

java.util.concurrent.ExecutorService executor = java.util.concurrent.Executors.newSingleThreadExecutor();

final Handler handler = new Handler(Looper.getMainLooper());

executor.execute(new Runnable() {

@Override

public void run() {

//Background work here

imagelist.clear();

MediaMetadataRetriever retriever = new MediaMetadataRetriever();

retriever.setDataSource(getApplicationContext(), FileProvider.getUriForFile(MainActivity.this, getApplicationContext().getPackageName() + ".provider", new java.io.File(path)));

String duration = retriever.extractMetadata(MediaMetadataRetriever.METADATA_KEY_DURATION);

int millSecond = Integer.parseInt(duration);

int duration_second = millSecond / 1000;

frames = new ArrayList<>();

int numeroFrameCaptured = (int)(duration_second*2);

for (int i = 0; i < numeroFrameCaptured; i++){

frames.add(retriever.getFrameAtTime((duration_second*1000000*i)/numeroFrameCaptured));

map = new HashMap<>();

map.put("frame", "new");

imagelist.add(map);

}

handler.post(new Runnable() {

@Override

public void run() {

//UI Thread work here

gridview1.setAdapter(new Listview1Adapter(imagelist));

((BaseAdapter)gridview1.getAdapter()).notifyDataSetChanged();

} });

} });

The code in blue above is for doing the task of retrieving frames in background thread.

12. In ListView onBindCustomView event, display bitmap from bitmap list frames, in imageview1.

imageview1.setImageBitmap(frames.get(_position));

13. Run the project.

Watch video below