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

Answer 1

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);

Answer 2

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

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);

}