Mediaplugin: Outline overlay camera preview and picture taken does not match position

[Philyorkshire]

Bug Information

When using an OverlayViewProvider image for iOS, it correctly displays the overlay in the camera preview screen. But when you take the picture and the following page is shown with the image, then the overlay is displayed at a higher x-axis position then it was when taking the picture.

Version Number of Plugin: 2.2.0
Device Tested On: iPhone 6 Plus (iOS 11)
Simulator Tested On: N/A
Version of VS: 2017 (15.2)
Version of Xamarin: 4.5.0.486
Versions of other things you are using:

Steps to reproduce the Behavior

1. Create a OverlayViewProvider with image (using some graph paper highlights it well)
2. Setup in project
3. Build project and deploy to device
4. Open app and take photograph with outline in specific place, close up.

Expected Behavior

For the overlay to be in the same position it was shown on the camera preview

Actual Behavior

The overlay is shown in a higher position than it was in the camera preview stage

Code snippet

N/A

Screenshots

[prashantvc]

@Philyorkshire could you share a sample code demonstrating this issue? It will help us to troubleshoot the issue. (please delete the obj/bin/packages folder when you send the sample code)

[jamesmontemagno]

Probably need to implement: https://stackoverflow.com/questions/28373749/uiimagepickercontrollers-cameraoverlayview-is-offset-after-taking-photo

[jamesmontemagno]

Or probably better: https://stackoverflow.com/questions/20779628/how-to-get-the-custom-overlay-for-uiimagepicker-camera-to-be-full-screen-in-ios

I hate the overlay option though to be honest and wasn't implemented by me and only works on iOS

[Philyorkshire]

I see what you are saying, it isn't actually the overlay that is moving but the preview image that is scaled which makes it appear that the overlay has moved when it is shown over a smaller image preview to the one in the camera taking screen.

[pinchuque]

Hello, I am pretty new in developing with xamarin. I've noticed that your solution for overlay camera preview is available only for IOS. Are there any ways to implement similar functionality on android?
Much appreciate for the help

[vizuet]

@pinchuque do you find any option for android? thanks in advance.

[alexlobanov]

Will be great to see Overlay on Android as well - but I think this Issue for track Overlay position issue on iOS .

@Philyorkshire if you still need it - I found a some dirty workaround for overlay position issue (capture vs preview).
So we can listen for events like Show Preview, Show camera from NSNotificationCenter and then change position or/and hide/show Overlay Image on top of the screen.
Warning! It's private API - so be careful in applications that distributed via AppStore. But actually it should not cause any issues, as it just a string.
Those events not documented as I know, but you still can get it via NSNotificationCenter.DefaultCenter.AddObserver(null, HandleNotificationSettings); (notice nil/null event name)

I'm was ok with just hiding it, so implemented it using this way:
Create listener of events (IOverlayInterface implementation)

_observeEvent = NSNotificationCenter.DefaultCenter.AddObserver(null, HandleNotificationSettings); //listen for events.

Listen for Preview Show/Hide events and on Destroy event as well (to remove event listener):

private void HandleNotificationSettings(NSNotification obj) {
    switch (obj.Name) {
    case "_UIImagePickerControllerUserDidCaptureItem":
        //event when Photo Preview Show
        if (ImageView != null) ImageView.Hidden = true; // hide overlay image
        break;
    case "_UIImagePickerControllerUserDidRejectItem":
        //event when use click to "Retake"
        if (ImageView != null) ImageView.Hidden = false; //show overlay image
        break;
    case "AVCaptureSessionDidStopRunningNotification":
        //posted when a capture session stops.
        if (_observeEvent != null) NSNotificationCenter.DefaultCenter.RemoveObserver(_observeEvent); //remove handler
        break;

    }
}

Gist: OverlayInterface.cs

But you can add Positioning Changes via Frame change for Image. (+30 points for iphone 5, + 44 points for iphone 6 plus, etc) as @jamesmontemagno suggest.