オーディオ録音またはビデオ録画の方法 (HTML)

  • [アーティクル]

[ この記事は、Windows ランタイム アプリを作成する Windows 8.x および Windows Phone 8.x 開発者を対象としています。Windows 10 向けの開発を行っている場合は、「最新のドキュメント」をご覧ください]

カメラからビデオを録画したり、マイクからオーディオを録音したりできます。

手順

MediaCaptureSettings を初期化する

MediaCaptureSettings プロパティにより、MediaCapture オブジェクトの構成設定が提供されます。MediaCaptureInitializationSettings クラスを使って、次の例に示すように、これらのプロパティを初期化します。

// Initialize the MediaCaptureInitialzationSettings.
function initCaptureSettings() {
    captureInitSettings = null;
    captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
    captureInitSettings.audioDeviceId = "";
    captureInitSettings.videoDeviceId = "";
    captureInitSettings.streamingCaptureMode = Windows.Media.Capture.StreamingCaptureMode.audioAndVideo;
    captureInitSettings.photoCaptureSource = Windows.Media.Capture.PhotoCaptureSource.videoPreview;
    if (deviceList.length > 0)
        captureInitSettings.videoDeviceId = deviceList[0].id;
}

MediaCapture オブジェクトを作る

MediaCapture オブジェクトには、ビデオをキャプチャするのに必要なメソッドと非同期操作が含まれます。

    oMediaCapture = new Windows.Media.Capture.MediaCapture();

MediaCapture オブジェクトを初期化する

MediaCapture.InitializeAsync メソッドを使って MediaCapture オブジェクトを初期化します。既定では、InitializeAsync は既定のビデオ キャプチャ デバイスを使い、オーディオまたはビデオをキャプチャします。または、独自の MediaCaptureInitializationSettings オブジェクトを作って初期化し、それを InitializeAsync メソッドに渡すこともできます。

// Create and initialze the MediaCapture object.
function initMediaCapture() {
    oMediaCapture = null;
    oMediaCapture = new Windows.Media.Capture.MediaCapture();
    oMediaCapture.initializeAsync(captureInitSettings).then (function (result) {
       createProfile();
    }, errorHandler);    
}

エンコード プロファイルを作る

エンコード プロファイルには、出力先ファイルのエンコード方法に関するすべての設定が含まれています。Windows.Media.MediaProperties API には、MediaEncodingProfile オブジェクトを作成するためのさまざまなオプションが用意されています。

Windows.Media.MediaProperties 名前空間には、あらかじめ定義されたエンコード プロファイルのセットが用意されています。

  • AAC オーディオ (M4A)
  • MP3 オーディオ
  • Windows Media Audio (WMA)
  • MP4 ビデオ (H.264 ビデオと AAC オーディオ)
  • Windows Media Video (WMV)

このリストで最初の 3 つのプロファイルには、オーディオのみが含まれます。残りの 2 つには、ビデオとオーディオが含まれています。

次のコードでは、MP4 ビデオ用のプロファイルが作成されます。

// Create a profile.
function createProfile() {
    profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
        Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);
}

静的 CreateMp4 メソッドは、MP4 エンコード プロファイルを作ります。このメソッドのパラメーターで、ビデオのターゲット解像度を指定します。この場合の VideoEncodingQuality.HD720p は、1280 x 720 ピクセルで 1 秒あたり 30 フレームであることを意味します ("720p" は、プログレッシブ スキャン方式で 1 フレームあたり 720 本を処理することを表します)。あらかじめ定義されたプロファイルを作るその他のメソッドは、すべてこのパターンに従います。

別の方法として、Windows.Media.MediaProperties.MediaEncodingProfile.CreateFromFileAsync メソッドを使って現在のメディア ファイルに一致するプロファイルを作成することもできます。または、必要なエンコード設定が正確にわかれば、新しい Windows.Media.MediaProperties.MediaEncodingProfile オブジェクトを作り、プロファイルのすべての詳細を入力できます。

録音を開始する

ビデオのファイルへのキャプチャを開始するには、キャプチャしたビデオ用のファイルを作ります。次に、StartRecordToStorageFileAsync メソッドを呼び出し、MediaEncodingProfile と出力先のストレージ ファイルを渡します。

// Start the video capture.
function startMediaCaptureSession() {
   Windows.Storage.KnownFolders.videosLibrary.createFileAsync("cameraCapture.mp4", Windows.Storage.CreationCollisionOption.generateUniqueName).then(function (newFile) {
        storageFile = newFile;
        oMediaCapture.startRecordToStorageFileAsync(profile, storageFile).then(function (result) {           
           
        }, errorHandler);
    }  );   
}

録音を停止する

ビデオのキャプチャを停止するには、StopRecordAsync メソッドを呼び出します。

// Stop the video capture.
function stopMediaCaptureSession() {
    oMediaCapture.stopRecordAsync().then(function (result) {
        
    }, errorHandler);         
}

完全な例

次の例は、ビデオをファイルに録画するときの手順をまとめて示しています。


var oMediaCapture;
var profile;
var captureInitSettings;
var deviceList = new Array();
var recordState = false;
var storageFile;



