

iOSアプリでカメラの映像をプレビューして、リアルタイムで画面のフレームレートやカメラのシャッタースピ―ド、iso値を変更できるアプリを作成しました。

[code]

    import UIKit
    import AVFoundation
    
    class ViewController: UIViewController{
        // デバイスからの入力と出力を管理するオブジェクトの作成
        var captureSession = AVCaptureSession()
    
        // カメラの画質の設定
        func setupCaptureSession() {
            captureSession.sessionPreset = AVCaptureSession.Preset.photo
        }
        // カメラデバイスそのものを管理するオブジェクトの作成
        // メインカメラの管理オブジェクトの作成
        var mainCamera: AVCaptureDevice?
        // インカメの管理オブジェクトの作成
        var innerCamera: AVCaptureDevice?
        // 現在使用しているカメラデバイスの管理オブジェクトの作成
        var currentDevice: AVCaptureDevice?
        
        // デバイスの設定
        func setupDevice() {
            // カメラデバイスのプロパティ設定
            let deviceDiscoverySession = AVCaptureDevice.DiscoverySession(deviceTypes: [AVCaptureDevice.DeviceType.builtInWideAngleCamera], mediaType: AVMediaType.video, position: AVCaptureDevice.Position.unspecified)
            // プロパティの条件を満たしたカメラデバイスの取得
            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
                }
            }
            // 起動時のカメラを設定
            currentDevice = mainCamera
            do{
                try currentDevice!.lockForConfiguration() // デバイスへのアクセス権を取得。
            } catch let error {
                print(error)
            }
            configureDevice(device: currentDevice!)
        }
        // キャプチャーの出力データを受け付けるオブジェクト
        var photoOutput : AVCapturePhotoOutput?
    
        // 入出力データの設定
        func setupInputOutput() {
            do {
                // 指定したデバイスを使用するために入力を初期化
                let captureDeviceInput = try AVCaptureDeviceInput(device: currentDevice!)
                // 指定した入力をセッションに追加
                captureSession.addInput(captureDeviceInput)
                // 出力データを受け取るオブジェクトの作成
                photoOutput = AVCapturePhotoOutput()
                // 出力ファイルのフォーマットを指定
                photoOutput!.setPreparedPhotoSettingsArray([AVCapturePhotoSettings(format: [AVVideoCodecKey : AVVideoCodecType.jpeg])], completionHandler: nil)
                captureSession.addOutput(photoOutput!)
            } catch {
                print(error)
            }
        }
        // プレビュー表示用のレイヤ
        var cameraPreviewLayer : AVCaptureVideoPreviewLayer?
    
        // カメラのプレビューを表示するレイヤの設定
        func setupPreviewLayer() {
            // 指定したAVCaptureSessionでプレビューレイヤを初期化
            self.cameraPreviewLayer = AVCaptureVideoPreviewLayer(session: captureSession)
            // プレビューレイヤがカメラのキャプチャーの縦横比を維持した状態で表示するように設定
            self.cameraPreviewLayer?.videoGravity = AVLayerVideoGravity.resizeAspectFill
            // プレビューレイヤの表示の向きを設定
            self.cameraPreviewLayer?.connection?.videoOrientation = AVCaptureVideoOrientation.portrait
    
            self.cameraPreviewLayer?.frame = view.frame
            self.view.layer.insertSublayer(self.cameraPreviewLayer!, at: 0)
        }
        
        //　画質、シャッタースピード、isoの設定
        func configureDevice(device: AVCaptureDevice) {
            if device.isFocusModeSupported(.continuousAutoFocus) {
                device.focusMode = .continuousAutoFocus
            }
            let shutterSpeed = CMTimeMake(value: 1, timescale: Int32(slider_value_speed))
            device.setExposureModeCustom(duration: shutterSpeed, iso: Float(slider_value_iso), completionHandler: nil)
            do{
                try device.lockForConfiguration()
                // フレームレート設定
                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!)
        }
    }
    
    
[/code]

現在、このアプリのandroid対応を検討しているのですが、メンテナンス性などを考慮して、cordovaやreact
nativeなどのクロスプラットフォームで、iOSとAndroidの両方に対応するカメラアプリを作成したいと考えています。  
カメラの映像を画面にプレビューしながら、その画面のフレームレートやカメラのシャッタースピード、iso値などをリアルタイムで変更できるアプリを開発したいと考えています。  
（以下のiOSアプリがイメージに近いです。）  
<https://apps.apple.com/jp/app/video-tachometer/id1492583587>

