[Proposal] CameraView minimal port

[pictos]

[CameraView minimal port]

• [x] Proposed
• [ ] Prototype: Not Started
• [ ] Implementation: Not Started
  • [ ] iOS Support
  • [ ] Android Support
  • [ ] macOS Support
  • [ ] Windows Support
• [ ] Unit Tests: Not Started
• [ ] Sample: Not Started
• [ ] Documentation: Not Started

Link to Discussion

• #106
• #206

Summary

Today on XCT we have a very complete CameraView implementation but with a lot of bugs and a complex codebase to maintain. In the table below you can see all features implemented by each platform.

	Android	iOS	Windows
Preview	✅	✅	✅
Preview Aspect	✅	🚫	🚫
Mirror preview	✅	🚫	🚫
Zoom	✅	✅	✅
Take photo	✅	✅	✅
Flash	✅	✅	✅
Take video	✅	✅	✅
Record audio	✅	✅	✅
Video stabilization	✅	✅	✅

My plan, described in discussion #206, is to drop some features for the v1.0 of this lib. and use CameraX implementation for Android. You can see in the table below what features we will have for v1.0.

	Android	iOS	Windows
Preview	✅	✅	✅
Take photo	✅	✅	✅
Flash	✅	✅	✅

After this first implementation, we can add the missing features to all platforms.

Motivation

The motivation for this plan was the fact that CameraView lacks in quality right now and this's our chance to fix it and provide a more reliable Camera control for our community.

Detailed Design

CameraView.shared.cs

public class CameraView : View
{
  public static readonly BindableProperty IsCameraViewBusyProperty;
  public static readonly BindableProperty IsAvailableProperty;
  public static readonly BindableProperty FlashModeProperty;
  
  // Use WeakEventManager 
  public event EventHandler<bool>? OnAvailable;
  public event EventHandler<MediaCapturedEventArgs>? MediaCaptured; 
  public event EventHandler<string>? MediaCaptureFailed;
  
  public bool IsCameraViewBusy { get; }
  public bool IsAvailable { get; }
  public CameraOptions CameraOptions { get; set; } 
  public void Shutter();
}

Usage Syntax

XAML Usage

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:xct="http://xamarin.com/schemas/2020/toolkit"
             x:Class="MyLittleApp.MainPage">

     <StackLayout>
        <xct:CameraView
                x:Name="cameraView"
                FlashMode="On"
                MediaCaptured="CameraView_MediaCaptured"
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand" />
    </StackLayout>
</ContentPage>

C# Usage

class MyPage : ContentPage
{
  public MyPage()
  {
    Content = new CameraView
    {
      FlashMode = CameraFlashMode.Off,
    }.FillAndExpand()
     .Invoke(cameraView => cameraView.MediaCaptured += HandleMediaCaptured);
  }

  void HandleMediaCaptured(object? sender, MediaCapturedEventArgs e)
  {
    //...
  }
}

Drawbacks

We will (probably*) break our users on v1.0 since the API will be missing a lot of features.

• there's a chance that we can implement all features for v1.0 if we have a lot of community help.

Alternatives

• Follow the #106 proposal and just port the XCT code to here, but with that, we will bring all issues (if we don't solve them during the port, what I believe it's very hard to do)

Unresolved Questions

[VladislavAntonyuk]

I suggest to add TakeVideo. In that case we cover major Camera features.

[pictos]

@VladislavAntonyuk I would say to let that for the next release, for now. If things move faster, we can bring this feature. Remembering that TakeVideo implies audio record as well, so is one more item to check and test

[brminnick]

Thanks Pedro! This is a great start! Here's a couple recommendations I have for the API design:

public bool IsBusy { get; set; }

• Can we rename this to something more descriptive?
  • I.e. What does IsBusy mean? Does it mean the CameraView is in use? Or does it mean the the camera shutter is in use? etc
• Should this be { get; private set; }? I doubt we'd want the user to toggle IsBusy.

public bool IsAvailable {get; set; }

• I recommend removing this property, and following the Maui.Essentials example of throwing a FeatureNotSupportedException if a user attempts to use the CameraView on a device where it is not supported
  • If we decide instead to keep this property, I recommend making it's setter private, e.g. { get; private set; }

public void Shutter()

• Let's change this name to be a verb (an action word), and be more descriptive, e.g. CloseShutter, OpenShutter, etc

CameraOptions

• Could you include the API Surface for CameraOptions in the Detailed Design?

public event EventHandler<bool>? OnAvailable

• Could this be changed to public event EventHandler<CameraAvailabilityStatus> CameraAvailablityChanged;?
  • CameraAvailabilityStatus would be an enum

   public enum CameraAvailabilityStatus { Unknown, Available, NotAvailable }
  

• Let's use WeakEventManager to ensure we don't induce memory leaks and that the event doesn't need to be nullable

  readonly WeakEventManager eventManager = new();
  
  public event EventHandler<CameraAvailabilityStatus> CameraAvailablityChanged
  {
    add => eventManager.AddEventHandler(value);
    remove => eventManager.RemoveEventHandler(value);
  }
  

public event EventHandler<MediaCapturedEventArgs>? MediaCaptured

• Let's use WeakEventManager to ensure we don't induce memory leaks and that the event doesn't need to be nullable

  readonly WeakEventManager eventManager = new();
  
  public event EventHandler<MediaCapturedEventArgs> MediaCaptured
  {
    add => eventManager.AddEventHandler(value);
    remove => eventManager.RemoveEventHandler(value);
  }
  

public event EventHandler<string>? MediaCaptureFailed

