読者です 読者をやめる 読者になる 読者になる

アプリカンブログ

HTML5でiOS/Androidアプリが開発できるプラットフォーム、アプリカンのブログです。

リファレンスより。アプリカンを使ってデバイスのカメラ、オーディオ、ビデオカメラを使ってみよう

アプリカンのリファレンスページではAPIの説明と共に、そのAPIを使うためのサンプルプロジェクトを公開しています。

今回はその中からCapture APIを使ったカメラ、ビデオカメラの使い方を紹介します。

必要なもの

プロジェクトのダウンロード

Capture | アプリカン | アプリ開発支援プラットフォームにてサンプルをダウンロードをクリックします。

f:id:moongift:20150615172709p:plain

アプリカンにログイン

アプリカン | アプリ開発支援プラットフォームへ行き、右上にある会員登録をクリックします。既に会員登録済みの場合はログインをクリックします。

f:id:moongift:20150510221355p:plain

新規プロジェクト作成

会員登録、ログイン後に表示されるプロジェクト一覧ページにて、新しいプロジェクトを作成ボタンをクリックします。

f:id:moongift:20150510221412p:plain

プロジェクト名は「CaptureDemo」として、対象デバイスは必要なものを選択してください。そして作成ボタンをクリックします。

f:id:moongift:20150510221433p:plain

作成されると、CaptureDemoのプロジェクト画面に移動します。

f:id:moongift:20150510221449p:plain

コードのアップロード

プロジェクト画面左にあるアップロードをクリックします。

f:id:moongift:20150510221511p:plain

そしてアップロードと書かれている枠の中に、先ほどダウンロードしたweb.zipをドラッグ&ドロップしてください。

f:id:moongift:20150510221528p:plain

アップロードが完了すると、追加されましたというメッセージが出ます。そして、その下にある公開ボタンをクリックします。

f:id:moongift:20150510221549p:plain

そして公開するボタンをクリックしてください。

f:id:moongift:20150510221604p:plain

更新されました、と表示されれば準備は完了です。

f:id:moongift:20150510221619p:plain

アプリカンシミュレータのインストール

iOSのApp StoreまたはAndroidのGoogle Playにて applican と検索してアプリカンシミュレータをインストールしてください。

f:id:moongift:20150510221634p:plain

アプリカンシミュレータで確認

アプリカンシミュレータを起動すると、まずログイン画面が表示されます。会員登録したログインID、パスワードでログインします。

f:id:moongift:20150510221648p:plain

そうすると登録しているプロジェクトが一覧表示されますので、CaptureDemoを選択します。

f:id:moongift:20150615172750p:plain

以下がCaptureDemoを実行した時の画面です。

f:id:moongift:20150615172801p:plain

カメラを使って静止画、動画が取得できます。Androidであれば音声の録音もできます。

f:id:moongift:20150615172821p:plain

写真を撮影した場合です。

f:id:moongift:20150615172858p:plain

動画の場合、初回にマイクへのアクセス権が求められます。

f:id:moongift:20150615172916p:plain

Capture APIの使い方

Capture APIはデバイスのオーディオ、カメラ、ビデオカメラを使ってマルチメディアデータを作成します。

まずはオーディオ録音アプリを使ったサンプルです。なおこの機能はAndroidのみサポートされています。

//オーディオ録音
function captureAudio(){
    applican.capture.captureAudio(captureAudioSuccess, captureAudioError);
}
function captureAudioSuccess(mediaFiles){
    var dump = "captureAudioSuccess\n";
    for (i=0, len=mediaFiles.length; i<len; i++) {
        dump += mediaFiles[i].fullPath;
    }
    document.getElementById("dumpAreaCapture").value = dump; 
}
function captureAudioError(err){
    var dump = "captureAudioError\n";
    dump += "code:"+err.code+"\n";
    dump += "message:"+err.message+"\n";
    document.getElementById("dumpAreaCapture").value = dump; 
}

次に動画の撮影です。

//動画撮影
function captureVideo(){
    applican.capture.captureVideo(captureVideoSuccess, captureVideoError);
}
function captureVideoSuccess(mediaFiles){
    var dump = "captureVideoSuccess\n";
    for (i=0, len=mediaFiles.length; i<len; i++) {
        dump += mediaFiles[i].fullPath;
    }
    document.getElementById("dumpAreaCapture").value = dump; 
}
function captureVideoError(err){
    var dump = "captureVideoError\n";
    dump += "code:"+err.code+"\n";
    dump += "message:"+err.message+"\n";
    document.getElementById("dumpAreaCapture").value = dump; 
}

最後に静止画の取得です。これは写真と同じような感じになります。

//画像撮影
function captureImage(){
    applican.capture.captureImage(captureImageSuccess, captureImageError);
}
function captureImageSuccess(mediaFiles){
    var dump = "captureImageSuccess\n";
    for (i=0, len=mediaFiles.length; i<len; i++) {
        dump += mediaFiles[i].fullPath+"\n";
    }
    document.getElementById("dumpAreaCapture").value = dump; 
            
}
function captureImageError(err){
    var dump = "captureImageError\n";
    dump += "code:"+err.code+"\n";
    dump += "message:"+err.message+"\n";
    document.getElementById("dumpAreaCapture").value = dump; 
}

これだけでは写真を撮るのと同じですが、Captureの場合はさらに写真の上に他の画像を重ねることもできます。

function captureWithOverlay() {
    //パラメータ
    var options = 
    {
        overlayImage:   "./img/kitten01.png",
        mode:           "base64",
        fill:           "true",
        keepAspectRatio:"true"
    };

    applican.capture.captureWithOverlay(captureWithOverlaySuccess, captureWithOverlayFailure, options);
}

// 成功コールバック
function captureWithOverlaySuccess(res){

    var dump = "captureWithOverlaySuccess\n";
    dump += "result:"+res+"\n";
    document.getElementById("dumpAreaCapture").value = dump;
 
    var image = document.getElementById('myImage');
    image.src = "data:image/jpeg;base64," + res;
}
// エラーコールバック
function captureWithOverlayFailure(err){
    var dump = "captureImageError\n";
    dump += "code:"+err.code+"\n";
    dump += "message:"+err.message+"\n";
    document.getElementById("dumpAreaCapture").value = dump; 
}

カメラアプリとは異なる形でマルチメディアのデータを使ったアプリを作る際にはぜひCapture APIを使ってみて下さい。


アプリカンを使うとこのような動きを伴うアプリケーションがとても簡単にできるようになります。ぜひ皆さんのアプリの中で使ってください。

アプリカン | アプリ開発支援プラットフォーム