everything-claude-code/docs/ja-JP/skills/remotion-video-creation/rules/can-decode.md

name, description, metadata

name	description	metadata
can-decode	Mediabunnyを使用してブラウザで動画をデコードできるか確認する	tags decode, validation, video, audio, compatibility, browser

動画がデコードできるか確認する

再生を試みる前に、Mediabunnyを使用してブラウザで動画をデコードできるか確認します。

canDecode() 関数

この関数はどのプロジェクトにもコピー＆ペーストできます。

import { Input, ALL_FORMATS, UrlSource } from "mediabunny";

export const canDecode = async (src: string) => {
  const input = new Input({
    formats: ALL_FORMATS,
    source: new UrlSource(src, {
      getRetryDelay: () => null,
    }),
  });

  try {
    await input.getFormat();
  } catch {
    return false;
  }

  const videoTrack = await input.getPrimaryVideoTrack();
  if (videoTrack && !(await videoTrack.canDecode())) {
    return false;
  }

  const audioTrack = await input.getPrimaryAudioTrack();
  if (audioTrack && !(await audioTrack.canDecode())) {
    return false;
  }

  return true;
};

使用方法

const src = "https://remotion.media/video.mp4";
const isDecodable = await canDecode(src);

if (isDecodable) {
  console.log("Video can be decoded");
} else {
  console.log("Video cannot be decoded by this browser");
}

Blobとの使用

ファイルのアップロードやドラッグ＆ドロップには BlobSource を使用します:

import { Input, ALL_FORMATS, BlobSource } from "mediabunny";

export const canDecodeBlob = async (blob: Blob) => {
  const input = new Input({
    formats: ALL_FORMATS,
    source: new BlobSource(blob),
  });

  // 上記と同じバリデーションロジック
};