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