獨立函式

Remotion 提供了一些可以在不需要完整 Remotion 專案設定的情況下單獨使用的工具函式。這些函式對於需要整合特定功能（如媒體處理或元資料讀取）的應用程式特別有用。

什麼是獨立函式？

「獨立函式」是指那些不依賴 React 元件樹、Composition 設定或完整渲染流程的函式。你可以在任何 Node.js 環境中直接呼叫它們，而不需要先建立一個 Remotion 專案。

媒體探測函式

`getVideoMetadata()`

取得影片檔案的元資料，包含解析度、時長、幀率等：

import { getVideoMetadata } from "@remotion/media-utils";
 
const metadata = await getVideoMetadata("https://example.com/video.mp4");
 
console.log(metadata.width);       // 1920
console.log(metadata.height);      // 1080
console.log(metadata.durationInSeconds); // 30.5
console.log(metadata.fps);         // 30

`getAudioDurationInSeconds()`

取得音訊檔案的時長：

import { getAudioDurationInSeconds } from "@remotion/media-utils";
 
const duration = await getAudioDurationInSeconds(
  "https://example.com/audio.mp3"
);
 
console.log(`音訊時長：${duration} 秒`);

`getAudioData()`

取得音訊的波形資料，可用於視覺化：

import { getAudioData } from "@remotion/media-utils";
 
const audioData = await getAudioData("https://example.com/audio.mp3");
 
console.log(audioData.numberOfChannels); // 2（立體聲）
console.log(audioData.sampleRate);       // 44100
console.log(audioData.duration);         // 30.5

圖片處理函式

`measureText()`

在不渲染的情況下測量文字的尺寸：

import { measureText } from "@remotion/layout-utils";
 
const measurement = measureText({
  text: "Hello, World!",
  fontFamily: "Arial",
  fontSize: 48,
  fontWeight: "bold",
});
 
console.log(measurement.width);  // 文字寬度（像素）
console.log(measurement.height); // 文字高度（像素）

顏色工具函式

import { interpolateColors } from "remotion";
 
// 在兩個顏色之間插值（值域 0-1）
const color = interpolateColors(0.5, [0, 1], ["#ff0000", "#0000ff"]);
// 返回 "#7f007f"（紫色）

插值與動畫函式

這些函式在 Node.js 環境中也可以直接使用，不需要 React 上下文：

import { interpolate, spring, Easing } from "remotion";
 
// 線性插值
const value = interpolate(
  50,          // 輸入值（幀數）
  [0, 100],   // 輸入範圍
  [0, 1],     // 輸出範圍
  {
    easing: Easing.out(Easing.ease),
    extrapolateLeft: "clamp",
    extrapolateRight: "clamp",
  }
);
 
// 彈簧動畫計算
const springValue = spring({
  frame: 30,
  fps: 30,
  config: {
    damping: 10,
    stiffness: 100,
    mass: 0.5,
  },
});

FFmpeg 工具函式

@remotion/renderer 提供了直接操作 FFmpeg 的函式：

import { getAvailableCodecs } from "@remotion/renderer";
 
// 取得目前環境支援的編解碼器列表
const codecs = await getAvailableCodecs();
console.log(codecs); // ["h264", "h265", "vp8", "vp9", "av1", ...]

import { downloadVideo } from "@remotion/renderer";
 
// 下載並轉換影片
await downloadVideo({
  src: "https://example.com/video.mp4",
  dest: "local-video.mp4",
});

在非 Remotion 專案中使用

這些函式可以在任何 Node.js 或瀏覽器環境中獨立使用：

// 純 Node.js 腳本，不需要完整的 Remotion 設定
import { getVideoMetadata } from "@remotion/media-utils";
import { readdir } from "fs/promises";
 
async function analyzeVideos(directory: string) {
  const files = await readdir(directory);
  const videoFiles = files.filter((f) => f.endsWith(".mp4"));
 
  const results = await Promise.all(
    videoFiles.map(async (file) => {
      const metadata = await getVideoMetadata(`${directory}/${file}`);
      return {
        file,
        duration: metadata.durationInSeconds,
        resolution: `${metadata.width}x${metadata.height}`,
      };
    })
  );
 
  return results;
}
 
const analysis = await analyzeVideos("./videos");
console.table(analysis);

在瀏覽器中使用

部分函式也可以在瀏覽器中使用（透過 @remotion/media-utils）：

// 在 React 元件中使用（非 Remotion 環境）
import { getAudioData } from "@remotion/media-utils";
import { useEffect, useState } from "react";
 
function AudioAnalyzer({ src }: { src: string }) {
  const [duration, setDuration] = useState<number | null>(null);
 
  useEffect(() => {
    getAudioData(src).then((data) => setDuration(data.duration));
  }, [src]);
 
  return <div>{duration ? `時長：${duration.toFixed(1)} 秒` : "載入中..."}</div>;
}

小結

Remotion 的部分函式可以在完整專案設定之外獨立使用。
@remotion/media-utils 提供媒體元資料讀取功能。
interpolate()、spring() 等動畫函式可在任何 JavaScript 環境中使用。
這些獨立函式適合用於建立媒體分析工具、自動化腳本或與其他框架整合。