BMP header for image stream Flutter

Question

I was able to get video streaming by converting the uint8 data into bytes (code below), but it just looks like static. I think there's something wrong with my bitmap header (I think it is missing). Could someone please tell me if there is anything I can include from the raw data I'm receiving for the bitmap header?

Info about message I'm receiving: http://docs.ros.org/melodic/api/sensor_msgs/html/msg/Image.html

Example raw image data received:

{encoding: bgr8, height: 480, header: {stamp: {secs: 1599095871, nsecs: 933816910}, frame_id: bottom_camera_front, seq: 4766}, step: 1920, data: gnZ8gnZ8gnZ8gnZ8gXZ5gXZ5f3V7f3V7fXZ7fXZ7fHR7fXV8fXV/fnaAfXV/e3Z/eXd9d3d9d3d9d3d9eXd9eXd9e3d9e3d9fXZ9fXZ9fnZ9fnZ9fnZ9fnZ9gHV9fnZ9fXl/enh+enh+enh+eXd9eHZ8enh+fXuBfHqAe3l/fXl/fHh+fnd+fnd+gHh/gHh/hHmBhHmBgnqBgnqBgXqBgXqBfHqAfHqAenqAe3uBe3uBe3uBeXyBen2Cen2CfHyCfXuBf3uBf3uBf3uBf3uBf3uBf3uBf3uBgHyCgHyCgHyCgHyCgHyCgHyCgHyCgHyCgnuCgnuCgHyCgHyCfnyCfnyCe3qDe3qDd3qCd3qCdXqDdnuEdHuEdHuEcnuEcnuEdHyDdHyDdnyDdnyDeHuDeXuDeXuDe3qDfXqDfHmCfHmCfHmCfHmCfHmCfHmCfXqDeXqEenuFe3yGfH2HfH6GfX+HfX+HfX+HfH+EfH+EfH+EfH+Ee36De36De36Ce36Cfn6Efn6Ef3+Ff3+FgIGFf4CEfYCEfH+DfH+De36Ce36CfH+DfH+Ee36Den2CfX2Df3+FgX+FgX+FgX+FgX+FgX+Ff3+Ff3+Ff3+Ff3+Ff3+Ff3+FfYCFfYCFfYCFfYCFfIGEfIGEfIGEfIGEeoGEeoGEeoCFe4GGe4GGfYGGfYGGgICGgICGgoCGhICGhICGh3+Jhn6IhH+IhH+Ig36HhH+IgoCGgoCGgX+FgX+Fg3+EhICFhYGGhYGGiIKHiYKHiYGIi4CIi4CIi4CIi4CIi4CIiYKHiYKHioOIioOIiIOFiIOFiIOFiIOFiYSGiYOIh4CHh3+Jh4CHhn+Gh4CHh4CHiYGIioKJi4SJi4SJioOIio

Widget _buildVideoOutput(snapshot) {
    if (!snapshot.hasData) {
      return Text("");
    }

    var msg = snapshot.data;
    // print(msg);

    var rawDataString = msg["data"]; //uint8 string (bgr8)
    // print(rawDataString);
    var secs = msg["header"]["stamp"]["secs"];
    // print(secs); //time in secs
    List<int> bytes = utf8.encode(rawDataString); //convert data to bytes
    // print(bytes);

    Uint8List dataInts = Uint8List.fromList(bytes);
    // print(dataInts);

    int imageWidth = 640;
    int imageHeight = 480;

    Bitmap bitmap = Bitmap.fromHeadless(imageWidth, imageHeight, dataInts);

    // Bitmap brightBitmap = bmp.brightness(bitmap, 0.2);
    // Bitmap nowThisBitmapLooksWeird = bmp.contrast(brightBitmap, 1.5);
    // Bitmap finalBitmap =
    //     bmp.adjustColor(nowThisBitmapLooksWeird, saturation: 1.0);

    Uint8List headedBitmap = bitmap.buildHeaded();

    //ui.Image outputImage = await bitmap.buildImage();
    //canvas.drawImage(outputImage, Offset.zero, ui.Paint());

    Image image = Image.memory(
      headedBitmap,
      fit: BoxFit.none,
    );

    return image;
  }

Your data seems to imply your image is 480 px high, but you tell the BMP it's 390x310... — Mark Setchell, Sep 03 '20 at 17:56
I did not think about that. I changed the height and width to 480 px, and it looks like I can start to see some shapes but it still has a lot of static and the image is repeating across the width. — codenstuff, Sep 03 '20 at 18:28
I don't speak *"flutter/dart"*, so I am only guessing here. If the image is bgr8, it must have 3 bytes/pixel. If the **step** is 1920, that means each line starts 1920 bytes after the previous one, so the image must be 640 wide by 480 high. Have you tried that in your BMP? It also means your data should be 640 * 480 * 3 bytes long. Does that work out? — Mark Setchell, Sep 03 '20 at 18:31
Thank you so much for this info! I was able to change the height and width to the correct values, and my image is now showing the correct shapes, but white is showing up as black, etc. — codenstuff, Sep 03 '20 at 18:44
I still don't speak *"flutter/dart"*, but I guess you have a `negate()` or `invert()` function? Or set each pixel to `pixel = 255 - pixel`. — Mark Setchell, Sep 03 '20 at 19:33

BMP header for image stream Flutter

0 Answers0