Titanium Mobile にデフォルトで用意されている Ti.Media.showCamera とはひと味ちがう TiCameraView モジュールを作ってみました。 このモジュールのソースコードは GitHub にありますのでご自由にお使いください。 k0sukey/TiCameraView

TiCameraView はカメラからの画像をリアルタイムに Ti.UI.ImageView へ流し込むモジュールです。 Ti.Media.showCamera では API をコールするとカメラ専用のピッカーが表示されてしまいますが、TiCameraView は通常のウィンドウへ(もちろんビューにも)直に貼り付けることができます。

TiCameraView

機能

Ti.Media.showCamera とほとんど同じことができます。

  • 写真撮影
  • 動画撮影
  • カメラの切り替え

将来的に追加したい機能は以下の通りです。

  • 動画撮影時に音声も
  • オーバレイしている Ti.UI.Label や Ti.UI.ImageView の合成(現状 add することはできますが、撮影された写真や動画に合成することはできません)

使い方

詳しくは GitHub のレポジトリにある example/app.js をご覧ください。 できることはひと通り網羅してあります。

CameraView の作り方

Titanium Mobile の UI パーツと同じように、モジュールを reauire したら createView() すれば OK です。 簡単ですね。

var win = Ti.UI.createWindow();

var TiCamera = require('be.k0suke.ticamera');
var cameraView = TiCamera.createView({
	width: 240,
	height: 320,
	backgroundColor: '#000',
	videoQuality: TiCamera.QUALITY_MEDIUM,
	cameraPosition: TiCamera.hasFrontCamera() ? TiCamera.CAMERA_FRONT : TiCamera.CAMERA_BACK,
	frameDuration: 16
});
win.add(cameraView);

win.open();

videoQualitycameraPositionframeDuration が TiCameraView 用の特別なプロパティになります。 videoQuality は Ti.Media.showCamera のプロパティと同等のもの、cameraPosition はフロント / バックカメラの初期値になります。 frameDuration は fps ですね。 値を小さくするとカクカクに、大きくすると滑らかになりますが、16 〜 30 程度を目安に調整してください。

写真の撮影

Ti.Media.showCamera と同じように、success / error コールバックを指定しながら撮影することができます。 一点、異なる点は shutterSound ですね。 シャッター音のオン / オフを指定することができます。 オフにすると無音カメラにできてしまいますが、ご利用はご自身の責任でお願いします。

cameraView.takePicture({
	saveToPhotoGallery: true,	// default false
	shutterSound: false,		// default true
	success: function(e){
		// e.media(TiBlob), like Ti.Media.showCamera
	},
	error: function(e){
	}
});

シャッター音をオフにしながら setInterval で連続撮影してみたりすると、QR コードを読み取るカメラができそうですね。 ただ、setInterval しながら saveToPhotoGallery を true にすると、カメラロールが大惨事になることがありますのでご注意ください。 もしかしたら定期的に写真を取得できるイベントリスナを作るかもしれません。 そちらのほうが現実的ですよね。

動画の撮影

こちらも Ti.Media.showCamera と同じように、success / error コールバックを指定しながら撮影することができます。 recordingSound で撮影音のオン / オフができます。 こちらも無音カメラにできてしまいますので、ご利用はご自身の責任でお願いします。

cameraView.startRecording({
	recordingSound: false		// default true
});

cameraView.stopRecording({
	saveToPhotoGallery: true,	// default false
	recordingSound: false,		// default true
	success: function(e){
		// e.media(TiBlob), like Ti.Media.showCamera
	},
	error: function(e){
	}
});

startRecording() メソッドで撮影を開始して、stopRecording() で完了します。 もちろん startRecording() の前に stopRecording() はできません。 example/app.js では、撮影後に Ti.Media.videoPlayer で撮影した動画を再生していますので参考にしてみてください。

プロパティとメソッド

プロパティ

videoQuality

createView() する際に指定してください。 TiCamera.QUALITY_PHOTO / QUALITY_HIGH / QUALITY_MEDIUM / QUALITY_LOW / QUALITY_640x480 / QUALITY_1280x720 から選択してください。

cameraPosition

createView() する際に指定してください。 TiCamera.CAMERA_FRONT / CAMERA_BACK のどちらかを選択してください。 フロント / バックのカメラが端末でサポートされているかは、TiCamera.hasFrontCamera() / hasBackCamera() メソッドで調べることができます。

frameDuration

createView() する際に指定してください。 16 〜 30 程度を目安に fps を指定します。

メソッド

createView

TiCameraView を作ります。

hasFrontCamera / hasBackCamera

フロント / バックのカメラが端末でサポートされているか調べることができます。

toggleCamera

フロント / バックのカメラを交互に切り替えることができます。

takePicture

写真を撮影することができます。 このメソッドは createView() で作った TiCameraView で利用してください。

startRecording / stopRecording

動画を撮影することができます。 cameraView.startRecording() で撮影を開始し、cameraView.stopRecording() で完了します。 このメソッドは createView() で作った TiCameraView で利用してください。

参考にさせていただいたサイト

Date
June 23, 2013
Tags
Author
いそべこーすけ