Question 215280 in Flutter Question posted in
The official Flutter documentation can be found here.

Cannot get image from camera Flutter web

I’m new to Flutter. With flutter web I’m trying to make a web application that allows me to use the camera. I want to be able to detect the user’s face. I have a flask code that takes care of this, but to do so it needs a series of images that I’d like to send it from flutter. When I try to retrieve the image, it returns a blob link that opens another window to my application. So I can’t retrieve the image.
I’ve tried image picker web, imagepicker, camera as plugins but I still have the same problem.

here I initialize the camera :


startCamera() async {
_cameras = await availableCameras();
_controller = CameraController(_cameras[0], ResolutionPreset.high,
enableAudio: false);
_initializeControllerFuture = _controller.initialize();
_controller.initialize().then((_) {
// _controller.startImageStream(image);
if (!mounted) {
return;
}
setState(() {});
}).catchError((Object e) {
if (e is CameraException) {
switch (e.code) {
case 'CameraAccessDenied':
// Handle access errors here
break;
default:
// Handle other errors here
break;
}
}
});
}

This is the code that takes the picture in the Onpress method of a button:


final ImagePicker _picker = ImagePicker();
// Ensure that the camera is initialized.
await _initializeControllerFuture;

                          // Attempt to take a picture and get the file `image`
                          // where it was saved.
                          final image = await _controller.takePicture();
                          var selected = io.File(image.path);
                          
                          print("this is the selected path" + image.path);

This is what i get in the console :

this is the selected path blob:http://localhost:49318/bdd2-002c0374c3c6

can you please help me? I’ve been working on it for several days now

Tags:

2

Answers


  1. 0

    I hope I understood you correctly. So you retrieve the image as the blob format because it is an Image from the web. As stated in this answer, the web platform does not support the dart:io package. To Display it you’ll need to use

    Image.Network(blobPath)

    When u want to save the image, you need to decode the image to BASE64.
    So you’ll get something like:

    Uint8List image = base64.decode(blobPath)

    Now you can do whatever you want with the image.

    Login or Signup to reply.
  2. 0

    Here’s my solution:

    1. Decode the captured image to ui.image:

      XFile file = await controller!.takePicture();
final data = await file.readAsBytes();
ui.Image sourceImage = await decodeImageFromList(data);

    2. Draw the ui.image with CustomPainter:

      class MyPainter extends CustomPainter {
   ui.Image? image;

   MyPainter (this.image);

   @override
   void paint(Canvas canvas, Size size) {
    final paint = Paint()
    ..color = colorOrange
    ..strokeWidth = 15
    ..style = PaintingStyle.stroke;

    if (image != null) {
      canvas.drawImage(image!, Offset.zero, paint);
    }

  }

  @override
  bool shouldRepaint(OverlayPainter oldDelegate) => true;
}

    3. Render a CustomPaint widget with MyPainter:

      FittedBox(
     fit: BoxFit.contain,
     child: SizedBox(
         width: image!.width.toDouble(),
         height: image.height.toDouble(),
         child: CustomPaint(
             painter: MyPainter(image),
 )));

    You can also try my source code and online demo.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search