JavaScript_音视频处理与WebRTC实战-js教程-PHP中文网

JavaScript_音视频处理与WebRTC实战

狼影

发布： 2025-11-23 20:14:02

原创

927人浏览过

音视频采集通过getUserMedia获取流并绑定到video元素，WebRTC使用RTCPeerConnection建立点对点连接，经信令服务器交换SDP与ICE候选，结合Canvas可处理视频帧如转灰度，实战需注意信令设计、错误处理、兼容性及性能优化。

javascript_音视频处理与webrtc实战

处理音视频和使用WebRTC进行实时通信是现代前端开发中越来越重要的技能。JavaScript凭借浏览器强大的API支持，能够直接在网页中实现音视频采集、处理、传输与播放，尤其在远程会议、在线教育、直播互动等场景中发挥关键作用。

音视频采集：获取用户媒体流

通过 getUserMedia() 可以请求访问用户的摄像头和麦克风，获取音视频流：

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then(stream => {
    const videoElement = document.getElementById('localVideo');
    videoElement.srcObject = stream;
  })
  .catch(err => console.error('无法获取媒体设备:', err));

登录后复制

这个方法返回一个 Promise，成功后得到 MediaStream 对象，可直接赋给 video 元素播放。注意页面必须运行在 HTTPS 或 localhost 环境下才能调用此 API。

WebRTC 连接建立：PeerConnection 实现点对点通信

WebRTC 的核心是 RTCPeerConnection，用于在两个浏览器之间建立连接并传输音视频数据。

立即学习“Java免费学习笔记（深入）”；

基本流程包括：

创建 RTCPeerConnection 实例
添加本地流
生成并交换 SDP 会话描述（offer/answer）
收集并交换 ICE 候选地址

const pc = new RTCPeerConnection();
pc.addStream(localStream); // 添加本地流

// 创建 offer
pc.createOffer()
  .then(offer => pc.setLocalDescription(offer))
  .then(() => {
    // 发送 offer 给对方（通过信令服务器）
  });

// 监听 ICE 候选
pc.onicecandidate = event => {
  if (event.candidate) {
    // 将 candidate 发送给对方
  }
};

登录后复制

需要一个信令服务器（如 WebSocket）来传递 offer、answer 和 ICE 候选，但实际媒体流是点对点传输的，不经过服务器。

必应图像创建器

微软必应出品的AI绘图工具

593

查看详情

音视频数据处理：Canvas 与 MediaStreamTrack

可以结合 Canvas 对视频帧进行实时处理，比如添加滤镜、叠加图形或提取图像数据。

示例：将视频画面转为灰度并重新输出为流

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const stream = canvas.captureStream(30); // 每秒30帧

function processVideo(videoElement) {
  canvas.width = videoElement.videoWidth;
  canvas.height = videoElement.videoHeight;

  ctx.drawImage(videoElement, 0, 0);
  const frame = ctx.getImageData(0, 0, canvas.width, canvas.height);

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

  ctx.putImageData(frame, 0, 0);
}

// 循环处理
setInterval(() => processVideo(document.getElementById('localVideo')), 1000/30);

登录后复制

之后可以把 stream 作为新的视频源发送给远端，实现视觉特效传输。