js实现视频压缩

使用 MediaRecorder API 压缩视频

通过 MediaRecorder API 可以录制视频并设置压缩参数。该方法适合在浏览器端直接处理视频文件。

async function compressVideo(file) {
  const videoElement = document.createElement('video');
  videoElement.src = URL.createObjectURL(file);
  await new Promise(resolve => videoElement.onloadedmetadata = resolve);

  const canvas = document.createElement('canvas');
  canvas.width = videoElement.videoWidth * 0.5; // 缩小分辨率
  canvas.height = videoElement.videoHeight * 0.5;
  const ctx = canvas.getContext('2d');

  const stream = canvas.captureStream();
  const recorder = new MediaRecorder(stream, {
    mimeType: 'video/webm;codecs=vp9',
    bitsPerSecond: 250000 // 设置比特率
  });

  videoElement.play();
  const chunks = [];
  recorder.ondataavailable = e => chunks.push(e.data);
  recorder.start();

  const interval = setInterval(() => {
    ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
  }, 1000/30);

  return new Promise(resolve => {
    setTimeout(() => {
      clearInterval(interval);
      recorder.stop();
      resolve(new Blob(chunks, {type: 'video/webm'}));
    }, 3000); // 录制3秒
  });
}

使用 FFmpeg.wasm 进行高级压缩

FFmpeg.wasm 是 WebAssembly 版本的 FFmpeg，提供更专业的视频处理能力。

import { createFFmpeg } from '@ffmpeg/ffmpeg';

async function compressWithFFmpeg(file) {
  const ffmpeg = createFFmpeg({ log: true });
  await ffmpeg.load();

  ffmpeg.FS('writeFile', 'input.mp4', await fetchFile(file));
  await ffmpeg.run(
    '-i', 'input.mp4',
    '-vf', 'scale=640:-1', // 调整分辨率
    '-c:v', 'libx264',     // H.264编码
    '-crf', '28',          // 压缩质量(18-28)
    '-preset', 'fast',
    'output.mp4'
  );

  const data = ffmpeg.FS('readFile', 'output.mp4');
  return new Blob([data.buffer], { type: 'video/mp4' });
}

使用 Canvas 和 Web Worker 处理

对于长时间压缩任务，建议使用 Web Worker 避免阻塞主线程。

// worker.js
self.onmessage = async (e) => {
  const { file, width, height, quality } = e.data;
  const video = document.createElement('video');
  video.src = URL.createObjectURL(file);

  await new Promise(resolve => {
    video.onloadedmetadata = resolve;
    video.play();
  });

  const canvas = new OffscreenCanvas(width, height);
  const ctx = canvas.getContext('2d');

  const frames = [];
  for (let i = 0; i < video.duration * 30; i++) {
    ctx.drawImage(video, 0, 0, width, height);
    frames.push(await canvas.convertToBlob({quality}));
    await new Promise(r => setTimeout(r, 1000/30));
  }

  postMessage(frames);
};

使用第三方库 compressor.js

compressor.js 提供简单的视频压缩接口，适合快速实现基本需求。

import Compressor from 'compressorjs';

new Compressor(file, {
  quality: 0.6,
  maxWidth: 1280,
  maxHeight: 720,
  success(result) {
    console.log('压缩完成', result);
  },
  error(err) {
    console.error('压缩失败', err);
  }
});

注意事项

视频压缩会受浏览器兼容性限制，不同浏览器支持的编码格式不同。建议检测浏览器支持情况：

function checkCodecSupport() {
  return MediaRecorder.isTypeSupported('video/webm;codecs=vp9') 
    || MediaRecorder.isTypeSupported('video/mp4');
}

移动端设备可能对高分辨率视频处理性能有限，建议先降低分辨率再压缩。