Xamarin Android Camera Stream

Question

I am working on a project and I need to create an app similar to SnapChat, I am working with Xamarin on Visual Studio, I want to create a Camera Stream with a button on the bottom of the screen. Once a user touches that circle The App will take a picture!.

I am new on xamarin so I have lots of questions.

1.) I was following the example on the xamarin page: https://developer.xamarin.com/recipes/android/other_ux/textureview/display_a_stream_from_the_camera/

but I dont understand why the camera stream looks so weird, if the phone is in vertical position the image shown is horizontal and vice versa, also when I move the phone the image shown moves super slow and like if it would be doing any kind of resizing or something.

How can I fix this ?

2.) I need to add buttons to the app, but the code has the line:

SetContentView (_textureView);  

So I found this code:

public class Activity1 : Activity 
{
    bool _previewing;
    Camera _camera;
    TextureView _textureView;
    protected override void OnCreate (Bundle bundle)
    {
        base.OnCreate (bundle);

        SetContentView(Resource.Layout.CameraLayout);
        Button button = FindViewById<Button>(Resource.Id.button1);
        _textureView = FindViewById<TextureView>(Resource.Id.textureView1);
        button.Click += delegate {
            try
            {
                if (!_previewing)
                {
                    _camera = Camera.Open();
                    _camera.SetPreviewTexture(_textureView.SurfaceTexture);
                    _camera.StartPreview();
                }
                else
                {
                    _camera.StopPreview();
                    _camera.Release();
                }
            }
            catch (Java.IO.IOException ex)
            {
                Console.WriteLine(ex.Message);
            }
            finally
            {
                _previewing = !_previewing;
            }
        };
    }

on this question: Xamarin Android Display a stream from the camera

But in that code they use the button to enable and disable the Stream, how can I use the buttom to save the current Image as a Bitmap? and how can I keep the stream running always? (Exept when the user takes the picture ofcourse)

3.) Finally How can I put the button OVER the textureView? as you can see on my snap chat image. it is possible to achieve ? it is possible to do in xamarin ?

Thanks for your time.

Answer 1

but I dont understand why the camera stream looks so weird, if the phone is in vertical position the image shown is horizontal and vice versa.

To solve this issue, you can set the display orientation of camera, for example:

_camera = Android.Hardware.Camera.Open();

try
{
    _camera.SetPreviewTexture(surface);
    _camera.SetDisplayOrientation(90);
    _camera.StartPreview();
}
catch (Java.IO.IOException ex)
{
    Console.WriteLine(ex.Message);
}

But in that code they use the button to enable and disable the Stream, how can I use the buttom to save the current Image as a Bitmap?

You can set a PreviewCallback to your camera, and then in the OnPreviewFrame you can get a YuvImage of the current preview. Usually a Bitmap here is not necessary, but if you want to convert it to Bitmap, you may refer to the answer in this case: Converting preview frame to bitmap.

For example:

public class mPreviewCallback : Java.Lang.Object, IPreviewCallback
{
    public void OnPreviewFrame(byte[] data, Camera camera)
    {
        var paras = camera.GetParameters();
        var imageformat = paras.PreviewFormat;
        if (imageformat == Android.Graphics.ImageFormatType.Nv21)
        {
            Android.Graphics.YuvImage img = new Android.Graphics.YuvImage(data,
                imageformat, paras.PreviewSize.Width, paras.PreviewSize.Height, null);
        }
    }
}

and set this callback to your camera like this:

_camera.SetPreviewCallback(new mPreviewCallback());

Finally How can I put the button OVER the textureView?

It is simple that you can create your view for example like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextureView
        android:id="@+id/textureView"
        android:layout_height="match_parent"
        android:layout_width="match_parent" />

    <Button
        android:id="@+id/saveimg"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="img" />
</RelativeLayout>