ビデオ要素から画像をキャプチャする方法

HTML5 Canvasを使用する方法: HTML5のCanvas要素を使用して、ビデオフレームをキャプチャし、それを画像データとして保存することができます。以下は、JavaScriptを使用した例です。

// ビデオ要素を取得
const video = document.getElementById('videoElement');
// キャンバス要素を作成
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
// キャンバスにビデオフレームを描画
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// キャンバスのデータを画像として保存
const image = canvas.toDataURL('image/png');

createImageBitmapを使用する方法: createImageBitmap関数を使用して、ビデオフレームをImageBitmapオブジェクトとしてキャプチャすることもできます。以下は、コードの例です。

// ビデオ要素を取得
const video = document.getElementById('videoElement');
// ビデオフレームをImageBitmapとしてキャプチャ
const imagePromise = createImageBitmap(video);
imagePromise.then((imageBitmap) => {
  // ImageBitmapをキャンバスに描画
  const canvas = document.createElement('canvas');
  canvas.width = imageBitmap.width;
  canvas.height = imageBitmap.height;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(imageBitmap, 0, 0);
  // キャンバスのデータを画像として保存
  const image = canvas.toDataURL('image/png');
});