Xamarin Forms Cross and Camera control

Emixam23 · July 2017

Hi,

I've been searching and trying a lot of solution and today, in 2017, I feel like no one could create a Camera Control that can be used as a simple button?

In the many solutions I tried, either the camera doesn't show up or doesn't fully fit the screen, why?

I'm just trying to create a CameraView or CameraControl that show a preview and has method option as TakePicture, TakeVideo.

Because, the problem with most of the solution, it's that you can't design around, like put some text or some design...

Does anyone have an explanation or some tips/idea? Or just maybe a solution? Because, to me, it's impossible that today, no one is able to make a cross platform solution of that.. doesn't it?

Hunuman · July 2017

Hi @Emixam23

I do sympathise, it can get frustrating at times.

With all the hard work you have already put in searching and trying out different solutions, you probably know more about it than most other people here.

So I look forward to you sharing your solution, when you get it figured out.

Thanks in advance,

Tim

Emixam23 · July 2017

A little update for you @Hunuman and any other dev

Hey Xam Developers !

My name is Max and today, for my studying project, I need to realize an application that has a CameraView or a CameraPage, call it as you want, with a special design. However, I’m not able to figure out how to realize it.

I spent more than 2 days on that and I found a lot of information, to be honest, but they are either obsolete or incomplete, so, I would like to make a point about it, through this thread!

How to implement a Camera?

Well, two solutions can be considered based on what I read.

Camera Page

Let’s say that it’s the first “official” solution. It’s proposed by Xamarin itself, with the Customizing a ContentPage tutorial/documentation. It explains you, through a web page how to implement the camera service with a cross-platform solution.

I then tried the UWP solution:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="CameraPreviewProject.Sources.Pages.CameraPage">
    <ContentPage.Content>
        <AbsoluteLayout>
            <Button Text="Click me !" AbsoluteLayout.LayoutBounds="0.5, 0.5, 0.1, 0.1" AbsoluteLayout.LayoutFlags="All" />
        </AbsoluteLayout>
    </ContentPage.Content>
</ContentPage>

Finally, the C# side gives us this:

public partial class CameraPage : ContentPage
{
    public CameraPage()
    {
        InitializeComponent();
    }
}

Then, we create a renderer in the UWP side :

[assembly: ExportRenderer(typeof(CameraPage), typeof(CameraPageRenderer))]
namespace CameraPreviewProject.UWP.Sources.PageRenderers
{
    public class CameraPageRenderer : PageRenderer
    { ... }
}

PS: The full page code is available here

This idea is pretty logic, you have a basic page, but which have renderer that preview the camera in the background, I mean, this is the idea I understood, however, it only gives you a white screen that throws an exception… (x86)

Exception initializing MediaCapture - \\?\USB#VID_045E&PID_0779&MI_00#6&2E9BBB25&0&0000#{e5323777-f976-4f5b-9b55-b94699c46e44}\GLOBAL: System.Runtime.InteropServices.COMException (0xC00DABE6): The current capture source does not have an independent photo stream.
The current capture source does not have an independent photo stream.
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.GetResult()
at CameraPreviewProject.UWP.Sources.PageRenderers.CameraPageRenderer.<InitializeCameraAsync>d__25.MoveNext()

Then I click the button of the downside woft menu and get:

Exception thrown: 'System.Runtime.InteropServices.COMException' in System.Private.CoreLib.ni.dll
WinRT information: This object needs to be initialized before the requested operation can be carried out.

I’m a Xamarin Fan, but on that part.. I’m not… This link about MediaCapture can be interesting though !

CameraView

To be honest, it’s so way easier to have a control as a button !

<Camera/>

Well, let’s have a look at it! I found a couple of solutions:

Moment MVVM logic - It seems to work only with Android & iOS
Xlabs Camera Unable to try since I can’t start VS2017 from the .sln. Also, I couldn't test the UWP side because it's an MVVM logic..
Xam.Plugin.Media This solution works on UWP !! But run a new activity/instance/page with a native design, so this isn't the solution searched

So, my question is “Does someone could create an element public class Camera() that can be used and declared as a simple xamarin forms button?”

Because, I saw as well 2 others projects about it, one I can’t remember, but the second one is Barcode Scanning but I’m not able to understand or take back the code to implement it as I would like…

It seems so easy and it’s so hard to get, why? Because finally, we’re talking about a view/image that displays a stream from a camera? A camera is just a service where you have methods such as TakePictureAsync() or anything like that? Rotate(), Switch(ViewSide vs), etc etc?

So, I searched about getting a frame view or display the stream of the camera into an image or a view.. I began from those links:

