動画撮影のカスタマイズ
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;
}.