Implementação TypeScript para gerar imagens de HTMLVideoElement

Aqui está uma implementação que extrai o quadro atual de HTMLVideoElement como uma imagem.

Capture quadros de vídeo usando a API Canvas e obtenha-os no formato Blob.

API para usar

-HTMLCanvasElemento

HTMLVideoElement -Promessa API

implementação

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);
  });
}

Pontos

Obtenha a resolução do vídeo com video.videoHeight e video.videoWidth
Desenhe o quadro atual no Canvas com ctx.drawImage(video, 0, 0, width, height)
Converta o conteúdo do Canvas em Blob com canvas.toBlob
Envolva o processamento assíncrono com promessas

Exemplo de uso

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);

resumo

Ao combinar HTMLVideoElement e CanvasAPI, você pode extrair qualquer quadro de um vídeo como uma imagem.

Ele pode ser usado para gerar miniaturas e implementar funções de visualização de vídeo.