I want to activate the camera with an application developed on a cross platform and change the frame rate and shutter speed of the preview screen.

Asked 2 years ago, Updated 2 years ago, 127 views

We have created an app that allows you to preview camera images on iOS app and change the frame rate of the screen, the shutter speed of the camera, and the iso value in real time.

import UIKit
import AVFoundation

classViewController:UIViewController {
    // Creating Objects to Manage Inputs and Outputs from Devices
    var captureSession = AVCaptureSession()

    // Setting the Camera Quality
    func setupCaptureSession(){
        captureSession.sessionPreset=AVCaptureSession.Preset.photo
    }
    // Creating an object that manages the camera device itself
    // Creating a Main Camera Management Object
    varmainCamera —AVCaptureDevice?
    // Creating an In-camera Management Object
    var innerCamera —AVCaptureDevice?
    // Creating a Management Object for Your Camera Device
    varcurrentDevice —AVCaptureDevice?
    
    // Configuring Devices
    func setupDevice(){
        // Camera Device Properties Settings
        let deviceDiscoverySession = AVCaptureDevice.DiscoverySession(deviceType: [AVCaptureDevice.DeviceType.buildInWideAngleCamera], mediaType: AVMediaType.video, position: AVCaptureDevice.Position.unspecified)
        // Obtaining a Camera Device that Meets the Conditions
        let devices = deviceDiscoverySession.devices

        for device in devices {
            if device.position == AVCaptureDevice.Position.back {
                mainCamera=device
            } else if device.position == AVCaptureDevice.Position.front {
                innerCamera=device
            }
        }
        // Set the Startup Camera
        currentDevice=mainCamera
        do{
            !.lockForConfiguration()// Obtained access to the device.
        } catchlet error {
            print(error)
        }
        configureDevice (device:currentDevice!)
    }
    // OBJECT RECEIVING OUTPUT DATA OF CAPTURE
    varphotoOutput —AVCapturePhotoOutput?

    // Configuring Input/Output Data
    func setupInputOutput(){
        do{
            // Initialize input to use the specified device
            let captureDeviceInput=try AVCaptureDeviceInput (device:currentDevice!)
            // Add specified input to session
            captureSession.addInput(captureDeviceInput)
            // Creating an Object to Receive Output Data
            photoOutput = AVCapturePhotoOutput()
            // Formatting Output Files
            photoOutput!.setPreparedPhotoSettingsArray ([AVCapturePhotoSettings (format: [AVVideoCodecKey:AVVideoCodecType.jpeg]], completionHandler:nil)
            captureSession.addOutput(photoOutput!)
        } catch{
            print(error)
        }
    }
    // Layer for preview display
    varcameraPreviewLayer: AVCaptureVideoPreviewLayer?

    // Configuring the Layer for Camera Previews
    func setupPreviewLayer(){
        // Initialize preview layer with specified AVCaptureSession
        self.cameraPreviewLayer=AVCaptureVideoPreviewLayer (session:captureSession)
        // Set the preview layer to display while maintaining the camera capture aspect ratio
        self.cameraPreviewLayer?.videoGravity=AVLayerVideoGravity.resizeAspectFill
        // Set preview layer display orientation
        self.cameraPreviewLayer?connection?.videoOrientation=AVCaptureVideoOrientation.portrait

        self.cameraPreviewLayer?.frame=view.frame
        self.view.layer.insertSublayer(self.cameraPreviewLayer!, at:0)
    }
    
    // Image quality, shutter speed, and iso settings
    func configureDevice (device:AVCaptureDevice) {
        if device.isFocusModeSupported(.continuousAutoFocus){
            device.focusMode=.continuousAutoFocus
        }
        let shutterSpeed=CMTimeMake(value:1, timescale:Int32(slider_value_speed))
        device.setExposeModeCustom(duration:shutterSpeed,iso:Float(slider_value_iso), completionHandler:nil)
        do{
            try device.lockForConfiguration()
            // Frame Rate Settings
            device.activeVideoMinFrameDuration=CMTimeMake(value:1, timescale:Int32(slider_value_frame))
            device.activeVideoMaxFrameDuration=CMTimeMake (value:1, timescale:10)
            device.unlockForConfiguration()
        |catch{}
    }

    @IBOutlet weak var label_frame —UILabel!
    @IBOutlet weak var label_speed —UILabel!
    @IBOutlet weak var label_iso: UILabel!
    
    var slider_value_frame = 10
    var slider_value_speed = 100
    var slider_value_iso = 100
    
    override func viewDidLoad(){
        super.viewDidLoad()
        setupCaptureSession()
        setupDevice()
        setupInputOutput()
        setupPreviewLayer()
        captureSession.startRunning()
    }
    
    @ IBAction func slider_change_frame(_sender:UISlider){
        let sliderValueFrame: Int=Int(sender.value)
        label_frame.text=String(sliderValueFrame)
        slider_value_frame = sliderValueFrame
        print(slider_value_frame)
        configureDevice (device:currentDevice!)
    }
    
    @ IBAction func slider_change_speed(_sender:UISlider){
        let sliderValueSpeed: Int=Int(sender.value)
        label_speed.text=String(sliderValueSpeed)
        slider_value_speed = sliderValueSpeed
        print(slider_value_speed)
        configureDevice (device:currentDevice!)
    }
    
    @ IBAction func slider_change_iso(_sender:UISlider){
        let sliderValueIso: Int=Int(sender.value)
        label_iso.text=String(sliderValueIso)
        slider_value_iso = sliderValueIso
        print(slider_value_iso)
        configureDevice (device:currentDevice!)
    }
}

Currently, I am considering supporting Android for this app, but considering maintenance, I would like to create a camera application that supports both iOS and Android on cross-platforms such as cordova and react native.
We would like to develop an app that can change the frame rate of the camera, shutter speed of the camera, ISO value, etc. in real time while previewing the image of the camera on the screen.
(The iOS app below is close to the image.)
https://apps.apple.com/jp/app/video-tachometer/id1492583587

I'm thinking of developing an app like this on a cross platform, but when I looked into it, I found that neither cordova nor react native had a plug-in to change the frame rate, shutter speed, etc.

Below is a list of some of the sites we have researched.

https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-preview
This is the cordoa camera plug-in, but it seems that you can set the exposure and focus, but you cannot set the frame rate.

https://qiita.com/sugasaki/items/64111a0c316bfbb51e3f
This is about the camera function implementation in react native, but we did not see any similar configuration items for the function.

Are there any cross-platforms or plug-ins that can enable applications with the above features?

It is difficult to indicate the items you have tried because it is in the investigation stage.
(It is also impractical to post all the URLs you have researched.)
Therefore, I would be very grateful if anyone with information could share it with me.

Thank you for your cooperation.

ios android cordova flutter react-native

2022-09-30 16:50

1 Answers

Since I have participated in React Native development several times, I would like to answer the following questions about React Native.

As you said, a typical camera package called React Native Camera does not have that function.
Issue also has requests for such features, but they are being ignored.
Expo I also looked into the SDK for the very famous React Native, but I still couldn't find it.

The following is my opinion.

I think the biggest attraction of the framework for cross-platform development, including React Native, is that it wraps the native code.
This will speed up development, but
The downside is that you are bound to the framework and peripheral library APIs.
(I can build and expand my native module, but I think that would put the cart before the horse…)

And most importantly, This kind of API is intended for general applications and tends to be unsuitable for maniacal feature implementation

.

When I participated in the React Native camera application development, there was a request that I had to edit Exif, but no matter how much I looked for the package, I couldn't find it, so I ended up adding a native module.
Adjusting frame rates and iso values is more like professional…you probably can't find them even if you look for them

Also, React Native (Flutter as far as Github is concerned), unfortunately, the package itself has many defects.
It is well known that there are frequent errors in version upgrades, and whenever something happens, patch-package is required.
In other words, considering future serviceability, a native implementation may be preferable.
Performance is also lower than native speakers.

Of course, using these frameworks has advantages such as common UI and quick launch of orthodox apps, so I think it will be convenient during the prototyping stage. In the case of m-mega, it seems that the iOS implementation has already been completed.
I think the specifications required are special, so
I think it would be better to try native Android implementation even if it costs a little bit of learning.


2022-09-30 16:50

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.