メインコンテンツへスキップ

XR8.addCameraPipelineModule()

XR8.addCameraPipelineModule(module)

概要​

8th Wall カメラアプリケーションは、カメラパイプラインモジュールフレームワークを使用して構築されています。 カメラパイプラインモジュールに関する詳しい説明は、CameraPipelineModuleをご覧ください。

アプリケーションは、実行時にアプリケーションの動作を制御するモジュールをインストールします。 モジュールオブジェクトは、アプリケーション内でユニークな.name文字列を持ち、実行ループの適切な時点で実行されるカメラのライフサイクルメソッドを1つ以上提供しなければなりません。

アプリケーションのメインランタイム中、各カメラフレームは以下のサイクルを経ます。

onBeforeRun -> onCameraStatusChange (requesting -> hasStream -> hasVideo | failed) -> onStart -> onAttach -> onProcessGpu -> onProcessCpu -> onUpdate -> onRender

カメラモジュールは、以下のカメラライフサイクルメソッドを1つ以上実装する必要があります。

関数説明
onAppResourcesLoadedサーバーからアプリに添付されたリソースを受信したときに呼び出されます。
onAttachモジュールが初めてフレームアップデートを受信する前に呼び出されます。 パイプラインの実行前または実行後に追加されたモジュールで呼び出されます。
onBeforeRunXR8.run()の直後に呼び出されます。 もし、何らかのプロミスが返された場合、XRは全てのPromiseを待ってから続行します。
onCameraStatusChangeカメラ権限のリクエスト中に変更が生じた場合に呼び出されます。
onCanvasSizeChangeキャンバスのサイズが変更されたときに呼び出されます。
onDetachモジュールが最後にフレーム更新を受信した後に呼び出されます。 これは、エンジンが停止した後またはモジュールが手動でパイプラインから取り外された後の内、どちらか早い方です。
onDeviceOrientationChangeデバイスが横向き／縦向きに変化したときに呼び出されます。
onExceptionXRでエラーが発生したときに呼び出されます。 エラーオブジェクトとともに呼び出されます。
onPausedXR8.pause()が呼ばれたときに呼び出されます。
onProcessCpuGPU処理の結果を読み取り、使用可能なデータを返すために呼び出されます。
onProcessGpuGPU処理を開始するために呼び出されます。
onRemoveモジュールがパイプラインから削除されたときに呼び出されます。
onRenderonUpdateの後に呼び出されます。 これはレンダリングエンジンがWebGLの描画コマンドを発行する時間です。 アプリケーションが独自のランループを提供し、XR8.runPreRender()とXR8.runPostRender()に依存している場合、このメソッドは呼ばれず、すべてのレンダリングを外部のランループで調整する必要があります。
onResumeXR8.resume()が呼ばれたときに呼び出されます。
onStartXRの起動時に呼び出されます。 XR8.run()が呼び出された後の最初のコールバックです。
onUpdateレンダリング前にシーンを更新するために呼び出されます。 onProcessGpuおよびonProcessCpuのモジュールが返すデータは、processGpu.modulenameおよびprocessCpu.modulenameとして存在し、名前はmodule.name = "modulename"として与えられます。
onVideoSizeChangeキャンバスのサイズが変更されたときに呼び出されます。
requiredPermissionsモジュールは、権限のリクエストが必要なブラウザの機能を指定できます。 これらは、フレームワークによって、適切なパーミッションがない場合に要求したり、XRを実行する前に適切なパーミッションを要求するコンポーネントを作成したりするために使用することができます。

注：onProcessGpuまたはonProcessCpuを実装するカメラモジュールは、パイプラインの後続ステージにデータを提供できます。 これは、モジュールの名前によって行われます。

パラメータ​

パラメータタイプ説明
moduleObjectモジュールオブジェクトです。

戻り値​

なし

例1）カメラの権限を管理するためのカメラパイプラインモジュール​

XR8.addCameraPipelineModule({
  name: 'camerastartupmodule',
  onCameraStatusChange: ({status}) {
    if (status == 'requesting') {
      myApplication.showCameraPermissionsPrompt()
    } else if (status == 'hasStream') {
      myApplication.dismissCameraPermissionsPrompt()
    } else if (status == 'hasVideo') {
      myApplication.startMainApplictation()
    } else if (status == 'failed') {
      myApplication.promptUserToChangeBrowserSettings()
    }
  },
})

例2）QRコードを読み取るアプリケーションの構築​

// カメラの映像をUInt8Arrayとして取得するモジュールを設置します。
XR8.addCameraPipelineModule(
  XR8.CameraPixelArray.pipelineModule({luminance: true, width: 240, height: 320}))

// カメラの映像をキャンバスに描画するモジュールを設置します。
XR8.addCameraPipelineModule(XR8.GlTextureRenderer.pipelineModule())

// QRコードをスキャンして表示するためのカスタムアプリケーションロジックを作成します。
XR8.addCameraPipelineModule({
  name: 'qrscan',
  onProcessCpu: ({processGpuResult}) => {
    // CameraPixelArray.pipelineModule()が、onProcessGpuでこれらを返します。
    const { pixels, rows, cols, rowBytes } = processGpuResult.camerapixelarray
    const { wasFound, url, corners } = findQrCode(pixels, rows, cols, rowBytes)
    return { wasFound, url, corners }
  },
  onUpdate: ({processCpuResult}) => {
    // これらは onProcessCpuの中のこのモジュール('qrscan') 
によって返されたものです。
    const {wasFound, url, corners } = processCpuResult.qrscan
    if (wasFound) {
      showUrlAndCorners(url, corners)
    }
  },
})