How to create a custom camera preview view with UIImagePickerController? - ios

Sorry if this question is somewhat broad, but I have been searching for hours without a great solution that fits my specific needs for this problem.
For some background information, the iOS app that I am working on calls for a camera overlay (a png of a mask image) where the user has the ability to place their face in and capture a photo with the mask overlay on top of it. The camera is initially set to the front because the main purpose is to have somewhat of a selfie functionality. After tapping the default capture button, the camera preview image gets mirrored or reversed.
Everything looks great before the photo is captured into camera preview view; however, after it is captured, it gets mirrored or reversed. For example, if I am holding up my left hand while setting up to capture the picture, and I capture that image, the camera preview will look like I am holding up my right hand.
During my research, I have found a couple of solutions that do not exactly fit my needs or fully explain how I could go about solving the problem. My project is exclusively written in Swift, and the management wants to keep it this way at all costs if possible. Below, I will list the solutions that I found:
This project is essentially everything that I need; however, it is written in Objective-C: https://github.com/lucasecf/LEMirroredImagePicker
All of the other solutions that I came upon were either to create a custom camera in its entirety (Capture, Cancel, Use Photo, Retake, Camera Preview, etc.) or to use AVFoundation (Never worked with this and there are not many examples in Swift).
Here is the only code that I have so far pertaining to working with UIImagePickerController:
var picker = UIImagePickerController()
#IBAction func shootPhoto(_ sender: AnyObject) {
if UIImagePickerController.availableCaptureModes(for: .front) != nil {
picker = UIImagePickerController() //make a clean controller
picker.allowsEditing = false
picker.sourceType = UIImagePickerControllerSourceType.camera
picker.cameraCaptureMode = .photo
picker.cameraDevice = .front
picker.showsCameraControls = true
//customView stuff
let customViewController = CustomOverlayViewController(
nibName:"CustomOverlayViewController",
bundle: nil)
let customView:CustomOverlayView = customViewController.view as! CustomOverlayView
customView.frame = self.picker.view.frame
picker.modalPresentationStyle = .fullScreen
present(picker,animated: true,completion: {
self.picker.cameraOverlayView = customView
})
} else { //no camera found -- alert the user.
let alertVC = UIAlertController(
title: "No Camera",
message: "Sorry, this device has no camera",
preferredStyle: .alert)
let okAction = UIAlertAction(
title: "OK",
style:.default,
handler: nil)
alertVC.addAction(okAction)
present(alertVC, animated: true, completion: nil)
}
}
So, if someone can either provide a full-fledged solution or guide me somehow (although, I think I have seen everything on the internet already) that would awesome!

Related

Xcode Camera: Failed to read exposureBiasesByMode dictionary