このようなアプリをクロスプラットフォームで開発しようと思うのですが、調査したところcordovaにもreact
nativeにもフレームレートやシャッタースピードなどを変更するためのプラグインなどが存在しないように見受けられました。

以下、調査したサイトの一部を掲載しておきます。

<https://github.com/cordova-plugin-camera-preview/cordova-plugin-camera-
preview>  
こちらはcordoaのカメラプラグインですが、露出やフォーカスの設定は可能ですがフレームレートの設定はできないように見受けられました。

<https://qiita.com/sugasaki/items/64111a0c316bfbb51e3f>  
こちらはreact nativeでのカメラ機能の実装についてですが、同様に該当する機能の設定項目は見受けられませんでした。

上記の機能をもったアプリを実現することのできるクロスプラットフォームやプラグインは存在するのでしょうか。

調査の段階ですので、やってみた項目を示すことが難しい状態にあります。  
（調査した全てのURLを掲載することも現実的ではありません。）  
そのため、情報をお持ちの方がいらっしゃいましたら共有いただけると非常にありがたいです。

よろしくお願いいたします。


CC BY-SA 4.0
2021-07-29T00:31:41.593
78450
2021-09-16T02:19:10.140
2021-07-30T06:50:13.207
46924
46924
question
ios android cordova flutter react-native
クロスプラットフォームで開発したアプリでカメラを起動して、プレビュー画面のフレームレートやシャッタースピードを変更したい。


React Native開発に何度か参加した経験がありますので、以下、React Nativeについて回答させていただきます。

仰る通り、[React Native Camera](https://github.com/react-native-camera/react-
native-camera)という代表的なカメラ用のパッケージには当該の機能がありません。  
[Issue](https://github.com/react-native-camera/react-native-
camera/issues/2093)でもそうした機能の要望が出ているのですが、無視されている状況です。  
[Expo](https://docs.expo.dev/versions/latest/sdk/camera/)という、こちらも非常に有名なReact
Native用のSDKも調べてみましたが、やはりありませんでした。

以下は私見になります。

React Nativeをはじめ、クロスプラットフォーム開発用のフレームワークの最大の魅力は、ネイティブコードをラップしてくれるところにあると思います。  
それによって開発速度を上げることができますが、  
欠点としてフレームワークや周辺ライブラリのAPIに縛られることになります  
（ネイティブモジュールを自作して拡張することはできますが、それだと本末転倒になるかと…）

そして何より、 **この手のAPIはあくまで一般的なアプリを想定** しており、マニアックな機能の実装には向かない傾向があるように思います。

私もかつてReact
Nativeのカメラアプリ開発に参加した際、どうしてもExifの編集をしなければならない要求があったのですが、パッケージをいくら探しても見つからず、結局ネイティブモジュールを追加する、という結果になりました。  
フレームレートやiso値の調整、といった機能も、どちらかといえば _プロ向け_ といいますか…おそらく探しても見つからないとは思います。

また[React Native](https://github.com/facebook/react-
native/issues)は（Githubを見る限り[Flutter](https://github.com/flutter/flutter/issues)も）、残念ながらパッケージ自体に不具合も多いです。  
バージョンアップで不具合が頻発するのは有名ですし、なにかあるたびに[patch-
package](https://github.com/ds300/patch-package)が必要になります。  
すなわち、将来的な保守性を考えると、むしろネイティブ実装の方が好ましい可能性もあります。  
パフォーマンスもネイティブに比べれば低めです。

もちろんこうしたフレームワークを使うことで、UIが共通化できたり、オーソドックスなアプリをすばやくローンチできる、等のメリットはあると思いますので、プロトタイピング段階では便利だとは思うのですが、  
m-mega様の場合はiOS側の実装はすでに完了しておられるようですし、  
要求仕様も特殊寄りだと思いますので、  
学習コストが少々かかってでもAndroidネイティブ実装を試みた方が良いのでは、とは思います。


CC BY-SA 4.0
2021-09-16T02:19:10.140
82525
2021-09-16T02:19:10.140
48233
78450
answer