How To add OverlayView in Xamarin IOS Live Camera

Question

I am accessing the live camera but i want to add an overlay above it, to take a specific picture and save the picture insde an overlay.
My goal is as shown on the picture below

Can someone please suggest how to achieve the above in native java using Camera2API? — Siddhivinayak, May 27 '19 at 10:48

Durai Amuthan.H · Answer 1 · 2019-06-06T06:52:46.260

You can use UIImagePickerController to do that.

First make a overlay view like the one shown in your question.

I'm sure you can get the grey effect with Alpha property of view.
you can make the line using UIBezierPath

when you are done with the overlay view then assign it to CameraOverlayView property of UIImagePickerController

Here is the rough example of that.

    imagePicker = new UIImagePickerController();

    // set our source to the camera
    imagePicker.SourceType = UIImagePickerControllerSourceType.Camera;

    // set
    imagePicker.MediaTypes = new string[] { "public.image" };

    // show the camera controls
    imagePicker.ShowsCameraControls = true;

    // This is where you assign the view that you want to overlay   
    imagePicker.CameraOverlayView = new CameraOverlayView();

Update:

Use CGImageCreateWithImageInRect class to get the cropped version of image. Pass camera overlay's rect and image reference of picture taken by camera and this class will return the cropped image that camera overlay covers.

Here is an example from Objective C and I'm sure you can do something similar in Xamarin.iOS

CGImageRef imageRef = CGImageCreateWithImageInRect([largeImage CGImage], cropRect);
// or use the UIImage wherever you like
[UIImageView setImage:[UIImage imageWithCGImage:imageRef]]; 
CGImageRelease(imageRef);

That was helpful, i managed to add a customized rectangle as an overlay to the camera and allow the user to take the picture inside the rectangle — Assegd, May 17 '19 at 12:51
I want the image picker to pick only the picture taken inside the "Camera Overlay" rectangle and ignore part of the picture outside the overlay Can you please give me any suggesion on that ? — Assegd, Jun 05 '19 at 13:48

score 1 · Answer 2 · edited Mar 30 '20 at 18:54

I managed to add CameraOverlayView, "to allow the user to take a picture inside the given rectangle"

private UIImagePickerController _imagePicker;

private void OpenCameraAndTakePhoto() { 
    _imagePicker = new UIImagePickerController();
    _imagePicker.SourceType = UIImagePickerControllerSourceType.Camera;
    _imagePicker.MediaTypes = UIImagePickerController.AvailableMediaTypes(UIImagePickerControllerSourceType.Camera);
    _imagePicker.FinishedPickingMedia += Handle_FinishedPickingMedia;
    _imagePicker.Canceled += Handle_Canceled;
    _imagePicker.ShowsCameraControls = true;
    UIView view = new UIView(new CGRect(30, 200, 250, 120));
    view.Layer.BorderColor = UIColor.Blue.CGColor;
    view.Layer.BorderWidth = 3.0f;
    _imagePicker.CameraOverlayView = view;

    PresentModalViewController(_imagePicker, true);
}

How To add OverlayView in Xamarin IOS Live Camera

2 Answers2

Linked