I recently got this error with the UIImagePickerController in Xcode Version 12.0.1
[Camera] Failed to read exposureBiasesByMode dictionary: Error Domain=NSCocoaErrorDomain Code=4864 "*** -[NSKeyedUnarchiver _initForReadingFromData:error:throwLegacyExceptions:]: data is NULL" UserInfo={NSDebugDescription=*** -[NSKeyedUnarchiver _initForReadingFromData:error:throwLegacyExceptions:]: data is NULL}
Has anyone else seen this error? How do you fix it?
If you customize your image picker as imagePicker.allowsEditing = true
you have to fetch image using:
if let pickedImage = info[UIImagePickerController.InfoKey.editedImage] as? UIImage {
capturedImage = pickedImage
}
If you instead use imagePicker.allowsEditing = false, use this to pick image:
if let pickedImage = info[UIImagePickerController.InfoKey.originalImage] as? UIImage {
capturedImage = pickedImage
}
If you don't follow this combination, you may get this error.
in my case, I got this bug from trying to use the image data and syncing with Files. Adding this permission in Info.plist made all the difference and made that error go away:
<key>LSSupportsOpeningDocumentsInPlace</key> <true/>
I experienced the same issue. I imported AVKit instead og AVFoundation and tried to present the video in the native recorder view. That gave me an exception telling me to add NSMicrophoneUsageDescription to the info.plist file, and after this, I was able to display the live video in a custom view.
So I believe the issue is with iOS 14 being very picky about permissions, and probably something goes wrong with showing the correct exception when the video is not presented in the native view.
Anyway, this worked for me:
import AVKit
import MobileCoreServices
#IBOutlet weak var videoViewContainer: UIView!
private let imagePickerController = UIImagePickerController()
override func viewDidLoad() {
super.viewDidLoad()
initCameraView()
}
func initCameraView() {
// Device setup
imagePickerController.delegate = self
imagePickerController.sourceType = .camera
imagePickerController.mediaTypes = [kUTTypeMovie as String]
imagePickerController.cameraCaptureMode = .video
imagePickerController.cameraDevice = .rear
// UI setup
addChild(imagePickerController)
videoViewContainer.addSubview(imagePickerController.view)
imagePickerController.view.frame = videoViewContainer.bounds
imagePickerController.allowsEditing = false
imagePickerController.showsCameraControls = false
imagePickerController.view.autoresizingMask = [.flexibleWidth, .flexibleHeight]
}
And then the added description for the NSMicrophoneUsageDescription in the info.plist file :-)
Hope it will work for you as well!
I managed to solve the problem. In fact, it is not directly related to react-native-image-crop-picker. The problem was that I was using react-native-actionsheet to give the user the option to open the camera or the gallery. When I opened the react-native-actionsheet and pressed one of the options, the camera was superimposing the react-native-actionsheet (modal) which generated a conflict, because apparently in IOS it is not possible for one Modal to overlap the other.
So, to solve the problem, I defined a timeout so that it is possible to close the modal before opening the camera.
I got this error when I tried to copy from a URL I couldn't copy. Which was coming from the mediaURL from the UIImagePickerControllerDelegate.
Basically, what I did was to use UISaveVideoAtPathToSavedPhotosAlbum
Like in this example ⤵️
if UIVideoAtPathIsCompatibleWithSavedPhotosAlbum(url.absoluteString) {
UISaveVideoAtPathToSavedPhotosAlbum(url.absoluteString, self, #selector(self.didSaveVideo), nil)
} else {
return /* do something*/
}
#objc private func didSaveVideo(videoPath: String, error: NSError, contextInfo: Any) {}
I found the same error with Xcode 12 & iOS 14 when imagePicker's source type is camera.
But the app is working fine, I could take picture using camera and put it in my collection view cell. Thus, maybe something on Xcode 12 I guess.
#objc func addPerson() {
let picker = UIImagePickerController()
if UIImagePickerController.isSourceTypeAvailable(.camera) {
picker.sourceType = .camera
} else {
fatalError("Camera is not available, please use real device.")
}
picker.allowsEditing = true
picker.delegate = self
present(picker, animated: true)
}
I faced the same error with Xcode 12 & iOS 14.
But in my case, I used ActionSheet to choose camera or photo library before that. So I changed to open camera just after close that ActionSheet, and it works well.
Hope this will be helpful on your issue.
enum MediaOptions: Int {
case Photos
case Camera
}
func selectImage(mediaType: MediaOptions) {
self.mediaOption = mediaType
let iPicker = UIImagePickerController()
iPicker.delegate = self
iPicker.allowsEditing = false
if mediaType == .Camera {
if UIImagePickerController.isSourceTypeAvailable(.camera) {
iPicker.sourceType = .camera
iPicker.allowsEditing = true
}
} else {
iPicker.sourceType = .photoLibrary
}
self.present(iPicker, animated: true, completion: nil)
self.imagePicker = iPicker
}
func choosePhoto() {
let actionSheet = UIAlertController(title: "Choose", message: "", preferredStyle: .actionSheet)
if UIImagePickerController.isSourceTypeAvailable(.camera) {
actionSheet.addAction(UIAlertAction(title: "Camera", style: .default, handler: { (action) -> Void in
actionSheet.dismiss(animated: true) {
self.selectImage(mediaType: .Camera) // Just moved here - inside the dismiss callback
}
}))
}
if UIImagePickerController.isSourceTypeAvailable(.photoLibrary) {
actionSheet.addAction(UIAlertAction(title: "Photo Library", style: .default, handler: { (action) -> Void in
self.selectImage(mediaType: .Photos)
}))
}
actionSheet.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: nil))
self.present(actionSheet, animated: true, completion: nil)
}
In my case, I was missing an Info.plist key for NSCameraUsageDescription.
You should enter the purpose of using camera as the description.
It fixed the crash for me.
Plus, if you don't give the purpose, your app is likely to be rejected.
If like me you have this second message :
[access] This app has crashed because it attempted to access privacy-sensitive data without a usage description. The app's Info.plist must contain an NSCameraUsageDescription key with a string value explaining to the user how the app uses this data.
Then you have to add this to your info.plist dictionary:
<key>NSCameraUsageDescription</key>
<string>so you can choose a photo or take a picture for object detection</string>
It solved the problem for me

