Xamarin Forms Cross and Camera control

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?

Posts

  • HunumanHunuman GBMember ✭✭✭✭

    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

  • Emixam23Emixam23 USMember ✭✭✭

    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:

    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!

  • QuakeulfQuakeulf NOMember ✭✭✭

    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.

  • Emixam23Emixam23 USMember ✭✭✭

    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

  • QuakeulfQuakeulf NOMember ✭✭✭

    @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.

  • QuakeulfQuakeulf NOMember ✭✭✭

    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.

  • Emixam23Emixam23 USMember ✭✭✭

    Hi !

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

  • Emixam23Emixam23 USMember ✭✭✭

    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 !

  • Emixam23Emixam23 USMember ✭✭✭

    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

  • Emixam23Emixam23 USMember ✭✭✭

    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_ppgsonny_ppg USMember ✭✭

    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.

Sign In or Register to comment.