カメラ制御

カメラ制御の一連のサンプルは、ハードウェアAPIを使用する方法を示します。このサンプルは4つのパートに分かれており、各パートでAPIの異なる機能(ネイティブとJavaScriptの両方)について説明します。一連のサンプルの終わりには、APIの概要が一通り理解できます。

このサンプルは以下の3つのパートで構成されています。

カメラの設定方法

のシリーズの最初の部分では、Wikitude SDKで可能なことの概要を紹介します。

カメラの位置

カメラの位置は、前面、背面のカメラを起動するかどうかを定義します。これは、WTWTArchitectStartupConfiguration.captureDevicePosition または、AR.hardware.camera.positionを使用して設定できます。

カメラフォーカスモード

カメラのフォーカスモードは、カメラが内部的に使用するフォーカスモードを定義します。これは WTArchitectStartupConfiguration.captureDeviceFocusMode または AR.hardware.camera.focusModeを使用して設定できます。 カメラフォーカスモードは、以下のモードのいずれかになります。

  • Continuous(連続):デバイスがサポートしている場合はデフォルト。このモードではカメラは必要に応じて自動的に再フォーカスしようとします。
  • ONCE(一度):現在のビューでカメラを一度再フォーカスさせることができます。フォーカスを変更する必要が ある場合は、この値を再度設定できます。ONCEの値が設定されるたびに、カメラは現 在のシーンに再びフォーカスしようとします。
  • OFF: オートフォーカスを無効にし、指定された手動フォーカス距離にフォーカスを合わせます。

手動カメラフォーカス

焦点距離は0から1の範囲であり、0は最も近い焦点 、1は無限遠焦点です。 これは、 WTArchitectStartupConfiguration.captureDeviceFocusDistanceまたは、AR.hardware.camera.focusDistanceを使用して設定できます。

カメラの解像度

WTArchitectStartupConfiguration.captureDeviceResolutionを使用して設定でき、実行時に変更することはできません。 推奨値は次のとおりです。

推奨値 Geo Image Tracking Extended Tracking Cloud Recognition Instant Tracking
WTCaptureDeviceResolution AUTO AUTO SD_640x480 SD_640x480 SD_640x480

この設定はarmv8デバイスでのみ使用され、他のすべてのアーキテクチャはデフォルトでSD_640x480になります。

カメラフレームレート

カメラのフレームレートは30または60 fpsに設定できます。60 fpsを選択すると、60 fpsが可能になるようにカメラの解像度が変更されることがあります。

サポートされている最初の組み合わせは、SDKによって使用されます。

  • FullHD 60 fps
  • HD 60 fps
  • SD 60 fps
  • FullHD 30 fps
  • HD 30 fps
  • SD 30 fps

WTArchitectStartupConfiguration.targetFrameRateを使用して設定できます。

カメラズーム

デジタルズームは、AR.hardware.camera.zoomを使用して制御できます。

フラッシュライト

フラッシュライトは、AR.hardware.camera.flashlight.使用してオンとオフを切り替えることができます。

フロントカメラの使用方法

対応するサンプルタイトル名「Front Camera」

サンプルの最初のパートでは、デバイスのフロントカメラ(搭載されている場合)を使用して8つのコンパス方位にPOIデータを表示します。各POIデータはローカルリソースのJSONファイルからロードし、POIデータごとに異なるオフセット値を使用してユーザーの周囲の異なる方向に配置します。

POIデータをローカルリソースからロードしてARchitectViewに表示する方法は、基となるPOIデータの取得方法サンプルですでに説明しました。

このサンプルは、デバイスのフロントカメラを使用してARchitectViewを初期化する方法を示します。

-start:completion:メソッドで指定したWTStartupConfigurationオブジェクトを使用して、起動時にフロントカメラをアクティブにするようSDKを構成できます。-start:completionメソッドに渡す最初のブロックでは、構成済みのStartupConfigurationオブジェクトを指定します。このオブジェクトを使用して任意のデフォルト値を変更できます。SDKによるレンダリングが開始される前に、このオブジェクトを使用して、上書きされる設定が決定されます。実装例を以下に示します。

[self.architectView start:^(WTStartupConfiguration *configuration) {
    configuration.captureDevicePosition = AVCaptureDevicePositionFront; // The front camera is used when the SDK starts
} completion:^(BOOL isRunning, NSError *error) {
    if ( !isRunning )
    {
        NSLog(@"Wikitude SDK is not started. Reason: %@", [error localizedDescription]);
    }            
}];

2番目のブロックでは、起動中に発生したエラーに対処するコードを記述できます。SDKが実行されない場合、実行状態を表すBOOLNSErrorオブジェクトがこのブロックに渡されます。

カメラの切り替え方法

対応するサンプルタイトル名「Camera Switching」

2番目のパートでも同じPOIデータを使用しますが、ARchitectViewはデフォルト構成で起動します。

ユーザーは[Switch Camera]ボタンを押してフロントカメラとバックカメラを切り替えることができます。ボタンはindex.htmlで定義されており、クリック時にWorld.switchCam()を呼び出します。

    /*
     * Switch between front and back camera
     */
    switchCam: function switchCamFn() {
        if (AR.hardware.camera.position == AR.CONST.CAMERA_POSITION.FRONT) {
            AR.hardware.camera.position = AR.CONST.CAMERA_POSITION.BACK
        } else {
            AR.hardware.camera.position = AR.CONST.CAMERA_POSITION.FRONT            
        }
    }
ソースコードをGitHubで見る

