Giter Club home page Giter Club logo

cameraview's Introduction


CameraView Logo

Camera made simple

Create fully customisable camera view in no time. Keep your code clean

Try demo we prepared | Roadmap | Propose a new feature


SwiftUI logo Platforms: iOS, iPadOS, macOS, tvOS Current Version License: MIT

Made in Kraków Follow us on X Let's work together Stargazers

Popup Examples Popup Examples Popup Examples


CameraView by Mijick is a powerful, open-source library that simplifies the camera presentation process, making it super fast and totally customisable, allowing you to focus on the important elements of your project while hiding the technical complexities.

  • Customise your UI completely. Use a clean and modern UI we designed or change it completely within minutes!
  • Covers the entire process. Our library both presents the camera controller, asks for permissions, displays an error view if permissions are not granted, and shows the result of the capture in a separate view (if you wish, of course).
  • Improves code quality. Allows you to focus on the most important things, hiding implementation details inside this powerful library.
  • Designed for SwiftUI. As we developed the library, we utilized SwiftUI's capabilities to offer you a powerful tool for streamlining your implementation process.

Getting Started

✋ Requirements

Platforms Minimum Swift Version
iOS 14+ 5.10

⏳ Installation

Swift Package Manager is a tool for automating the distribution of Swift code and is integrated into the Swift compiler.

Once you have your Swift package set up, adding PopupView as a dependency is as easy as adding it to the dependencies value of your Package.swift.

dependencies: [
    .package(url: "https://github.com/Mijick/CameraView.git", branch(“main”))
]

Cocoapods is a dependency manager for Swift and Objective-C Cocoa projects that helps to scale them elegantly.

Installation steps:

    pod init
  • Add CocoaPods dependency into your Podfile
    pod 'MijickCameraView'
  • Install dependency and generate .xcworkspace file
    pod install
  • Use new XCode project file .xcworkspace

Usage

1. Modify the info.plist file

Open the info.plist file of your project. Add two new keys: Privacy - Microphone Usage Description and Privacy - Camera Usage Description. Value will be displayed by default in the error screen when the user denies access to one of the above permissions.

CleanShot 2024-05-06 at 13 41 25

2. Insert MCameraController into the selected view

MCameraController contains three screens - CameraView, CameraPreview (which can be turned off) and CameraErrorView. Therefore, we advise that there should be no other elements in the view where you declare MCameraController. We’ve designed this system around the experience and needs of ourselves and the developers we know. However, if your preferences are different, we are happy to meet your expectations and adapt our library. Share them with us by creating an issue for this project.

struct CameraView: View {

    (...)
   
    var body: some View {
        MCameraController()
    }

    (...)
}

3. Declare onImageCaptured, onVideoCaptured, afterMediaCaptured and onCloseController

The above functions define what happens after a given action and are optional; for example, if your application only captures images, you don't need to declare onVideoCaptured and so on.

struct CameraView: View {

    (...)
   
    var body: some View {
        MCameraController()
            .onImageCaptured { data in
                print("IMAGE CAPTURED")
            }
            .onVideoCaptured { url in
                print("VIDEO CAPTURED")
            }
            .afterMediaCaptured {
                print("IMAGE OR VIDEO WAS PROCESSED. WHAT'S NEXT?")
            }
            .onCloseController {
                print("CLOSE THE CONTROLLER")
            }
    }

    (...)
}

4. (Optional) Block screen rotation for MCameraController

CameraView library by Mijick, allows you to lock the screen rotation for MCameraController, even if a device rotation is unlocked. To achieve it, create an AppDelegate class conforming to MApplicationDelegate, declare @UIApplicationDelegateAdaptor in @main struct and set lockOrientation(AppDelegate.self) for MCameraController.

class AppDelegate: NSObject, MApplicationDelegate {
    static var orientationLock = UIInterfaceOrientationMask.all

    func application(_ application: UIApplication, supportedInterfaceOrientationsFor window: UIWindow?) -> UIInterfaceOrientationMask { AppDelegate.orientationLock }
}
@main struct CameraView_DemoApp: App {
    @UIApplicationDelegateAdaptor(AppDelegate.self) var appDelegate

    var body: some Scene {
        WindowGroup(content: CameraView.init)
    }
}
struct CameraView: View {

    (...)
   
    var body: some View {
        MCameraController()
            .lockOrientation(AppDelegate.self)
    }

    (...)
}

5. (Optional) Change the initial camera settings

You can change the initial camera settings using the modifiers from the list below:

struct CameraView: View {

    (...)
   
    var body: some View {
        MCameraController()
            .outputType(.video)
            .cameraPosition(.front)
            .flashMode(.auto)
            .gridVisible(false)
            .focusImage(.init(named: "icon-focus")!)
            .focusImageColor(.blue)
            .focusImageSize(120)
            .changeCameraFilters([.init(name: "CISepiaTone")!])
    }

