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

XR8.MediaRecorder.recordVideo()

XR8.MediaRecorder.recordVideo({ onError, onProcessFrame, onStart, onStop, onVideoReady })

概要

録画を開始します。

この関数は、以下のmedia recorderのライフサイクルコールバックメソッドを1つ以上実装したオブジェクトを受け取ります。

パラメータ

パラメータ説明
onErrorエラー発生時のコールバックです。
onProcessFrame動画にオーバーレイを追加するためのコールバックです。
onStart録画開始時のコールバックです。
onStop録画停止時のコールバックです。
onPreviewReadyプレビュー可能であるものの、共有に最適化されていない動画が準備できた時のコールバックです(Android/Desktopのみ)。
onFinalizeProgressメディアレコーダーが最終的な書き出しを進めている時のコールバックです(Android/Desktopのみ)。
onVideoReady録画が完了し、ビデオの準備ができた時のコールバックです。

注: mp4ではなくwebmに対応しているネイティブMediaRecorderがブラウザにある場合(現在、Android/Desktopでのみ対応)、webmはプレビュー動画として使用可能ですが、最終的にmp4に変換されます。 onPreviewReady は変換開始時に呼ばれ、ユーザーはすぐにビデオを見られます。また、mp4ファイルの準備ができたら、onVideoReadyが呼ばれます。 変換中、onFinalizeProgressが定期的に呼び出され、プログレスバーが表示されます。

戻り値

なし

XR8.MediaRecorder.recordVideo({
onVideoReady: (result) => window.dispatchEvent(new CustomEvent('recordercomplete', {detail: result})),
onStop: () => showLoading(),
onError: () => clearState(),
onProcessFrame: ({elapsedTimeMs, maxRecordingMs, ctx}) => {
// 赤いテキストがビデオに重なって表示されます
ctx.fillStyle = 'red'
ctx.font = '50px "Nunito"'
ctx.fillText(`${elapsedTimeMs}/${maxRecordingMs}`, 50, 50)
const timeLeft = ( 1 - elapsedTimeMs / maxRecordingMs)
// 残り時間を示すプログレスバーを更新します
progressBar.style.strokeDashoffset = `${100 * timeLeft }`
},
onFinalizeProgress: ({progress, total}) => {
console.log('Export is ' + Math.round(progress / total) + '% complete')
},
})