iOS - Swift 3 - UIImagePicker avoid "Retake/Use Photo" for multiple photos

I know there are similar questions available on SO.
The reason why I'm starting a new topic.
I want to take multiple photos and save them into an array for later usage (when user finished taking photos)
I already read the API about showsCameraControl, takePicture() and cameraOverlayView
I managed already to capture multiple photos but I have always to confirm every photo with the "Retake/Use Photo" screen. When tipping on Use Photo, the App saves it into the array.
The same way is already working in the Workflow App from DeskConnect. They have a workflow "Take Photo" where you can choose how many photos you want to take. And they are (in my eyes) using Apple's default controls
Any help is appreciated.
Doesn't matter if it's a solution to avoid "Retake/Use Photo" or to create a custom overly view. For me it is important to keep Apple's default controls so the user feels comfortable with the well known controls.
(I also already took a look on the tutorials Apple provides).
My code so far
var imageArray = [UIImage]()
override func viewDidLoad() {
super.viewDidLoad()
openCamera()
}
func openCamera() {
if UIImagePickerController.isSourceTypeAvailable(UIImagePickerControllerSourceType.camera) {
let imagePicker = UIImagePickerController()
imagePicker.delegate = self
imagePicker.sourceType = UIImagePickerControllerSourceType.camera
imagePicker.allowsEditing = false
}
}
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
if let pickedImage = info[UIImagePickerControllerOriginalImage] as? UIImage {
imageArray.append(pickedImage)
print(imageArray.count)
}
self.dismiss(animated: true, completion: nil)
openCamera()
}

Capturing gyroscope data at exact moment of photo capture

