0

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

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!)
    }
}

現在、このアプリの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を掲載することも現実的ではありません。)
そのため、情報をお持ちの方がいらっしゃいましたら共有いただけると非常にありがたいです。

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

1 件の回答 1

3

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

仰る通り、React Native Cameraという代表的なカメラ用のパッケージには当該の機能がありません。
Issueでもそうした機能の要望が出ているのですが、無視されている状況です。
Expoという、こちらも非常に有名なReact Native用のSDKも調べてみましたが、やはりありませんでした。

以下は私見になります。

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

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

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

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

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

1
  • ご丁寧にご回答いただき誠にありがとうございます! また、詳細に調査していただきありがとうございました。 そうですね、ご指摘いただいた通り汎用的なアプリを作成する場合にクロスプラットフォームを活用する方が良いようですね。 また、助言いただいたように現在はAndroidネイティブでの実装も目指して勉強中です。 その証拠と言ってはなんですが、開発につまずくことが多々ございまして、teratailでいくつか質問を投稿しております。 teratailでの質問の1つ 引き続き開発を進めていこうと思います。 この度はご回答いただき誠にありがとうございました。
    – m-mega
    Commented 2021年9月16日 9:28

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。