📸

【8th Wall Web】写真・動画撮影機能の追加

2 min read

8thwallの開発情報で、なぜかThree.js版のシンプルなキャプチャ機能の情報が(ドキュメントの内容が古かったりとかで)あんまりなかったので備忘録にまとめます。
※2021年8月現在の情報です

A-Frame版

A-Frame版は撮影・動画共にドキュメントにしっかり情報があるので大丈夫そう。

▼ドキュメント

https://www.8thwall.com/docs/web/#customize-video-recording

▼参考にできるデモ

https://www.8thwall.com/8thwall/capturephoto-aframe/code/

Three.js版

写真撮影のみ

① まず XR8.addCameraPipelineModules 内に XR8.CanvasScreenshot.pipelineModule() が入れておく

例:

 XR8.addCameraPipelineModules([
    XR8.GlTextureRenderer.pipelineModule(),
    XR8.Threejs.pipelineModule(),
    XR8.XrController.pipelineModule(),
    // ↓これ
    XR8.CanvasScreenshot.pipelineModule(),
    XRExtras.AlmostThere.pipelineModule(),
    XRExtras.FullWindowCanvas.pipelineModule(),
    XRExtras.Loading.pipelineModule(),
    XRExtras.RuntimeError.pipelineModule(),
    customPipelineModule(),
  ]);

② 自前でシャッターボタンとか、シャッターボタン押した時のプレビューモーダルとかをhtml要素で用意しておく

③ シャッターボタンを押した時のイベントで以下をいれる

XR8.CanvasScreenshot.takeScreenshot().then((data)=>{}, (error)=>{})

例:

const capturePhoto = () => {
  XR8.CanvasScreenshot.takeScreenshot().then(
    (data) => {
      const captureImage = document.getElementById("image");
      captureImage.src = "data:image/jpeg;base64," + data;
      showPreview();
    },
    (error) => {
      console.log(error);
    }
  );
};

写真&動画撮影

写真・動画撮影であればこちらのデモの実装がそのまま参考になる。

https://www.8thwall.com/8thwall/face-effects-threejs/code/run-face-pipeline.js

シャッターボタンの追加

まず onxrloaded 関数内に以下を追加
XRExtras.MediaRecorder.initRecordButton();

プレビューモーダルの追加

同じくonxrloaded 関数内で以下を追加
XRExtras.MediaRecorder.initMediaPreview();

専用pipelineModuleの追加

XR8.addCameraPipelineModules 内に以下を追加
XR8.CanvasScreenshot.pipelineModule(),
(これは写真撮影用に必要っぽい)

ウォーターマークの追加(任意)

何と撮影した画像やビデオにウォーターマーク(ロゴ)を追加できる…

  XRExtras.MediaRecorder.configure({
    watermarkImageUrl: require('./assets/Logos/8logo.png'), // Adds watermark to photo/video
    watermarkMaxWidth: 100,
    watermarkMaxHeight: 10,
  })

基本のカメラをインカメにする(任意)

フェイストラッキングなど、起動時インカメ状態にしたい場合はXR8.run にcameraConfigの設定を追加する必要がある

XR8.run({
    canvas: document.getElementById("camerafeed"),
    cameraConfig: { direction: XR8.XrConfig.camera().FRONT },
    allowedDevices: XR8.XrConfig.device().ANY,
  });

参考

Discussion

ログインするとコメントできます