@capacitor-community/camera-preview 2.0.0 → 2.1.0

package/README.md

@@ -77,10 +77,11 @@ Starts the camera preview instance.
 | rotateWhenOrientationChanged | boolean   | (optional) Rotate preview when orientation changes (applicable to the ios platforms only; default value is true)                                                      |
 | storeToFile | boolean       | (optional) Capture images to a file and return back the file path instead of returning base64 encoded data, default false. |
 | disableExifHeaderStripping | boolean       | (optional) Disable automatic rotation of the image, and let the browser deal with it, default true (applicable to the android and ios platforms only) |
+| enableHighResolution | boolean       | (optional) Defaults to false - iOS only - Activate high resolution image capture so that output images are from the highest resolution possible on the device |
 | disableAudio | boolean | (optional) Disables audio stream to prevent permission requests, default false. (applicable to web only) |
 | lockAndroidOrientation | boolean | (optional) Locks device orientation when camera is showing, default false. (applicable to Android only) |
 | enableOpacity | boolean | (optional) Make the camera preview see-through. Ideal for augmented reality uses. Default false (applicable to Android and web only)
-| enableZoom | boolean | (optional) Set if you can pinch to zoom. Default false (applicable to Android only)
+| enableZoom | boolean | (optional) Set if you can pinch to zoom. Default false (applicable to the android and ios platforms only)
 
 <!-- <strong>Options:</strong>
 All options stated are optional and will default to values here
@@ -98,9 +99,7 @@ All options stated are optional and will default to values here
 * `disableExifHeaderStripping` - Defaults to false - **Android Only** - Disable automatic rotation of the image, and let the browser deal with it (keep reading on how to achieve it) -->
 
 ```javascript
-import { Plugins } from "@capacitor/core"
-const { CameraPreview } = Plugins;
-import { CameraPreviewOptions } from '@capacitor-community/camera-preview';
+import { CameraPreview, CameraPreviewOptions } from '@capacitor-community/camera-preview';
 
 const cameraPreviewOptions: CameraPreviewOptions = {
   position: 'rear',
@@ -117,6 +116,7 @@ ion-content {
   --background: transparent;
 }
 ```
+
 Take into account that this will make transparent all ion-content on application, if you want to show camera preview only in one page, just add a custom class to your ion-content and make it transparent:
 
 ```css
@@ -125,6 +125,23 @@ Take into account that this will make transparent all ion-content on application
 }
 ```
 
+If the camera preview is not displaying after applying the above styles, apply transparent background color to the root div element of the parent component
+Ex: VueJS >> App.vue component 
+```html
+<template>
+  <ion-app id="app">
+    <ion-router-outlet />
+  </ion-app>
+</template>
+
+<style>
+#app {
+  background-color: transparent !important;
+}
+<style>
+```
+
+
 ### stop()
 
 <info>Stops the camera preview instance.</info><br/>