    (...)
}

6. (Optional) Change CameraView UI

You can change the appearance of the CameraView by creating a new structure, conforming to MCameraView and using the cameraScreen modifier.

struct CustomCameraView: MCameraView {
    @ObservedObject var cameraManager: MijickCameraView.CameraManager
    let namespace: Namespace.ID
    let closeControllerAction: () -> ()


    var body: some View {
        VStack(spacing: 0) {
            createNavigationBar()
            createCameraView()
            createCaptureButton()
        }
    }
}
private extension CustomCameraView {
    func createNavigationBar() -> some View {
        Text("This is a Custom Camera View")
            .padding(.top, 12)
            .padding(.bottom, 12)
    }
    func createCaptureButton() -> some View {
        Button(action: captureOutput) { Text("Click to capture") }
            .padding(.top, 12)
            .padding(.bottom, 12)
    }
}
struct CameraView: View {

    (...)
   
    var body: some View {
        MCameraController()
            .cameraScreen(CustomCameraView.init)
    }

    (...)
}

7. (Optional) Change (or disable) CameraPreview UI

You can change the appearance of the CameraPreview by creating a new structure, conforming to MCameraPreview and using the mediaPreviewScreen modifier.
Note: To disable the preview of captured media, use the mediaPreviewScreen modifier with nil as the argument.

struct CustomCameraPreview: MCameraPreview {
    let capturedMedia: MijickCameraView.MCameraMedia
    let namespace: Namespace.ID
    let retakeAction: () -> ()
    let acceptMediaAction: () -> ()


    var body: some View {
        VStack(spacing: 0) {
            Spacer()
            createContentView()
            Spacer()
            createButtons()
        }
    }
}
private extension CustomCameraPreview {
    func createContentView() -> some View { ZStack {
        if let image = capturedMedia.image { createImageView(image) }
        else { EmptyView() }
    }}
    func createButtons() -> some View {
        HStack(spacing: 24) {
            createRetakeButton()
            createSaveButton()
        }
    }
}
private extension CustomCameraPreview {
    func createImageView(_ image: Data) -> some View {
        Image(uiImage: .init(data: image) ?? .init())
            .resizable()
            .aspectRatio(contentMode: .fit)
            .ignoresSafeArea()
    }
    func createRetakeButton() -> some View {
        Button(action: retakeAction) { Text("Retake") }
    }
    func createSaveButton() -> some View {
        Button(action: acceptMediaAction) { Text("Save") }
    }
}
struct CameraView: View {

    (...)
   
    var body: some View {
        MCameraController()
            .mediaPreviewScreen(CustomCameraPreview.init)
    }

    (...)
}

8. (Optional) Change CameraErrorView UI

You can change the appearance of the CameraErrorView by creating a new structure, conforming to MCameraErrorView and using the errorScreen modifier.

struct CustomCameraErrorView: MCameraErrorView {
    let error: CameraManager.Error
    let closeControllerAction: () -> ()


    var body: some View {
        Button(action: openAppSettings) { Text("Open Settings") }
    }
}
struct CameraView: View {

    (...)
   
    var body: some View {
        MCameraController()
            .errorScreen(CustomCameraErrorView.init)
    }

    (...)
}

Try our demo

See for yourself how does it work by cloning project we created

License

CameraView is released under the MIT license. See LICENSE for details.



Our other open source SwiftUI libraries

PopupView - The most powerful popup library that allows you to present any popup
NavigationView - Easier and cleaner way of navigating through your app
CalendarView - Create your own calendar object in no time
GridView - Lay out your data with no effort
Timer - Modern API for Timer

cameraview's People

Contributors

fulcrumone avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

cameraview's Issues

Block Screen Rotation for MCameraController locks all view orientations

Per the read.me: https://github.com/Mijick/CameraView?tab=readme-ov-file#4-optional-block-screen-rotation-for-mcameracontroller

It sounds as though only the camera controller will be locked but actually setting .lockOrientation(AppDelegate.self) locks every other view as well if it is visible. This seems to be a particularly difficult issue to solve, locking a single view's orientation while allowing other views to freely rotate based on orientation of the device..

App lifecycle problems

Hello, firstly this is a great framework.

I have a problem. When the application goes to the background and comes to the front again, the image or video preview closes and returns to the shooting screen, this is a problem, the second problem is that when I try to shoot again after this scenario, I get a crash.

Why doesn't the app continue where I left off when I put it in the background and then bring it back to the foreground?

var cameraView: UIView { cameraLayer.superview ?? .init() } -> and i get a crash for take a picture after background/foregroung. Because I guess CameraInputView is being recreated.

Thank you

Cropped preview?

Is there a way to crop the preview and capture photos exactly like the cropped preview?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.