本文へスキップ

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はすべての約束を待ってから続行する。
onCameraStatusChangeカメラのアクセス許可要求中に変更が発生した場合に呼び出されます。
onCanvasSizeChangeキャンバスのサイズが変更されたときに呼び出される。
onDetachは、モジュールがフレームの更新を最後に受信した後に呼び出される。 これは、エンジンが停止した後か、モジュールがパイプラインから手動で取り外された後のどちらか早い方である。
onDeviceOrientationChangeデバイスが横向き/縦向きに変わったときに呼び出される。
onExceptionXRでエラーが発生したときに呼び出される。 エラーオブジェクトと共に呼び出される。
onPausedXR8.pause() が呼ばれたときに呼び出される。
onProcessCpuGPU処理の結果を読み取り、使用可能なデータを返すために呼び出される。
onProcessGpuGPU処理を開始するために呼び出される。
onRemoveは、モジュールがパイプラインから削除されたときに呼び出される。
onRenderonUpdateの後に呼び出される。 これはレンダリングエンジンがWebGLの描画コマンドを発行する時間です。 アプリケーションが独自のランループを提供し、XR8.runPreRender()とXR8.runPostRender()に依存している場合、このメソッドは呼び出されず、すべてのレンダリングは外部のランループによって調整されなければなりません。
onResumeXR8.resume()\`](resume.md) が呼ばれたときに呼び出される。
onStartXRの開始時に呼び出される。 XR8.run()が呼ばれた後の最初のコールバック。
onUpdateレンダリング前にシーンを更新するために呼び出される。 レンダリング前にシーンを更新するために呼び出される。 onProcessGpuとonProcessCpuのモジュールによって返されるデータは、processGpu.modulenameとprocessCpu.modulenameとして存在する。
onVideoSizeChangeキャンバスのサイズが変更されたときに呼び出される。
必須パーミッションモジュールは、許可要求が必要なブラウザの機能を示すことができます。 これらは、もし適切なパーミッションがない場合、フレームワークが要求するために使用されるか、XRを実行する前に適切なパーミッションを要求するコンポーネントを作成するために使用される。

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

パラメータ​

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

を返す​

なし

例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)
    }.
  },
})