驗證使用者上傳的影片

import { canDecode } from '@remotion/media';
 
const upload = async (file: File): Promise<string> => {
  // 你的上傳實作
  return 'https://example.com/video.mp4';
};
 
const handleUpload = async (file: File) => {
  // 先檢查瀏覽器是否可以解碼此影片
  const isCompatible = await canDecode(file);
 
  if (!isCompatible) {
    // 通知使用者或拒絕影片
    alert('不支援此影片格式。');
    return;
  }
 
  try {
    const url = await upload(file);
    console.log('影片上傳成功：', url);
  } catch (error) {
    console.error('處理影片失敗：', error);
    alert('影片上傳失敗');
  }
};

import React, { useCallback, useState } from 'react';
import { Player } from '@remotion/player';
import { MyComposition } from './MyComposition';
 
// 模擬 canDecode 函數（實際使用 @remotion/media 中的版本）
const canDecode = async (src: string | Blob): Promise<boolean> => {
  return new Promise((resolve) => {
    const video = document.createElement('video');
    video.preload = 'metadata';
 
    const url = src instanceof Blob ? URL.createObjectURL(src) : src;
 
    video.onloadedmetadata = () => {
      if (src instanceof Blob) URL.revokeObjectURL(url);
      resolve(true);
    };
 
    video.onerror = () => {
      if (src instanceof Blob) URL.revokeObjectURL(url);
      resolve(false);
    };
 
    video.src = url;
  });
};
 
const upload = async (file: File): Promise<string> => {
  // 你的上傳邏輯
  return 'https://example.com/video.mp4';
};
 
type UploadStatus =
  | { type: 'idle' }
  | { type: 'validating' }
  | { type: 'error'; message: string }
  | { type: 'uploading' }
  | { type: 'done'; url: string };
 
export const ValidatedVideoUploader: React.FC = () => {
  const [status, setStatus] = useState<UploadStatus>({ type: 'idle' });
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
 
  const handleFileSelect = useCallback(
    async (event: React.ChangeEvent<HTMLInputElement>) => {
      if (!event.target.files?.length) return;
 
      const file = event.target.files[0];
 
      // 步驟 1：驗證影片格式
      setStatus({ type: 'validating' });
 
      const isCompatible = await canDecode(file);
 
      if (!isCompatible) {
        setStatus({
          type: 'error',
          message: `不支援的影片格式。請上傳 MP4、WebM 或 MOV 格式的影片。`,
        });
        return;
      }
 
      // 步驟 2：建立本地預覽（樂觀更新）
      const blobUrl = URL.createObjectURL(file);
      setPreviewUrl(blobUrl);
      setStatus({ type: 'uploading' });
 
      try {
        // 步驟 3：上傳到雲端
        const cloudUrl = await upload(file);
 
        // 步驟 4：切換到雲端 URL
        setPreviewUrl(cloudUrl);
        setStatus({ type: 'done', url: cloudUrl });
 
        // 釋放 blob URL
        URL.revokeObjectURL(blobUrl);
      } catch (error) {
        setStatus({
          type: 'error',
          message: '上傳失敗，請重試。',
        });
        URL.revokeObjectURL(blobUrl);
        setPreviewUrl(null);
      }
    },
    []
  );
 
  return (
    <div style={{ padding: '20px' }}>
      <h2>影片上傳</h2>
 
      {/* 狀態顯示 */}
      {status.type === 'validating' && (
        <div style={{ color: 'blue' }}>正在驗證影片格式...</div>
      )}
 
      {status.type === 'error' && (
        <div style={{ color: 'red', padding: '10px', background: '#fee' }}>
          {status.message}
        </div>
      )}
 
      {status.type === 'uploading' && (
        <div style={{ color: 'orange' }}>正在上傳影片...</div>
      )}
 
      {status.type === 'done' && (
        <div style={{ color: 'green' }}>影片上傳成功！</div>
      )}
 
      {/* 影片預覽 */}
      {previewUrl && (
        <div style={{ margin: '20px 0' }}>
          <Player
            component={MyComposition}
            inputProps={{ videoURL: previewUrl }}
            durationInFrames={150}
            fps={30}
            compositionWidth={1920}
            compositionHeight={1080}
            style={{ width: '100%', maxWidth: '800px' }}
            controls
          />
        </div>
      )}
 
      {/* 檔案輸入 */}
      <input
        type="file"
        accept="video/*"
        onChange={handleFileSelect}
        disabled={status.type === 'validating' || status.type === 'uploading'}
      />
 
      <p style={{ color: '#666', fontSize: '14px' }}>
        支援的格式：MP4、WebM、MOV、AVI
      </p>
    </div>
  );
};

if (!isCompatible) {
  alert('此影片格式不受支援。請嘗試以下格式：MP4 (H.264)、WebM (VP8/VP9)');
  return;
}

import { execSync } from 'child_process';
import path from 'path';
 
export const transcodeVideo = async (
  inputPath: string,
  outputPath: string
): Promise<void> => {
  // 使用 FFmpeg 將影片轉換為 H.264/MP4 格式
  execSync(
    `ffmpeg -i "${inputPath}" -c:v libx264 -c:a aac -movflags +faststart "${outputPath}"`,
    { stdio: 'inherit' }
  );
};

import { transcodeVideo } from './transcode';
import fs from 'fs';
import path from 'path';
 
export const handleVideoUpload = async (file: Express.Multer.File) => {
  const inputPath = file.path;
  const outputPath = path.join('uploads', `${Date.now()}.mp4`);
 
  // 嘗試轉碼
  try {
    await transcodeVideo(inputPath, outputPath);
 
    // 刪除原始上傳的檔案
    fs.unlinkSync(inputPath);
 
    return {
      success: true,
      url: `/uploads/${path.basename(outputPath)}`,
    };
  } catch (error) {
    fs.unlinkSync(inputPath);
    throw new Error('影片轉碼失敗');
  }
};