Xamarin.forms: [F100] Camera View

Created on 29 Jan 2018 · 22Comments · Source: xamarin/Xamarin.Forms

Rationale

Forms does not currently contain a cross platform view which allows to use and preview the camera of the device it's running on. There are some issues to be answer still, should we support control or just a preview of the image.

Implementation.

Users should be able to choose front or rear camera and visualize the image.
Users should be able to show default controls or not.
User should be able to capture a image and use it on Xamarin.Forms
This will probably require a VideoSource class similar to the ImageSource class, with the appropriate subclasses (FileVideoSource, StreamVideoSource, UriVideoSource and their respective type converters), as talked on #1692 to Support video.

public class CameraView : View
{
    public event EventHandler<MediaCapturedEventArgs> MediaCaptured;
    public event EventHandler<EventArgs> MediaCaptureFailed;

    public static readonly BindableProperty ShutterButtonCommandProperty = BindableProperty.Create(nameof(ShutterButtonCommand), typeof(ICommand), typeof(CameraView), null);
    public ICommand ShutterButtonCommand
    {
        get { return (ICommand)GetValue(ShutterButtonCommandProperty); }
        set { SetValue(ShutterButtonCommandProperty, value); }
    }

    public static readonly BindableProperty CameraOptionsProperty = BindableProperty.Create(nameof(CameraOptions), typeof(CameraOptions), typeof(CameraView), CameraOptions.Default);

    public CameraOptions CameraOptions
    {
        get { return (CameraOptions)GetValue(CameraOptionsProperty); }
        set { SetValue(CameraOptionsProperty, value); }
    }

    public static readonly BindableProperty ControlsOptionsProperty = BindableProperty.Create(nameof(ControlsOptions), typeof(CameraControlsOptions), typeof(CameraView), CameraControlsOptions.Default);

    public CameraControlsOptions ControlsOptions
    {
        get { return (CameraControlsOptions)GetValue(ControlsOptionsProperty); }
        set { SetValue(ControlsOptionsProperty, value); }
    }

    public static readonly BindableProperty CaptureOptionsProperty = BindableProperty.Create(nameof(CaptureOptions), typeof(CameraCaptureOptions), typeof(CameraView), CameraCaptureOptions.Default);

    public CameraCaptureOptions CaptureOptions
    {
        get { return (CameraCaptureOptions)GetValue(CaptureOptionsProperty); }
        set { SetValue(CaptureOptionsProperty, value); }
    }

}

public class MediaCapturedEventArgs : EventArgs
{
    public object Data { get; set; }
    public ImageSource Image { get; set; }
        public VideoSource Image { get; set; }
}

public enum CameraOptions
{
    Default,
    Rear,
    Front
}

public enum CameraControlsOptions
{
    Default,
    Visible,
    Hidden
}

public enum CameraCaptureOptions
{
    Default,
    Photo,
    Video,
    PhotoAndVideo
}

Expected Result

Android

iOS

UWP

Implications for CSS

None

Backward Compatibility

None

Difficulty: Hard

F100 community-sprint help wanted in-progress high impact proposal-accepted roadmap enhancement ➕ up-for-grabs

Source

rmarinho

👍20 🎉2 👎2

Most helpful comment

In my opinion, this control should not have any UI, but have just methods/events/properties for functionality. It should be similar to the idea of MediaElement (another ticket)

andreinitescu on 6 Feb 2018

👍5

All 22 comments

that's a control you're trying to create. XF shouldn't do that. the reason is that we can not change its appearance once it's released, and it'll feel awkward in a version or 2 of iOS or Android.

StephaneDelcroix on 31 Jan 2018

In my opinion, this control should not have any UI, but have just methods/events/properties for functionality. It should be similar to the idea of MediaElement (another ticket)

andreinitescu on 6 Feb 2018

👍5

I have talked with @paymicro and he wanted to have a go at this, so its working on a branch for this feature.

https://github.com/paymicro/Xamarin.Forms/tree/fix-gh1730-camera

rmarinho on 26 Sep 2018

Yeah let's make sure no UI for now; we just have methods and events to play the video and a View to renderer it

rmarinho on 26 Sep 2018

Hi is CameraView for now is stable enough to implement I wanted it to record video

dineshmahajan on 29 May 2019

User should be able to customize the buttons, show and hide specific button for example if we don't want to allow front or back camera (switch camera button) or if the user wants to have his own buttons or position the button at top, bottom, vertically right or left, etc..

jrahma on 4 Jun 2019

User should have an option to define how to record video

Just click record video button

Hold to record video (the whatsapp way)

jrahma on 4 Jun 2019

Hey did'nt see that coming!

I tried something like this on my repo.
I put that here maybe it will help someone for iOS part,
The Android have to be reviewed for sure.
Global.CameraView

Regards,

Phenek on 4 Jul 2019

It will be great if it has custom layout or custom view so it can be embed in any ContentPage or ContentView with opional buttons, e.g. Focus, Zoom, Flash On, etc..

jrahma on 4 Jul 2019

User should be able to take a photo or record a video and we should have options if we want just Photo or Just Video, and here is the complication... when we set it to both then we should have an option to make both in same view and user swipe to choose photo or video just like the regular camera app which comes with the phone or one Tap to take a photo and HolidngTap to take a video just like the Whatsapp way

jrahma on 4 Jul 2019

It would be cool if there was a way we could add customised buttons to the camera view in similar style to snap chat and other apps.

davidbuckleyni on 17 Sep 2019

When you call it CameraView I assume that we can define the aspect ratio for the video as well as image

So if I want to take a photo sized 100x100 then I can restrict the area to 100x100

jrahma on 19 Oct 2019

Will it be possible to access the live preview stream data with this control?
This would enable us to stream the data to barcode detectors, face recognizers, etc.

akuehntopf on 22 Oct 2019

👍2

Will it be possible to access the live preview stream data with this control?
This would enable us to stream the data to barcode detectors, face recognizers, etc.

@akuehntopf I second the above.

Xamrin Forms Team, please don't ignore this. Without the possibility to hook into the live preview stream and consume the frames in our code, the Camera View would be of limited use.

ghost on 25 Oct 2019

👍2 ❤1

Relative #7934

Phenek on 23 Apr 2020

Relative #7934

This is not relative this is merely a camera view with nothing to do with scanning two totally diff things

davidbuckleyni on 5 May 2020

Hello @davidbuckleyni,

Has you can see CameraView is already in progress.
When it will be done, we will be able to consume the live preview stream a in our code.
This would enable us to stream the data to barcode detectors, face recognizers, etc.
That why I put this relative here to highlight the fact that we need the live stream.

Did you get it? It will be this first pillar of your Barcode recognition!

Even more you should be able at first to use native bar code scanning with a custom renderer.
And return your result to Xamarin.Forms!

Regards,

Phenek on 5 May 2020

@samhouts does this mean the bar code stuff will be worked on since it got an approval flag.

davidbuckleyni on 8 May 2020

@davidbuckleyni There is high interest in it, but we haven't yet committed to it. In the meantime, https://github.com/Redth/ZXing.Net.Mobile/ has a new prerelease with a lot of issues resolved!