function errorHandler(e) {
    sdkSample.displayStatus(e.message + ", Error Code: " + e.code.toString(16));
}



// Begin initialization.
function initialization() {
    document.getElementById("message").innerHTML = "Initialization started.";
    enumerateCameras();   
}


// Identify available cameras.
function enumerateCameras() {
    var deviceInfo = Windows.Devices.Enumeration.DeviceInformation;
    deviceInfo.findAllAsync(Windows.Devices.Enumeration.DeviceClass.videoCapture).then(function (devices) {
        // Add the devices to deviceList
        if (devices.length > 0) {
           
            for (var i = 0; i < devices.length; i++) {
                deviceList.push(devices[i]);              
            }
     
            initCaptureSettings();
            initMediaCapture();
            document.getElementById("message").innerHTML = "Initialization complete.";

        } else {
            sdkSample.displayError("No camera device is found ");            
        }
    }, errorHandler);
}


// Initialize the MediaCaptureInitialzationSettings.
function initCaptureSettings() {
    captureInitSettings = null;
    captureInitSettings = new Windows.Media.Capture.MediaCaptureInitializationSettings();
    captureInitSettings.audioDeviceId = "";
    captureInitSettings.videoDeviceId = "";
    captureInitSettings.streamingCaptureMode = Windows.Media.Capture.StreamingCaptureMode.audioAndVideo;
    captureInitSettings.photoCaptureSource = Windows.Media.Capture.PhotoCaptureSource.videoPreview;
    if (deviceList.length > 0)
        captureInitSettings.videoDeviceId = deviceList[0].id;
}


// Create a profile.
function createProfile() {
    profile = Windows.Media.MediaProperties.MediaEncodingProfile.createMp4(
        Windows.Media.MediaProperties.VideoEncodingQuality.hd720p);
}

// Create and initialze the MediaCapture object.
function initMediaCapture() {
    oMediaCapture = null;
    oMediaCapture = new Windows.Media.Capture.MediaCapture();
    oMediaCapture.initializeAsync(captureInitSettings).then (function (result) {
       createProfile();
    }, errorHandler);    
}


// Start the video capture.
function startMediaCaptureSession() {
   Windows.Storage.KnownFolders.videosLibrary.createFileAsync("cameraCapture.mp4", Windows.Storage.CreationCollisionOption.generateUniqueName).then(function (newFile) {
        storageFile = newFile;
        oMediaCapture.startRecordToStorageFileAsync(profile, storageFile).then(function (result) {           
           
        }, errorHandler);
    }  );   
}

// Stop the video capture.
function stopMediaCaptureSession() {
    oMediaCapture.stopRecordAsync().then(function (result) {
        
    }, errorHandler);         
}

MediaCapture リソースを適切にクリーンアップする

警告  

アプリの中断時に MediaCapture オブジェクトと関連するオブジェクトを適切にシャットダウンし、破棄することが非常に重要です。これを怠ると、デバイスのカメラにアクセスする他のアプリに干渉し、その結果アプリのユーザー エクスペリエンスに悪影響を及ぼす可能性があります。

Windows Phone では、oncheckpoint アプリ有効期間イベントのハンドラーで、MediaCapture リソースをクリーンアップします。Windows では、SoundLevelChanged イベントを使って、音量がミュートしたかどうかをチェックします。ミュートされている場合は、MediaCapture リソースをクリーンアップします。イベントが示す音量が異なる場合は、そのイベントを使って再作成します。アプリの実行中に手動でサウンドのミュートをオンまたはオフにしても、このイベントはコードをトリガーしないことに注意してください。したがってこのイベントは、電話での中断と再開と同じ目的のために効果的に対応します。Windows では、現在のアプリを中断することなくユーザーがアプリを切り替えることができるために、この処理が必要です。

 

前のメモのガイダンスで説明したように、Windows Phone では oncheckpoint イベント、Windows では SoundLevelChanged で、メディア キャプチャ リソースをクリーンアップする必要があります。このための適切な方法は、アプリが現在ビデオを記録またはプレビューしているかどうかを示す MediaCapture オブジェクトとブール値を保存するために、いくつかの変数を宣言することです。次に、記録またはプレビューが進行中である場合にそれを停止し、MediaCapture オブジェクトの close メソッドを呼び出して、null を設定する関数を作ります。次のコード例は、このメソッドの実装例を示しています。

function cleanupCaptureResources()
{
    var promises = [];

    if (mediaCapture) {
        if (isRecording) {
            promises.push(mediaCapture.stopRecordAsync().then(function () {
                isRecording = false;
            }));
        }

        promises.push(new WinJS.Promise(function (complete) {
            mediaCapture.close();
            mediaCapture = null;
            complete();
        }));
    }

    return WinJS.Promise.join(promises).done(null, errorHandler);
}

最後に、oncheckpoint イベント ハンドラーに次のコードを追加します。クリーンアップ メソッドを呼び出すために promise を使うことが非常に重要です。これによって、アプリを中断する前に、システムでメソッドを確実に完了できます。

app.oncheckpoint = function (args) {
    args.setPromise(
        cleanupCaptureResources()
    );
};

関連トピック

メディアのキャプチャのサンプル