UWP get live webcam video stream by David Pine
UWP stream Webcam over socket to mediaElement I just made some changes
because the subject is a bit different, but.. I couldn't make it work

To be honest, I don’t know what to try now… I’m lost because, at the same time, I tried some Xamarin Forms solution, but also some proper UWP solutions and … nothing…. Maybe my point of view is not good, maybe my idea and just on the side, maybe I should try another approach, I don’t know at all..

I was also thinking about creating a class with some interface that I redefine in each platform renderer, but, still nothing…

Do you have please, any idea or any approach?

Thank in advance!

Quakeulf · July 2017

I am also looking into this but so far only your posts show up. I am looking at the ones you mentioned including the ZXing, and so far only ZXing does what I want the camera integration to do: Work in-app using the app's styling without having to go to the native camera app central to take a picture.

Hopefully I can make sense out of ZXing but so far it's not looking that well. I'm also trying a few other plugins like the ones you mentioned. This will be for iOS and 'Roid btw.

Emixam23 · July 2017

Hi @Quakeulf !

Don't hesitate to create a public git repo and maybe we can look at it together if you're interesting.
However, I never did code with a MVVM logic..

Best !

Max

Quakeulf · July 2017

@Emixam23 said:
Hi @Quakeulf !

Don't hesitate to create a public git repo and maybe we can look at it together if you're interesting.
However, I never did code with a MVVM logic..

Best !

Max

We're doing MVVM for this project btw, and some of the code won't be publically released until approved by our employer. However, I will let you know if I find something. I guess there are many looking into this but few who can get it working.

Quakeulf · July 2017

Did you look into vector drawables? It seems to be working:

https://blog.xamarin.com/a-scalable-introduction-to-vector-drawables/

I am looking into it myself as we type.

Emixam23 · July 2017

Hi !

I checked your link but.. What's the link with the camera preview?

Emixam23 · July 2017

Hey guys,

Did you moved forward on your researshes?

@DavidBritch I saw that you are the author of the XamarinSample - Customize a ContentPage, can you give an idea or some help?

Thank !

Emixam23 · August 2017

Hey,

I just found https://nocture.dk/2015/06/18/async-camera-pictures-with-xamarin-forms/ which seems to be intersting ! I'll let you know what could I do with it

Emixam23 · September 2017

Hi guys,

I saw many post on internet but nothing that really works...

No one could find something about how to get the stream of the camera and make it work from with dependency services?

Best !

sonny_ppg · October 2017

The xamarin samples have code that render the camera stream onto a view.

https://github.com/xamarin/xamarin-forms-samples/tree/master/CustomRenderers/View.

Open the iOS/Android/UWP folders to see how the dependency service is utilized to get the camera stream. If you're looking to draw on top of the stream you can add an overlay view on top. Using skiasharp you can set the overlay view as a skcanvas and draw in the canvas, this will appear on top of the camera preview.

I can elaborate if this helps.

DonaldJoyce · February 2018

Been beating my head for the last couple of weeks on this as well. Narrowed down to having problems initializing the camera on UWP. But I got it working today.

I can't post links yet:
Search for InitializeAsync() failes on Xamarin Forms in UWP in the xamarin forums.

Emixam23 · March 2018

Hey guys,

I have been pretty busy for 2 months, I just came back on this dev today.

@sonny_ppg I tried the solution, however it doesn't seems to work, the screen stays white for me

Android 8.0 #OnePlus3 - SDK 8.1 used [Screen stays white]
UWP tested trough Parallels VM (So it might be why it didn't worked) [Screen stays white]
iOS (Emulator iPhone X iOS 11.3) [Screen stays black]

The thing is, I don't just wanna preview, I want to be able either to preview it, but also to send the stream to my server, so others client can access it and watch trough their own phone.

Best,

Max

Monika_Mali · May 2018

@Emixam23 I am also looking for same in xamarin.forms. Did you find any solution?

Emixam23 · May 2018

Hey

Not yet but... I am working with a Microftsoft MVP that might have found a solution Otherwise, what I do propose to you is to create a github and contribute to it together?

Best,

Max

hkidd · July 2018

@sonny_ppg @Emixam23 I am currently working on an app implementing camera capabilities as well. I have it working well as far as taking the photo goes (using Media.Plugin in conjunction with the Permissions Plugin - both by @JamesMontemagno ). I am now looking to implement photo annotation capabilities. Have either of you have success implementing photo annotation with skiasharp? If so, do you have any pointers?

Xamarin

Quick Links

Xamarin Forms Cross and Camera control

Posts

How to implement a Camera?