如何利用JavaScript进行音视频处理与流媒体操作？

async function getMedia() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    document.getElementById('video').srcObject = stream;
  } catch (err) {
    console.error("无法获取媒体设备:", err);
  }
}

let chunks = [];
const mediaRecorder = new MediaRecorder(stream);

mediaRecorder.ondataavailable = event => {
  if (event.data.size > 0) {
    chunks.push(event.data);
  }
};

mediaRecorder.onstop = () => {
  const blob = new Blob(chunks, { type: 'video/webm' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'record.webm';
  a.click();
};

// 开始录制
mediaRecorder.start();
// 停止录制（2秒后示例）
setTimeout(() => mediaRecorder.stop(), 2000);

const pc = new RTCPeerConnection();

// 添加本地流
pc.addStream(localStream);

// 创建 Offer
pc.createOffer().then(offer => pc.setLocalDescription(offer));

// 远程 SDP 设置
pc.setRemoteDescription(new RTCSessionDescription(remoteSdp));

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const analyser = audioContext.createAnalyser();

analyser.fftSize = 2048;
source.connect(analyser);

const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);

function draw() {
  requestAnimationFrame(draw);
  analyser.getByteFrequencyData(dataArray);
  // 可用于绘制频谱图
}

pc.ontrack = event => {
  document.getElementById('remoteVideo').srcObject = event.streams[0];
};