Capture APIでビデオ録画
次に、Capture APIを使ってビデオを録画してみましょう。以下のメソッドを使います。
navigator.device.capture.captureVideo()
前のサンプルで紹介したcaptureAudio()が、captureVideo()になっただけで、指定する引数も同じです。HTMLでは表示するための要素をaudioからvideoに変更しておきます。
<video src="" id="myVideo" width="120" height="120" controls></video>
ビデオ録画が終了したら映像データをvideo要素のsrc属性に入れます。これで録画した映像が再生できるようになります。
document.getElementById("myVideo").src = mediaFiles[0].fullPath;
実際のプログラムは以下のようになります。
Capture APIでビデオ録画するプログラム
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.6.min.js"></script>
<script type="text/javascript" charset="utf-8">
// Capture APIで録画
function captureVideo() {
navigator.device.capture.captureVideo(captureSuccess, captureError);
}
function captureSuccess(mediaFiles) {
document.getElementById("myVideo").src = mediaFiles[0].fullPath;
}
function captureError(error) {
alert("Error !!："+error.code);
}
</script>
</head>
<body>
<h1>CaptureAPIで録画</h1>
<div>
<button onclick="captureVideo()">ビデオ録画開始</button>
</div>
<video src="" id="myVideo" width="120" height="120" controls></video>
</body>
</html>
作成したプログラムを実機に転送して、実際にビデオを録画できるか確認しましょう。これまでと同じ手順で、アプリを実機に転送します。なお、初代iPadはカメラ機能がないので利用できません。
アプリが起動すると以下の図のようになります。「ビデオ録画開始」ボタンをタップすると撮影画面に切り替わります。
「ビデオ録画開始」ボタンをタップ
撮影画面に切り替わる
ビデオ撮影の画面はiOS標準のUIですので、前面／背面カメラの切り替えやフラッシュ点灯なども設定できます。画面下の録画ボタン（赤い丸のボタン）をタップすると録画が開始されます。
録画ボタンをタップすると録画が開始される
再度、録画ボタンをタップすると録画が完了します。しばらくすると図のような画面になります。撮影し直す場合は「Reatke」ボタンを、このまま使用する場合は「Use」ボタンをタップします。
撮影したビデオを使う場合にはUseボタンをタップ
すると元の画面に戻ります。数秒ほどすると画面のvideo要素部分に、撮影したビデオが表示されます。
撮影したビデオが表示される
再生ボタンをタップすると、画面が切り替わって撮影したビデオが再生されます。
録画したビデオが再生される