• Let's use WeakEventManager to ensure we don't induce memory leaks and that the event doesn't need to be nullable

  readonly WeakEventManager eventManager = new();
  
  public event EventHandler<string> MediaCaptureFailed
  {
    add => eventManager.AddEventHandler(value);
    remove => eventManager.RemoveEventHandler(value);
  }
  

[Mzazvor]

Hi, Is this camera view also the solution to barcode scanning in MAUI? It seems that way from some Zxing repos comments. Is there any estimate of when this could be avaliable ?

Thanx.

PS: If this question does not belong here im sorry and feel free to delete it.

[pictos]

@Mzazvor, So this cameraView will not be the solution for barcode scanning, the ZXing is another project that you can see here. But there are plans to use the CameraView from this package on the ZXing project.

I can't tell you right now when we will release this feature. It's in progress the Android implementation is almost done

[thra02ad]

Hi all - wanted to ask what’s the status on this? I am not a developer myself but I am building an app where I need a customized camera as part of it. Thanks in advance! :-)

[pictos]

Hey, @thra02ad the implementation for Android is pretty much done... I'm learning about the camera on iOS. I'm building some CameraViews apps in swift to see how that goes and then I'll move to C# and start an implementation for this lib. Right now I don't have any deadline to share with you

[thra02ad]

Hey, @thra02ad the implementation for Android is pretty much done... I'm learning about the camera on iOS. I'm building some CameraViews apps in swift to see how that goes and then I'll move to C# and start an implementation for this lib. Right now I don't have any deadline to share with you

Thank you so much @pictos for swift reply. Apologies for multiple questions, and fully understand that deadline is unknown at the moment. But would you say realistically there is a chance that it will come for iOS this year? Just trying to figure out contingency plans for my app (wait for it vs change back to Xamarin). :-)

[pictos]

@thra02ad my intention is to have this ticket closed before December kkkkk

[thra02ad]

@thra02ad my intention is to have this ticket closed before December kkkkk

Thank you very much for coming back to me! Highly appreciated

[mapo80]

Hi @pictos, can you share github branch where Is your implementation so we can help you to complete this task?

Thanks

[pictos]

@mapo80, here is the branch. Right now I'm blocked by the tooling... I couldn't deploy/debug using a physical device... So I'll wait until the next release and see if that fixes my issue and move forward.

[andreasbrostencab]

Great news there is a maui version on the way! :)

When using the cameraview from XCT, the flash causes over (or sometimes under) exponation of the image. Often making it way to white, if taking a photo in a dark room. Will photos with flash work better with this MAUI-version?

[pictos]

@andreasbrostencab, the short answer is "I hope so". The long answer is, that we use the default and simple APIs from the Cameras APIs, because we want to be more general and simple... So we will expose APIs to control the flash intensity or something like, but the new implementation will be easier to expand.

[andreasbrostencab]

Hope work is going well with this new Cameraview. I have another question around it. In the Xamarin version, you can't zoom to a lower value then 1.0. Now a days meny phones have "wide angel" letting the user "zoom out" to e.g. 0.5. Will this be supported in this new cameraview?

[pictos]

Hey @andreasbrostencab, so for the first release the zoom feature will not be supported. But the architecture that I'm thinking of will make easier for you, as a developer, to override or add new features to the CameraView.

[E75]

@pictos when will a first version be released?

[MGohil]

@pictos : Is there any date we can know when the very first version is available at-least with very minimal basic feature would be great? Eagerly waiting for this to get released soon.

Thanks.

[pictos]

Hey @MGohil, I don't have an ETA to share right now. I'm blocked on apple, I'll see if I can move with the Windows implementation

[lpappas28]

Hello, I am looking to work with a camera in Maui for a windows implementation and am wondering if this will be the best solution for .NET 7? Is the windows implementation currently working?

[pictos]

@lpappas28, last that I checked winUI doesn't have a cameraView control. Not sure if they provided one so far

[vanyok1991]

Hi, any updates when Camera View will be released?

[kfrancis]

Where is this proposal? Can this get moving?

[kfrancis]

Where is this proposal? Can this get moving?

Alternatively, how can we help get this moving?

[quanzhenying]

很久没更新了，还在继续编码吗?我很需要CameraView It hasn't been updated for a long time. Are you still coding? I really need CameraView

[frarcedev]

Hello guys, any news about using CameraView in .NET MAUI?

[CliffAgius]

Hey all,

I see this issue raised on the recent community stand-up and as I am working on a personal app that needs the camera thought I would take a look. I am a little confused however as it looks like this will be adding Camera function like Take Photo or Shoot Video, however there is already MediaPicker that will do this within MAUI the docs are here

So is the MCT team adding to this or re-inventing? or is it that the MCT team and the MAUI team are both doing the same work in the same area?

The V1.0 above shows that you want to Take a Photo, preview and use the flash but the Media Picker already does this I've been using it, in fact it does nearly everything in the main list you can zoom you can rotate the camera to be front/rear etc it's all there unless I am missing what this Proposal is all about.

[kfrancis]

We need access to the camera fundamentals so we can do things like real-time processing of the image for OCR/scanning, like we used to have in Xamarin. That's the problem. That doesn't exist, AFAIK, and none of the existing solutions from Xamarin can be ported to work in this environment because of it.

[thra02ad]

For my purpose, I am looking to customize the camera screen to fit my app design.

[CliffAgius]

Ahhh I understand and yes that would be helpful, so if the MAUI team have it working for calling the Native camera app as it looks like we have a starting point that we need to build on.

I guess also we would want to match the API so that if/when this is added to MAUI it merges in a nice way with the same naming and the way it works. This means we should maybe take the API currently in use and overload the methods with what we want.