また、Markerコンストラクター関数により、マーカーのタイトルおよび説明のmirroredフラグが設定されます。実装方法の詳細については、marker.jsを参照してください。奇数番のPOIデータはタイトルが鏡像反転し、偶数番のPOIデータは説明が鏡像反転します。

このフラグは、バックカメラを通してARchitect Worldを見たときには効果がありません。フロントカメラを使用すると、LabelオブジェクトとHTMLDrawableオブジェクトを除くすべてのオブジェクトがカメラ画像のように鏡像反転します。mirroredフラグを設定することで、このデフォルトの動作をオーバーライドできます。

高度なカメラ機能の使用方法

対応するサンプルタイトル名「Camera Control」

3番目のサンプルは、ハードウェアアクセスAPIの残りの機能の使用方法を示します。

[Camera Info]ボタンを押すと、デバイスのカメラで使用可能なハードウェア機能に関する情報が表示されます。

    // display camera info panel
    showCamInfo: function showCamInfoFn() {
        // update panel values
        var features = AR.hardware.camera.features;
        $("#camera-focus-modes").html(features.focusModes.join());
        $("#camera-positions").html(features.positions.join());
        $("#camera-zoom-max").html(Math.round(features.zoomRange.max));
        // show panel
        $("#panel-caminfo").panel("open", 123);
    }
ソースコードをGitHubで見る

[Camera Control]ボタンを押すと別のパネルが表示され、その他の使用可能なコントロールが表示されます。

  • Zoom(初期設定は1): ズーム倍率の範囲は1~最大値(デバイスの能力によって異なります)です。
  • Autofocus: オンにすると、カメラの連続オートフォーカス機能が有効になります。オフにすると、カメラのフォーカスは現在フレーム内にある被写体に固定されます。
  • Manual Focus Distance:(初期設定は0): マニュアルフォーカス距離の範囲は0.0~1.0です。
  • Flashlight: このボックスをオンにすると、フラッシュのオン/オフを切り替えることができます。

カメラのズームを使用するには、AR.hardware.camera.zoomの 値を取得または変更します。

        // updates values shown in "control panel"
        updateRangeValues: function updateRangeValuesFn() {
            // get current slider value (0..100);
            var slider_value = $("#panel-zoom-range").val();
            // zoom level (1 up to max available)
            var maxRangeValue = Math.round((AR.hardware.camera.features.zoomRange.max - 1) * (slider_value / 100) + 1);
            // update UI labels accordingly
            $("#panel-zoom-value").html(maxRangeValue);
            AR.hardware.camera.zoom = maxRangeValue;
        },
    
    ソースコードをGitHubで見る

     AR.hardware.camera.focusMode 値はカメラのフォーカスモードを表しており、AR.CONST.CAMERA_FOCUS_MODE.CONTINUOUSま たはAR.CONST.CAMERA_FOCUS_MODE.ONCEに設定できます。

    デバイスが連続モードをサポートしている場合は、このモードがデフォルトになります。このモードでは、必要なときにフォーカスが自動調整されます

    フォーカスモードをONCEに設定すると、フォーカスが現在のビューに合わせて一度だけ調整されます。フォーカスを変更 する場合は、この値をもう一度設定します。値ONCEを設定するたびに、フォーカスが現在のシーンに合わせて調整されま す。

        // updates values shown in "control panel"
        updateFocusMode: function updateFocusModeFn() {
            // get current checkbox status
            var check_value = $("#panel-focus-auto").is(":checked");
            if (check_value) {
                AR.hardware.camera.focusMode = AR.CONST.CAMERA_FOCUS_MODE.CONTINUOUS;
            } else {
                AR.hardware.camera.focusMode = AR.CONST.CAMERA_FOCUS_MODE.ONCE;
            }
        },
    
    ソースコードをGitHub

    マニュアルフォーカス距離ににアクセスするには、AR.hardware.camera.manualfocusdistanceの値を取得または変更します。

    AR.hardware.camera.manualFocusDistance = parseInt(slider_value) / 100;
    

    すべてのデバイスがこの機能をサポートしているわけではないので、AR.hardware.camera.manualFocusAvailable を使用して手動フォーカスが利用可能かどうかを調べることができます。 このサンプルでは、必要に応じてスライダーを隠すためにこれを使用しています。

    if (!AR.hardware.camera.manualFocusAvailable) {
        document.getElementById("panel-focus-distance").style.display = "none";
    }
    
    ソースコードをGitHubで見る

    フラッシュにアクセスするには、AR.hardware.camera.flashlightの 値を取得または変更します。

        // updates values shown in "control panel"
        updateFlashlight: function updateFlashlightFn() {
            // get current checkbox status
            var check_value = $("#panel-flashlight").is(":checked");
            AR.hardware.camera.flashlight = check_value;
        },
    
    ソースコードをGitHubで見る

    UIコントロールでは直接表示されない機能は、touch to focustouch to exposeです。 この例では、AR.hardware.camera.setFocusPointOfInterestAR.hardware.camera.setExposurePointOfInterestのAPIを使用して、ユーザーの入力に基づいてカメラのフォーカスおよび露出ポイントを定義します。 このAPIの最も一般的な使用例は、AR.context.onScreenClickコールバックに接続し、提供されたスクリーン座標を使用して、この座標でカメラを再フォーカスまたは再展開することです。

    AR.context.onScreenClick = function (touchLocation) {
        AR.hardware.camera.setFocusPointOfInterest = touchLocation;
        AR.hardware.camera.setExposurePointOfInterest = touchLocation
    }

    実際のユーザーと対話せずに、座標を手動で指定することもできます。