Ever since their invention, cameras have played a huge role in society. With the advent of mobile phones, more people than ever before now have photo and video capabilities at their disposal with the tap of a button. As developers, users expect us to take full advantage of the device capabilities, including the camera, to make their lives easier. Whether you’re building an app to track business expenses or share photos with friends, as a mobile developer you’ll likely have to build interaction with the camera for an app at some point.
Each mobile operating system has its own APIs for interacting with the camera, making it difficult to share code. In this blog post, you’ll learn how to use the Media Plugin for Xamarin and Windows to take photos and videos or select them from a gallery—all from shared code—to make you a more productive developer.
Introduction to the Media Plugin for Xamarin
Plugins for Xamarin and Windows make mobile development simple by abstracting specific portions of the iOS, Android, and Windows APIs into a single, cross-platform API that can be utilized in shared code. The Media Plugin for Xamarin and Windows allows you to take photos and videos or pick them from a gallery.
Taking a Photo
All Media Plugin for Xamarin functionality can be accessed using the CrossMedia.Current
property, which uses the Singleton
pattern that all Plugins for Xamarin follow. Before taking a photo, you can ensure that the camera is available and that taking photos with the device is supported with the IsCameraAvailable
and IsTakePhotoSupported
boolean properties. After ensuring that the device capabilities are present for taking photos, we can configure our storage options for after the photo is taken with the StoreCameraMediaOptions
class. Taking a photo is as easy as calling TakePhotoAsync
and supplying storage configuration options:
if (CrossMedia.Current.IsCameraAvailable && CrossMedia.Current.IsTakePhotoSupported) { // Supply media options for saving our photo after it's taken. var mediaOptions = new Plugin.Media.Abstractions.StoreCameraMediaOptions { Directory = "Receipts", Name = $"{DateTime.UtcNow}.jpg" }; // Take a photo of the business receipt. var file = await CrossMedia.Current.TakePhotoAsync(mediaOptions); }
Recording a Video
If you know how to take photos with the Media Plugin for Xamarin, you already know how to record videos with Xamarin!
if (CrossMedia.Current.IsCameraAvailable && CrossMedia.Current.IsTakeVideoSupported) { // Supply media options for saving our video after it's taken. var mediaOptions = new Plugin.Media.Abstractions.StoreCameraMediaOptions { Directory = "Videos", Name = $"{DateTime.UtcNow}.mp4" }; // Record a video var file = await CrossMedia.Current.TakeVideoAsync(mediaOptions); }
Using the Media Picker
Taking photos and videos are great, but what if our user has already taken a photo or video? Rather than having them track down that receipt they threw away to take another photo, it would be great if we could select existing photos and videos from the device’s existing library. Each operating system exposes a media picker that we can use to select previously-taken photos or videos. The Media Plugin for Xamarin abstracts these platform-specific APIs into a shared API we can use from a Portable Class Library or Shared Project:
// Select a photo. if (CrossMedia.Current.IsPickPhotoSupported) var photo = await CrossMedia.Current.PickPhotoAsync(); // Select a video. if (CrossMedia.Current.IsPickVideoSupported) var video = await CrossMedia.Current.PickVideoAsync();
Wrapping Up
In this blog post, we used the Media Plugin for Xamarin and Windows to take photos and videos from shared code. Be sure to check out the Xamarin Component Store for additional documentation and samples on the media plugin, or browse the plugin gallery for a complete listing of all Plugins for Xamarin. Want to see how the Media Plugin for Xamarin and Windows is implemented under the hood? All Plugins for Xamarin are 100% open source, including the Media Plugin for Xamarin!
How can we add a button(own) on camera view using this plugin. This button i want to place beside of camera butto present in bottom-center
On Click of that button i want to navigate to photo gallery to pick photos for attachment.
Is that possible??? Please share your view.
Thanks,
Khagesh
Thank you for great topic!
Is there support pick multi picture from Gallery?