How to use phones camera as a background?

Question

I am trying to create the camera as my background in xamarin forms where I plan to add things on top of the cameraview in my shared code.

Right now I am doing it for iOS-devices. I get a crash on this line of code right now: Frame = liveCameraStream.Bounds with the error: Object reference not set to an instance of an object.

So my question is how can I adjust my current code to get a camera as a background in xamarin forms?

This is my renderer in iOS:

[assembly: ExportRenderer(typeof(ICameraBackground), typeof(CameraBackground_iOS))]
namespace project.iOS
{
public class CameraBackground_iOS : ViewRenderer
{
    AVCaptureSession captureSession;
    AVCaptureDeviceInput captureDeviceInput;
    AVCaptureStillImageOutput stillImageOutput;
    UIView liveCameraStream;

    protected override void OnElementChanged(ElementChangedEventArgs<View> e)
    {
        base.OnElementChanged(e);
        SetupLiveCameraStream();
    }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        SetupLiveCameraStream();
    }


    public async void SetupLiveCameraStream()
    {
        await AuthorizeCameraUse();
        captureSession = new AVCaptureSession();

        var videoPreviewLayer = new AVCaptureVideoPreviewLayer(captureSession)
        {
            Frame = liveCameraStream.Bounds
        };
        liveCameraStream.Layer.AddSublayer(videoPreviewLayer);

        var captureDevice = AVCaptureDevice.DefaultDeviceWithMediaType(AVMediaType.Video);
        ConfigureCameraForDevice(captureDevice);
        captureDeviceInput = AVCaptureDeviceInput.FromDevice(captureDevice);

        var dictionary = new NSMutableDictionary();
        dictionary[AVVideo.CodecKey] = new NSNumber((int)AVVideoCodec.JPEG);
        stillImageOutput = new AVCaptureStillImageOutput()
        {
            OutputSettings = new NSDictionary()
        };

        captureSession.AddOutput(stillImageOutput);
        captureSession.AddInput(captureDeviceInput);
        captureSession.StartRunning();
    }


    public void ConfigureCameraForDevice(AVCaptureDevice device)
    {
        var error = new NSError();
        if (device.IsFocusModeSupported(AVCaptureFocusMode.ContinuousAutoFocus))
        {
            device.LockForConfiguration(out error);
            device.FocusMode = AVCaptureFocusMode.ContinuousAutoFocus;
            device.UnlockForConfiguration();
        }
        else if (device.IsExposureModeSupported(AVCaptureExposureMode.ContinuousAutoExposure))
        {
            device.LockForConfiguration(out error);
            device.ExposureMode = AVCaptureExposureMode.ContinuousAutoExposure;
            device.UnlockForConfiguration();
        }
        else if (device.IsWhiteBalanceModeSupported(AVCaptureWhiteBalanceMode.ContinuousAutoWhiteBalance))
        {
            device.LockForConfiguration(out error);
            device.WhiteBalanceMode = AVCaptureWhiteBalanceMode.ContinuousAutoWhiteBalance;
            device.UnlockForConfiguration();
        }
    }

    public async Task AuthorizeCameraUse()
    {
        var authorizationStatus = AVCaptureDevice.GetAuthorizationStatus(AVMediaType.Video);
        if (authorizationStatus != AVAuthorizationStatus.Authorized)
        {
            await AVCaptureDevice.RequestAccessForMediaTypeAsync(AVMediaType.Video);
        }
    }

Answer 1

Xamarin.Forms.Labs, a MVVM framework for Xamarin.Forms, has a CameraView that you can use. It has been implemented for both platforms as well. If you don't want to install the entire package, you can simply grab the source. But don't forget to add the appropriate license to your project if you decide to do so.

The CameraView can be consumed quite easily in a Xamarin.Forms project like so:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage x:Class="XLabs.Samples.Pages.Controls.CameraViewPage"
         xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:controls="clr-namespace:XLabs.Forms.Controls;assembly=XLabs.Forms">
<StackLayout>
    <controls:CameraView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
</StackLayout>