JavaScript媒体处理_音频视频分析处理_技术教程

JavaScript通过Web Audio API处理音频，利用AnalyserNode提取频域数据实现可视化；结合Canvas对视频逐帧处理，如灰度转换；通过getUserMedia访问摄像头与麦克风；使用FFmpeg.wasm进行音视频格式转换与剪辑，实现浏览器内高效媒体分析与操作。

JavaScript在现代Web开发中已经能够直接处理音频和视频数据，尤其是在浏览器环境中通过Web APIs实现媒体分析与操作。这为语音识别、音视频剪辑、实时通信、可视化等应用提供了强大支持。

音频处理：使用Web Audio API

Web Audio API 是 JavaScript 中用于处理音频的核心工具，支持音频播放、分析、合成和效果处理。

关键功能包括：

音频上下文（AudioContext）：所有音频操作的起点，用于创建、连接和控制音频节点。
音频源节点：可来自元素、麦克风输入（通过 getUserMedia）或直接生成波形。
分析节点（AnalyserNode）：提取音频的时域和频域数据，常用于频谱图、波形可视化。
滤波器和效果节点：实现均衡、混响、延迟等音频处理。

示例：获取音频频率数据

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
analyser.fftSize = 2048;

// 假设已有音频元素
const audioElement = document.getElementById('audio');
const source = audioContext.createMediaElementSource(audioElement);
source.connect(analyser);
analyser.connect(audioContext.destination);

// 获取频域数据
const bufferLength = analyser.frequencyBinCount;
const frequencyData = new Uint8Array(bufferLength);

function draw() {
  requestAnimationFrame(draw);
  analyser.getByteFrequencyData(frequencyData);
  // 可将 frequencyData 用于 canvas 绘制频谱
}

draw();

视频处理：Canvas 与 MediaStreamTrack

JavaScript 可结合

常见用途：

从视频中提取图像帧（getImageData）
实现灰度、边缘检测、色彩调整等图像处理
录制处理后的视频流（配合 MediaRecorder API）

示例：从视频中抓取帧并绘制到 Canvas

const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

function processFrame() {
  // 将当前视频帧绘制到 canvas
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  
  // 获取像素数据
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  // 示例：转为灰度
  for (let i = 0; i < data.length; i += 4) {
    const gray = (data[i] + data[i+1] + data[i+2]) / 3;
    data[i] = gray;     // R
    data[i+1] = gray;   // G
    data[i+2] = gray;   // B
  }

  // 写回 canvas
  ctx.putImageData(imageData, 0, 0);
}

// 播放时持续处理
video.addEventListener('play', () => {
  const interval = setInterval(() => {
    if (video.paused || video.ended) {
      clearInterval(interval);
      return;
    }
    processFrame();
  }, 1000 / 30); // 约每秒30帧
});

媒体输入：访问摄像头与麦克风

通过 getUserMedia() 可以获取用户的摄像头和麦克风数据流，用于实时音视频处理。

示例：获取视频流并播放

async function startCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    const video = document.getElementById('video');
    video.srcObject = stream;
  } catch (err) {
    console.error("无法访问摄像头或麦克风", err);
  }
}
startCamera();

获取的 MediaStream 可作为 Web Audio API 或 Canvas 处理的源，也可用于录制或传输。