Introduction

This article demonstrates how to create your own camera application to capture pictures and videos.It's showing imageview or videoview in the last capture.
Step 1

You can get started with a new Xamarin.Forms app by going to File ->New -> Visual C# -> Cross Platform -> select Crossplatform app(Xamarin.Forms or Native) and give the application suitable name, such as Camera App and solution name. Choose your project location,then click ok.

Step 2

After the project creation, add the following Nuget Packages for your projects
  • Xam.Plugin.Media

For that, open Solution Explorer ->right click to solution explorer and select "Manage NugetPacages for the solution".

Now,select the following nuget packages and followedby select your project then click to Install it.
  • Xam.Plugin.Media


Step 3

Now, we need to add camera controls to your projects.For that go to Solution Explorer -> Camera App(PCL) >> click open MainPage.xaml and you can add XAML code to your project.here the code is given.

Toolbar Items
  • Button - Take a photo with clicked event
  • Button - Pick a photo already taken with clicked event
  • Button - Take a video with clicked event
  • Button - Pick a video already taken with clicked event
  • Image - To display a image last taken
  1. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  2. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  3. xmlns:local="clr-namespace:SEC"
  4. x:Class="SEC.MainPage"
  5. Title="Camera Access"
  6. BackgroundColor="Gray">
  7. <ScrollView>
  8. <StackLayout>
  9. <Label Text="Welcome to Camera Access In Xamarin forms"/>
  10. <Button Text="Take a Photo"
  11. x:Name="takePhoto"
  12. BackgroundColor="Fuchsia"
  13. Clicked="TakeAPhotoButton_OnClicked"/>
  14. <Button Text="Pick a Photo"
  15. x:Name="pickPhoto"
  16. BackgroundColor="Blue"
  17. Clicked="PickAPhotoButton_OnClicked"/>
  18. <Button Text="Take A Video"
  19. x:Name="takeVideo"
  20. BackgroundColor="Gray"
  21. Clicked="TakeAVideoButton_OnClicked"/>
  22. <Button Text="Pick A Video"
  23. x:Name="pickVideo"
  24. BackgroundColor="Green"
  25. Clicked="PickAVideoButton_OnClicked"/>
  26. <Image x:Name="image"/>
  27. </StackLayout>
  28. </ScrollView>
  30. </ContentPage>


Step 4

In this step, open Solution Explorer >> CameraApp(PCL)>> double click to open Mainpage.xaml.cs.Here the code for this page
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Threading.Tasks;
  6. using Plugin.Media;
  7. using Xamarin.Forms;
  9. namespace SEC
  10. {
  11. public partial class MainPage : ContentPage
  12. {
  13. public MainPage()
  14. {
  15. InitializeComponent();
  16. takePhoto.Clicked += async (sender, args) =>
  17. {
  19. if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakePhotoSupported)
  20. {
  21. await DisplayAlert("No Camera", ":( No camera avaialble.", "OK");
  22. return;
  23. }
  25. var file = await CrossMedia.Current.TakePhotoAsync(new Plugin.Media.Abstractions.StoreCameraMediaOptions
  26. {
  27. PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium,
  28. Directory = "Sample",
  29. Name = "test.jpg"
  30. });
  32. if (file == null)
  33. return;
  35. await DisplayAlert("File Location", file.Path, "OK");
  37. image.Source = ImageSource.FromStream(() =>
  38. {
  39. var stream = file.GetStream();
  40. file.Dispose();
  41. return stream;
  42. });
  43. };
  45. pickPhoto.Clicked += async (sender, args) =>
  46. {
  47. if (!CrossMedia.Current.IsPickPhotoSupported)
  48. {
  49. await DisplayAlert("Photos Not Supported", ":( Permission not granted to photos.", "OK");
  50. return;
  51. }
  52. var file = await Plugin.Media.CrossMedia.Current.PickPhotoAsync(new Plugin.Media.Abstractions.PickMediaOptions
  53. {
  54. PhotoSize = Plugin.Media.Abstractions.PhotoSize.Medium
  55. });
  58. if (file == null)
  59. return;
  61. image.Source = ImageSource.FromStream(() =>
  62. {
  63. var stream = file.GetStream();
  64. file.Dispose();
  65. return stream;
  66. });
  67. };
  69. takeVideo.Clicked += async (sender, args) =>
  70. {
  71. if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsTakeVideoSupported)
  72. {
  73. await DisplayAlert("No Camera", ":( No camera avaialble.", "OK");
  74. return;
  75. }
  77. var file = await CrossMedia.Current.TakeVideoAsync(new Plugin.Media.Abstractions.StoreVideoOptions
  78. {
  79. Name = "video.mp4",
  80. Directory = "DefaultVideos",
  81. });
  83. if (file == null)
  84. return;
  86. await DisplayAlert("Video Recorded", "Location: " + file.Path, "OK");
  88. file.Dispose();
  89. };
  91. pickVideo.Clicked += async (sender, args) =>
  92. {
  93. if (!CrossMedia.Current.IsPickVideoSupported)
  94. {
  95. await DisplayAlert("Videos Not Supported", ":( Permission not granted to videos.", "OK");
  96. return;
  97. }
  98. var file = await CrossMedia.Current.PickVideoAsync();
  100. if (file == null)
  101. return;
  103. await DisplayAlert("Video Selected", "Location: " + file.Path, "OK");
  104. file.Dispose();
  105. };
  106. }


Step 5

Now, we need to add namespaces.For that,go to Solution Explorer>>Camera App(PCL)>>click open Mainpage.xaml.cs page design view and add the following namespaces.
  1. using System;
  2. using System.Threading.Tasks;
  3. using Android.App;
  4. using Android.Content.PM;
  5. using Android.Runtime;
  6. using Android.Views;
  7. using Android.Widget;
  8. using Android.OS;
  9. using Plugin.Media;
Step 6

Next, Add await oncreate override method to your Android projects to initialize the camera and add namespaces. For that go to Solution Explorer >> open CameraApp.Droid project >> select MainActivity.cs and click open MainActivity.cs.Insert the given below code.
MainActivity.cs
  1. Using Plugin.Media;
  1. using System;
  2. using System.Threading.Tasks;
  3. using Android.App;
  4. using Android.Content.PM;
  5. using Android.Runtime;
  6. using Android.Views;
  7. using Android.Widget;
  8. using Android.OS;
  9. using Plugin.Media;
  11. namespace SEC.Droid
  12. {
  13. [Activity(Label = "SEC", Icon = "@drawable/icon", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
  14. public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
  15. {
  16. protected override async void OnCreate(Bundle bundle)
  17. {
  18. TabLayoutResource = Resource.Layout.Tabbar;
  19. ToolbarResource = Resource.Layout.Toolbar;
  21. base.OnCreate(bundle);
  23. await CrossMedia.Current.Initialize();
  25. global::Xamarin.Forms.Forms.Init(this, bundle);
  26. LoadApplication(new App());
  27. }
  28. }
  29. }
Step 7

Click F5 or Build and run your application, the output below like this,
Wait a few seconds, the app will be started on your android simulators and you will see your app working successfully.
Now Click TAKE A PHOTO button



Now click get a photo and followedby click right corner tick arrow



After you clicked tick symbol, back to home page.In this page below your taken picture has been displayed

Finally, we have successfully created Camera App in Xamarin.Forms.