I'm creating an app that will capture a photo and reorient it based on the gyroscope data at the time of photo capture.
I've created functions to capture the gyro data from the phone in:
startUpdates()
and to stop capturing the data in:
stopUpdates()
I tried adding this into the UIImagePickerController:
if UIImagePickerController.isSourceTypeAvailable(.camera) {
guard ptInitials.text != "" else {
missingIdentifier(text: "Please add an identifier prior to taking a photo")
return}
startUpdates()
imagePicker = UIImagePickerController()
imagePicker.delegate = self
imagePicker.allowsEditing = false
imagePicker.sourceType = UIImagePickerControllerSourceType.camera
imagePicker.cameraCaptureMode = .photo
imagePicker.modalPresentationStyle = .fullScreen
present(imagePicker,
animated: true,
completion: nil)
}
This starts the gyro capture as the image capture process begins.
I have it passing the gyro data to an optional double, livePhotoAxis: Double?, while it is measuring this inside the "startUpdates()" function.
I was attempting to get it to "stop" capturing the data once the picture is taken so the last known gyro data would be kept in my variable and able to pass into other functions;
func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {
stopUpdates()
let chosenImage = info[UIImagePickerControllerOriginalImage] as! UIImage
saveImageToDocuments(image: chosenImage, fileNameWithExtension: "image.jpg")
dismiss(animated: true, completion: nil
)
}
However, the problem is that the stopUpdates() method isn't called until after the user "confirms" they like their snapped photo (vs retaking it).
From what I've read, there is a private API with uiImagePickerControllerUserDidCaptureItem that captures the exact moment the photo is taken. I could use NSNotification to try and find this and call StopUpdates() once the photo is actually taken.
Is this correct that this is a private API? Can I use that to capture this moment or will my app get rejected?
Likewise, is there a better way to turn off my gyro updates at the exact moment of photo capture?
Thanks!
I added this code and it fixed the problem, but I still don't know if this is a private API and will be allowed in the app store or not? Or if there is a better way to accomplish this?
NotificationCenter.default.addObserver(forName: NSNotification.Name(rawValue: "_UIImagePickerControllerUserDidCaptureItem"), object:nil, queue:nil, using: { note in
self.stopUpdates()
})
Update: This doesn't fire the EXACT moment of photo capture. It fires when the photo is "locked in". There are a few seconds (2ish) between the time the take photo button is pressed and the photo locks into place. As a result, if you move the phone during that time, the gyro data will be inaccurate.
Any thoughts on how to improve on this?

iOS App architecture implementing MVVM, Networking and Bluetooth, how?