@@ -174,7 +191,7 @@ CameraPreview.hide();
 <!-- <info>Take the picture. If width and height are not specified or are 0 it will use the defaults. If width and height are specified, it will choose a supported photo size that is closest to width and height specified and has closest aspect ratio to the preview. The argument `quality` defaults to `85` and specifies the quality/compression value: `0=max compression`, `100=max quality`.</info><br/> -->
 
 ```javascript
-import { CameraPreviewFlashMode } from '@capacitor-community/camera-preview';
+import { CameraPreviewPictureOptions } from '@capacitor-community/camera-preview';
 
 const cameraPreviewPictureOptions: CameraPreviewPictureOptions = {
   quality: 50

package/ios/Plugin/CameraController.swift

@@ -34,6 +34,8 @@ class CameraController: NSObject {
 
     var audioDevice: AVCaptureDevice?
     var audioInput: AVCaptureDeviceInput?
+    
+    var zoomFactor: CGFloat = 1.0
 }
 
 extension CameraController {
@@ -162,6 +164,25 @@ extension CameraController {
         self.previewLayer?.frame = view.frame
     }
 
+    func setupGestures(target: UIView, enableZoom: Bool) {
+        setupTapGesture(target: target, selector: #selector(handleTap(_:)), delegate: self)
+        if (enableZoom) {
+            setupPinchGesture(target: target, selector: #selector(handlePinch(_:)), delegate: self)
+        }
+    }
+    
+    func setupTapGesture(target: UIView, selector: Selector, delegate: UIGestureRecognizerDelegate?) {
+        let tapGesture = UITapGestureRecognizer(target: self, action: selector)
+        tapGesture.delegate = delegate
+        target.addGestureRecognizer(tapGesture)
+    }
+    
+    func setupPinchGesture(target: UIView, selector: Selector, delegate: UIGestureRecognizerDelegate?) {
+        let pinchGesture = UIPinchGestureRecognizer(target: self, action: selector)
+        pinchGesture.delegate = delegate
+        target.addGestureRecognizer(pinchGesture)
+    }
+
     func updateVideoOrientation() {
         assert(Thread.isMainThread) // UIApplication.statusBarOrientation requires the main thread.
 
@@ -416,6 +437,67 @@ extension CameraController {
     }
 }
 
+extension CameraController: UIGestureRecognizerDelegate {
+    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
+        return true;
+    }
+    
+    @objc
+    func handleTap(_ tap: UITapGestureRecognizer) {
+        guard let device = self.currentCameraPosition == .rear ? rearCamera : frontCamera else { return }
+        
+        let point = tap.location(in: tap.view)
+        let devicePoint = self.previewLayer?.captureDevicePointConverted(fromLayerPoint: point)
+        
+        do {
+            try device.lockForConfiguration()
+            defer { device.unlockForConfiguration() }
+            
+            let focusMode = AVCaptureDevice.FocusMode.autoFocus
+            if device.isFocusPointOfInterestSupported && device.isFocusModeSupported(focusMode) {
+                device.focusPointOfInterest = CGPoint(x: CGFloat(devicePoint?.x ?? 0), y: CGFloat(devicePoint?.y ?? 0))
+                device.focusMode = focusMode
+            }
+            
+            let exposureMode = AVCaptureDevice.ExposureMode.autoExpose
+            if device.isExposurePointOfInterestSupported && device.isExposureModeSupported(exposureMode) {
+                device.exposurePointOfInterest = CGPoint(x: CGFloat(devicePoint?.x ?? 0), y: CGFloat(devicePoint?.y ?? 0))
+                device.exposureMode = exposureMode
+            }
+        } catch {
+            debugPrint(error)
+        }
+    }
+    
+    @objc
+    private func handlePinch(_ pinch: UIPinchGestureRecognizer) {
+        guard let device = self.currentCameraPosition == .rear ? rearCamera : frontCamera else { return }
+        
+        func minMaxZoom(_ factor: CGFloat) -> CGFloat { return max(1.0, min(factor, device.activeFormat.videoMaxZoomFactor)) }
+        
+        func update(scale factor: CGFloat) {
+            do {
+                try device.lockForConfiguration()
+                defer { device.unlockForConfiguration() }
+                
+                device.videoZoomFactor = factor
+            } catch {
+                debugPrint(error)
+            }
+        }
+        
+        switch pinch.state {
+        case .began: fallthrough
+        case .changed:
+            let newScaleFactor = minMaxZoom(pinch.scale * zoomFactor)
+            update(scale: newScaleFactor)
+        case .ended:
+            zoomFactor = device.videoZoomFactor
+        default: break
+        }
+    }
+}
+
 extension CameraController: AVCapturePhotoCaptureDelegate {
     public func photoOutput(_ captureOutput: AVCapturePhotoOutput, didFinishProcessingPhoto photoSampleBuffer: CMSampleBuffer?, previewPhoto previewPhotoSampleBuffer: CMSampleBuffer?,
                             resolvedSettings: AVCaptureResolvedPhotoSettings, bracketSettings: AVCaptureBracketedStillImageSettings?, error: Swift.Error?) {

package/ios/Plugin/Plugin.swift

@@ -19,6 +19,7 @@ public class CameraPreview: CAPPlugin {
     var rotateWhenOrientationChanged: Bool?
     var toBack: Bool?
     var storeToFile: Bool?
+    var enableZoom: Bool?
     var highResolutionOutput: Bool = false
 
     @objc func rotated() {
@@ -78,6 +79,7 @@ public class CameraPreview: CAPPlugin {
         self.rotateWhenOrientationChanged = call.getBool("rotateWhenOrientationChanged") ?? true
         self.toBack = call.getBool("toBack") ?? false
         self.storeToFile = call.getBool("storeToFile") ?? false
+        self.enableZoom = call.getBool("enableZoom") ?? false
 
         AVCaptureDevice.requestAccess(for: .video, completionHandler: { (granted: Bool) in
             guard granted else {
@@ -106,6 +108,9 @@ public class CameraPreview: CAPPlugin {
                         }
                         try? self.cameraController.displayPreview(on: self.previewView)
                         
+                        let frontView = self.toBack! ? self.webView : self.previewView;
+                        self.cameraController.setupGestures(target: frontView ?? self.previewView, enableZoom: self.enableZoom!)
+                        
                         if (self.rotateWhenOrientationChanged == true) {
                             NotificationCenter.default.addObserver(self, selector: #selector(CameraPreview.rotated), name: UIDevice.orientationDidChangeNotification, object: nil)
                         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capacitor-community/camera-preview",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Camera preview",
   "main": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",