Skip to main content
本文に 5595 文字追加
ソース リンク

cordovaiOSアプリでカメラの映像をプレビューして、リアルタイムで画面のフレームレートやカメラのシャッタースピ―ド、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を掲載することも現実的ではありません。)
そのため、情報をお持ちの方がいらっしゃいましたらご教授共有ただけますただける幸い非常にありがたいです。
よろしく

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

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

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

上記の機能をもったアプリを実現することのできるクロスプラットフォームやプラグインをご存知の方がいらっしゃいましたらご教授ただけます幸いです。
よろしくお願いいたします。

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

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

タグを編集
リンク
ソース リンク

クロスプラットフォームで開発したアプリでカメラを起動して、プレビュー画面のフレームレートやシャッタースピードを変更したい。

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

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

上記の機能をもったアプリを実現することのできるクロスプラットフォームやプラグインをご存知の方がいらっしゃいましたらご教授いただけますと幸いです。
よろしくお願いいたします。