Problem:
I am currently facing a problem with developing an iOS Mobile Application in Swift that utilizes:
BTLE: Connecting to a peripheral device and sending/receiving data to/from it.
Networking: If the peripheral is connected to a network (wireless and/or ethernet), then the communication over BTLE "could" instead happen over the network.
Model-View-ViewModel architecture
RxSwift
About the App:
It starts with a Bluetooth Setup view, which walks the user through the process of pairing with the peripheral device (disjoint from the TabBarController).
After successfully pairing with the device, all configuration is requested by the iOS App from the device, which is sent as JSON.
This JSON contains the different Model information (programming) that the App displays to the user for manipulation and needs to be stored in a array somehow in a Singleton manor to where a view-model can request any index for displaying to the user.
After all the data is received, the Bluetooth View dismisses and the TabBarView's are presented.
Current Examples:
A good example to relate this App to would be the Apple Watch and the correlating iOS App that allows you to configure everything. I am having to do somewhat the same concept.
Another good example app from this blog post where they are doing something similar to what I am trying to achieve. The difference I am running into though, is their dependency injection setup for MVVM (as well as other similar examples). I've used a storyboard, where as they have programmatically instantiated their view controllers in the AppDelegate.
And my problem...
How can I pass the data (efficiently) from BluetoothView to TabBarView without NSNotifications or PrepareForSegues? Keeping in mind that I am intending to use the library RxSwift for asynchronous event handling and event/data streams. I am trying to keep this App as stateless as possible.
Are the Servers in this blog post a good practice for retrieving view-models and/or updating them?
I find that, when using RxSwift, the "view-model" ends up being a single pure function that takes observable parameters from the input UI parameters and returns observables that are then bound to the output UI elements.
Something that really helped me wrap my head around Rx was the tutorial videos for cycle.js.
As for your specific conundrum...
What you are doing doesn't have to be "forward" movement. Look at it this way... The TabBarView needs some data, and it doesn't care where that data comes from. So give the TabBarView access to a function that returns an observable which contains the necessary data. That closure will present the Bluetooth View, make the connection, get the necessary data and then dismiss the Bluetooth View and call onNext with the required data.
Looking at this gist might help get across what I'm talking about. Granted the gist uses PromiseKit instead of RxSwift, but the same principle can be used (instead of fulfill, you would want to call onNext and then onCompletion.) In the gist, the view controller that needs the data simply calls a function and subscribes to the result (in this case, the result contains a UIImage.) It is the function's job to determine what image sources are available, ask the user which source they want to retrieve the image from and present the appropriate view controller to get the image.
The current contents of the gist are below:
//
// UIViewController+GetImage.swift
//
// Created by Daniel Tartaglia on 4/25/16.
// Copyright © 2016 MIT License
//
import UIKit
import PromiseKit
enum ImagePickerError: ErrorType {
case UserCanceled
}
extension UIViewController {
func getImage(focusView view: UIView) -> Promise<UIImage> {
let proxy = ImagePickerProxy()
let cameraAction: UIAlertAction? = !UIImagePickerController.isSourceTypeAvailable(.Camera) ? nil : UIAlertAction(title: "Camera", style: .Default) { _ in
let controller = UIImagePickerController()
controller.delegate = proxy
controller.allowsEditing = true
controller.sourceType = .Camera
self.presentViewController(controller, animated: true, completion: nil)
}
let photobinAction: UIAlertAction? = !UIImagePickerController.isSourceTypeAvailable(.PhotoLibrary) ? nil : UIAlertAction(title: "Photos", style: .Default) { _ in
let controller = UIImagePickerController()
controller.delegate = proxy
controller.allowsEditing = false
controller.sourceType = .PhotoLibrary
self.presentViewController(controller, animated: true, completion: nil)
}
let cancelAction = UIAlertAction(title: "Cancel", style: .Cancel, handler: nil)
let alert = UIAlertController(title: nil, message: nil, preferredStyle: .ActionSheet)
if let cameraAction = cameraAction {
alert.addAction(cameraAction)
}
if let photobinAction = photobinAction {
alert.addAction(photobinAction)
}
alert.addAction(cancelAction)
let popoverPresentationController = alert.popoverPresentationController
popoverPresentationController?.sourceView = view
popoverPresentationController?.sourceRect = view.bounds
presentViewController(alert, animated: true, completion: nil)
let promise = proxy.promise
return promise.always {
self.dismissViewControllerAnimated(true, completion: nil)
proxy.retainCycle = nil
}
}
}
private final class ImagePickerProxy: NSObject, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
let (promise, fulfill, reject) = Promise<UIImage>.pendingPromise()
var retainCycle: ImagePickerProxy?
required override init() {
super.init()
retainCycle = self
}
#objc func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {
let image = (info[UIImagePickerControllerEditedImage] as? UIImage) ?? (info[UIImagePickerControllerOriginalImage] as! UIImage)
fulfill(image)
}
#objc func imagePickerControllerDidCancel(picker: UIImagePickerController) {
reject(ImagePickerError.UserCanceled)
}
}

Swift - Is it possible to select a video from the library on the iOS simulator?

All that shows up when I use the UIImagePickerController is a library of photos. I have an mp4 video saved to the simulator library, but it never shows up in the list when I access the simulator library programmatically with UIImagePickerController. Is there something I'm doing wrong?
You just need to add a video to your simulator.
Drag and drop a video file on top of the simulator window. It will show in the photos app and whenever you want a video for upload.
Based on Swift 2.2
Your code may look like this:
#IBAction func selectImageFromPhotoLibrary(sender: UIBarButtonItem) {
let imagePickerController = UIImagePickerController()
imagePickerController.sourceType = .PhotoLibrary
imagePickerController.delegate = self
imagePickerController.mediaTypes = ["public.image", "public.movie"]
presentViewController(imagePickerController, animated: true, completion: nil)
}
Actually you can get the answers from the Apple Document:
UIImagePickerController Class Reference
The useful method is class func availableMediaTypesForSourceType.
You can try this:
let types = UIImagePickerController.availableMediaTypesForSourceType(.PhotoLibrary)
print(types)
Then you know videos types are named public.movie , not kUTTypeMovie anymore.

Resources