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

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