Take screenshot in native java and display this screenshot in flutter

Question

Want to take a screenshot of the mobile screen with native Java. Store this screenshot Bitmap in a byte[] array, pass this byte[] array in flutter through platform channel and finally want to display this screenshot in a flutter app.

Native Java Code:

  public Bitmap takeScreenshot(){
        View rootView = findViewById(android.R.id.content).getRootView();
        rootView.setDrawingCacheEnabled(true);
        return rootView.getDrawingCache();
  }

  public byte[] bitmapToByte(){
      Bitmap bitmap = takeScreenshot();

      ByteArrayOutputStream stream = new ByteArrayOutputStream();
      bitmap.compress(Bitmap.CompressFormat.PNG, 100, stream);
      byte[] array = stream.toByteArray();
      Log.i("MyAndroidClass", Arrays.toString(array));

      return array;
  }

  public File saveBitmap(Bitmap bitmap){
      Bitmap bitmap = takeScreenshot();
      File imagePath = new File(Environment.getExternalStorageDirectory() + "/screenshoot.png");
      FileOutputStream fos;
      try{
          fos = new FileOutputStream(imagePath);
          bitmap.compress(Bitmap.CompressFormat.PNG, 100, fos);
          fos.flush();
          fos.close();
      } catch (FileNotFoundException e) {
          Log.e("GREC", e.getMessage(), e);
      } catch (IOException e) {
          Log.e("GREC", e.getMessage(), e);
      }
      return imagePath;
  }

Dart Platform Channel:

Future<Null> _takeScreenShot() async {
    Uint8List screenShot;

    Uint8List ssView = await platform2.invokeMethod("takeScreenshot");
    screenShot = ssView;
    print(screenShot);
    setState(() {
      byteView = screenShot;
    });
  }

Flutter UI to display screenshot:

Container(
  child: byteView != null
     ? Image.memory(
        byteView,
        width: 100,
        height: 150,
        )
     : Container(),
 ),

print(screenshot) shows a byte[] array:

[137, 80, 78, 71, 13, 10, 26, 10, 0, 0, 0, 13, 73, 72, 68, 82, 0, 0, 4, 56, 0, 0, 7, 128, 8, 2, 0, 0, 0, 164, 3, 112, 93, 0, 0, 0, 3, 115, 66, 73, 84, 8, 8, 8, 219, 225, 79, 224, 0, 0, 32, 0, 73, 68, 65, 84, 120, 156, 236, 221, 187, 138, 20, 81, 20, 64, 209, 115, 155, 198, 119, 160, 129, 162, 160, 32, 38, 130, 255, 228, 159, 248, 165, 134, 26, 136, 10, 130, 207, 81, 25, 186, 12, 156, 25, 17, 140, 237, 13, 179, 86, 80, 20, 197, 13, 78, 186, 57, 69, 213, 122, 254, 98, 46, 172, 53, 107, 247, 251, 110, 0, 0, 0, 254, 135, 109, 102, 102, 14, 115, 216, 254, 60, 219, 255, 227, 208, 58, 63, 10, 0, 0, 112, 12, 103, 161, 178, 109, 51, 219, 28, 182, 57, 28, 102, 89, 167, 0, 0, 0, 255, 215, 90, 179, 214, 204, 58, 235, 145, 243, 141, 202, 54, 223, 79, 230, 219, 167, 249, 246, 249, 252, 220, 113, 198, 3, 0, 0, 46, 163, 171, 55, 230, 230, 237, 185, 118, 99, 214, 110, 102, 155, 253, 110, 205, 54, 115, 216, 230, 235, 199, 121, 251, 106, 222, 191, 58, 246, 128, 0, 0, 192, 229, 115, 231, 254, 60, 120, 50, 87, 174, 206, 126, 63,

Complete Byte[] array didn't pass to flutter from native through the channel. But it displays a black Image container

@RichardHeap, please check problem details, I added what `print(screenshot)` shows. — ahmed minhaj, Mar 12 '20 at 07:03
That's a PNG header, so promising. It looks like the 3rd block is 8192 bytes long. Can you print the length of the byte array at each end to confirm there's no truncation. (Note that printing the byte array itself will only print the start of the array as that's truncated by the log. Printing the length will show that the array isn't truncated.) Can you save the byte array to a file, or upload to an http server so that you can confirm it displays ok on a laptop? — Richard Heap, Mar 12 '20 at 10:20
That seems short considering the third PNG block appears to be 8k. — Richard Heap, Mar 13 '20 at 10:32
Saved the byte[] array to a file and it shows the same result, a black screen. How do I get the original screenshot? — ahmed minhaj, Mar 16 '20 at 08:22

score 0 · Answer 1 · answered Mar 11 '20 at 14:16

0

An easy way to achieve this would be to save the screenshot as a file on the disk and simply pass the file path to flutter. Then you load it using Image.file

answered Mar 11 '20 at 14:16

Neeraj

2,376
2
24
41

please check my updated native code `saveBitmap()` function, did you suggest to follow this process? – ahmed minhaj Mar 12 '20 at 07:10
@ahmedminhaj You can take a look at https://stackoverflow.com/a/5651242/1630255 for taking a screenshot and saving it to disk. – Neeraj Mar 12 '20 at 10:18

Take screenshot in native java and display this screenshot in flutter

1 Answers1