動画撮影のカスタマイズ

8th Wallの XRExtras ライブラリは、ロード画面、ソーシャルリンクアウトフロー、エラー処理など、WebARアプリケーションの最も一般的なニーズを処理するモジュールを提供します。

XRExtras MediaRecorderモジュールにより、プロジェクトにおける動画撮影のユーザーエクスペリエンスを簡単にカスタマイズすることができます。

このセクションでは、キャプチャボタンの動作（タップとホールドの違い）、ビデオのウォーターマークの追加、ビデオの最大長、エンドカードの動作と外観など、録画したビデオをカスタマイズする方法について説明します。

A-Frameプリミティブ

xrextras-capture-button : シーンにキャプチャボタンを追加します。

パラメータ	タイプ	デフォルト	説明
capture-mode	String	'standard'	キャプチャモードの動作を設定します。 standard: タップで写真撮影、タップ＋長押しで動画撮影。 fixed: タップで動画撮影を切り替えられるようにしました。 photo: タップして写真を撮ります。 standard, fixed, photoのいずれか

xrextras-capture-config : キャプチャしたメディアを設定する。

パラメータ	タイプ	デフォルト	説明
max-duration-ms	int	15000	キャプチャボタンが許可する動画の総時間（ミリ秒単位）。 エンドカードが無効の場合、ユーザーの最大記録時間に相当します。 デフォルトで15000。
max-dimension	int	1280	キャプチャした映像の最大寸法（幅または高さ）。 写真の設定については、 XR8.CanvasScreenshot.configure()をご参照ください。
enable-end-card	Boolean	true	エンドカードが記録媒体に含まれるかどうか。
cover-image-url	String		エンドカード表紙画像のイメージソースです。 デフォルトでプロジェクトのカバー画像を使用します。
end-card-call-to-action	String	'Try it at: '	エンドカードに表示されるコールtoアクションの文字列を設定する。
short-link	String		エンドカードショートリンクのテキスト文字列を設定する。 デフォルトでプロジェクトショートリンクを使用します。
footer-image-url	String	Powered by 8th Wall image	エンドカードフッター画像の画像ソースです。
watermark-image-url	String	null	透かしの画像ソース。
watermark-max-width	int	20	透かし画像の最大幅 (%) です。
watermark-max-height	int	20	透かし画像の最大高さ (%) 。
watermark-location	String	'bottomRight'	透かし画像の位置。 topLeft, topMiddle, topRight, bottomLeft, bottomMiddle, bottomRightのうちいずれか一つ
file-name-prefix	String	'my-capture-'	ファイル名の先頭にユニークタイムスタンプを付加する文字列を設定します。
request-mic	String	'auto'	初期化時にマイクの設定を行うか（'auto'）、実行時に行うか（'manual'）を決定する。
include-scene-audio	Boolean	true	trueの場合、シーン内のA-Frameサウンドは、録音された出力の一部となります。

xrextras-capture-preview : 再生、ダウンロード、共有を可能にするメディアプレビュープレファブをシーンに追加します。

パラメータ	タイプ	デフォルト	説明
action-button-share-text	String	'Share'	Web Share API 2が 利用可能な場合（Android、iOS 15 以上）、アクションボタンの文字列を設定する。 'Share' がデフォルトで表示されます。
action-button-view-text	String	'View'	Web Share API 2 が 使えない場合、アクションボタンの文字列を設定します iOS（iOS14以下）で利用可能です。 'View' がデフォルトで表示されます。

XRExtras.MediaRecorderイベント情報

XRExtras.MediaRecorderは、以下のイベントを発生します。

発生するイベント

発生するイベント	説明	イベント詳細
mediarecorder-photocomplete	写真撮影後に発火する。	{blob}
mediarecorder-recordcomplete	動画撮影が完了した後に発火する。	{videoBlob}
mediarecorder-previewready	プレビュー可能な動画撮影が完了した後に発火する。 (Android/Desktopのみ)	{videoBlob}
mediarecorder-finalizeprogress	メディアレコーダーの最終書き出しが進んでいるときに発火。 (Android/Desktopのみ)	{progress, total}
mediarecorder-previewopened	録画プレビューを開いた後に表示されます。	null
mediarecorder-previewclosed	録画プレビューが終了した後に発火。	null

例Aフレームプリミティブ

<xrextras-capture-button capture-mode="standard"></xrextras-capture-button>

<xrextras-capture-config
  max-duration-ms="15000"
  max-dimension="1280"
  enable-end-card="true"
  cover-image-url=""
  end-card-call-to-action="Try it at:"
  short-link=""
  footer-image-url="//cdn.8thwall.com/web/img/almostthere/v2/poweredby-horiz-white-2.svg"
  watermark-image-url="//cdn.8thwall.com/web/img/mediarecorder/8logo.png"
  watermark-max-width="100"
  watermark-max-height="10"
  watermark-location="bottomRight"
  file-name-prefix="my-capture-"
></xrextras-capture-config>

<xrextras-capture-preview
  action-button-share-text="Share"
  action-button-view-text="View"
  finalize-text="Exporting..."
></xrextras-capture-preview>

例Aフレーム・イベント

window.addEventListener('mediarecorder-previewready', (e) => {
  console.log(e.detail.videoBlob)
})

例：Change Share ボタンCSSの変更

#actionButton {
  /* アクションボタンの色を変更する */
  background-color：#007aff !important;
}.