如何鏡像處理視訊 (HTML)

發行項
02/12/2016

[ 本文的目標對象是撰寫 Windows 執行階段 App 的 Windows 8.x 和 Windows Phone 8.x 開發人員。如果您正在開發適用於 Windows 10 的 App，請參閱最新文件 ]

鏡像處理預覽影像對於視訊會議和視訊交談應用程式非常有用。通常使用者會想看到自己反射的影像。「正確」(非鏡像的) 檢視可能看起來很奇怪，因為我們習慣在鏡子中看到自己。

注意您可以使用 SetPreviewMirroring 和 GetPreviewMirroring (如下述指示所說明)，水平翻轉預覽影像。但是，對於使用 JavaScript 的 Windows 執行階段應用程式來說，鏡像處理預覽視訊的慣用且最有效率的方法是改用 video 物件的 msHorizontalMirror 屬性。

指示

步驟 1: 建立 MediaCapture 物件

MediaCapture 物件包含方法、屬性以及非同步作業 (初始化非同步、啟動、停止等等)，當您在鏡像處理預覽影像時都會用到這些作業。

    oMediaCapture = new Windows.Media.Capture.MediaCapture();
    oMediaCapture.initializeAsync().then(function (result) {

步驟 2: 設定預覽鏡像

MediaCapture 類別提供用以管理預覽影像水平方向的方法。 GetPreviewMirroring 指出預覽鏡像是否要鏡像處理。SetPreviewMirroring 啟用或停用視訊預覽串流的水平鏡像。

這個範例會查詢水平鏡像是否已啟用。如果水平鏡像已停用，則會啟用。

    if( !oMediaCapture.getPreviewMirroring() )
        oMediaCapture.setPreviewMirroring(true);

步驟 3: 開始預覽

若要開始預覽視訊，請呼叫 startPreviewAsync 方法。

// Start Previewing
await _mediaCapture.StartPreviewAsync();
(App.Current as App).IsPreviewing = true;

    // Start Previewing
    var startPreviewOperation = oMediaCapture.startPreviewAsync();

步驟 4: 停止預覽

若要停止預覽，請呼叫 StopPreviewAsync 方法。

    // Set the handler for the StopPreviewOperation.    
    var stopPreviewOperation = oMediaCapture.stopPreviewAsync();

步驟 5: 完整範例

這個範例示範如何利用水平鏡像來預覽視訊。這個範例的進入點是 StartPreview 函式。這個函式會呼叫一個函式，讓它啟用水平鏡像以及建立 startPreviewOperation 的處理常式，以開始預覽。

var oMediaCapture;
var profile;

function turnMirroringOn()
{
    if( !oMediaCapture.getPreviewMirroring() )
        oMediaCapture.setPreviewMirroring(true);
}

function OnStartPreviewComplete(startPreviewOperation)
{
    // This method does not return a value.
    //
    startPreviewOperation.GetResults();
    // Set the handler for the StopPreviewOperation.    
    var stopPreviewOperation = oMediaCapture.stopPreviewAsync();

    stopPreviewOperation.Completed = OnStopPreviewComplete;
    stopPreviewOperation.Start();

    startPreviewOperation.Close();
}

function OnStopPreviewComplete(stopPreviewOperation)
{
    // This method does not return a value.
    //
    stopPreviewOperation.GetResults();

    stopPreviewOperation.Close();
}

function startPreview()
{

    oMediaCapture = new Windows.Media.Capture.MediaCapture();
    oMediaCapture.initializeAsync().then(function (result) {
        createProfile();
    }, errorHandler);
    // Enable horizontal mirroring.
    //
    turnMirroringOn();

    // Start Previewing
    var startPreviewOperation = oMediaCapture.startPreviewAsync();
    startPreviewOperation.Completed = OnStartPreviewComplete;
    startPreviewOperation.Start();
}

共用方式為