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