Implémentation de TypeScript pour générer des images à partir de HTMLVideoElement

Voici une implémentation qui extrait le cadre actuel de HTMLVideoElement sous forme d’image.

Capturez des images vidéo à l’aide de l’API Canvas et obtenez-les au format Blob.

API à utiliser

-HTMLCanvasElement

HTMLVideoElement -API de promesse

mise en œuvre

interface OutputImage {
  type: "png" | "jpeg" | "webp";
  quality?: number;
}

interface TransferOptions {
  canvas: HTMLCanvasElement;
  video: HTMLVideoElement;
  output: OutputImage;
}

interface TransferredImage {
  blob: Blob;
  width: number;
  height: number;
  type: string;
}

function transferImage(options: TransferOptions): Promise<TransferredImage> {
  const { canvas, video, output } = options;

  const height = video.videoHeight;
  const width = video.videoWidth;

  return new Promise<TransferredImage>((resolve, reject) => {
    const ctx = canvas.getContext("2d");
    if (!ctx) {
      reject(new Error("Context2D is not defined"));
      return;
    }

    ctx.drawImage(video, 0, 0, width, height);

    const type = `image/${output.type}`;
    const q = output.quality || 1;

    function toBlob(blob: Blob | null) {
      if (blob) {
        resolve({ blob, width, height, type });
      } else {
        reject(new Error("Failed to create blob from canvas"));
      }
    }

    canvas.toBlob(toBlob, type, q);
  });
}

Points

Obtenez la résolution vidéo avec video.videoHeight et video.videoWidth
Dessinez le cadre actuel sur Canvas avec ctx.drawImage(video, 0, 0, width, height)
Convertissez le contenu Canvas en Blob avec canvas.toBlob
Enveloppez le traitement asynchrone avec des promesses

Exemple d’utilisation

const video = document.querySelector('video');
const canvas = document.createElement('canvas');

const image = await transferImage({
  canvas,
  video,
  output: { type: 'png', quality: 1 }
});

// image.blob を使って画像をダウンロードしたり、表示したりできる
const url = URL.createObjectURL(image.blob);

résumé

En combinant HTMLVideoElement et CanvasAPI, vous pouvez extraire n’importe quelle image d’une vidéo sous forme d’image.

Il peut être utilisé pour générer des vignettes et implémenter des fonctions de prévisualisation vidéo.