互联网大厂200道高频大前端音频视频WebRTC及WebSocket面试题

音频视频WebRTC及WebSocket篇

1. WebRTC 的核心功能是什么？它如何实现实时通信？

答案解析
WebRTC（Web Real-Time Communication）是一个开源的实时通信技术，旨在通过浏览器或移动设备实现音视频和数据的点对点（P2P）传输。其核心功能包括：

• 媒体捕获：通过 navigator.mediaDevices.getUserMedia 获取摄像头和麦克风的音视频流。
• P2P 连接：通过 RTCPeerConnection 建立和管理双方的网络连接，支持 NAT 穿透。
• 数据通道：通过 RTCDataChannel 传输任意数据（如文本、文件）。
  WebRTC 基于 UDP 协议，使用 RTP（实时传输协议）传输媒体数据，并通过 ICE（交互式连接建立）机制解决网络障碍（如 NAT 和防火墙），确保低延迟和高可靠性。

代码示例：

navigator.mediaDevices.getUserMedia({
    video: true, audio: true })
  .then(stream => {
   
    const peer = new RTCPeerConnection();
    stream.getTracks().forEach(track => peer.addTrack(track, stream));
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();
    document.body.appendChild(video);
  })
  .catch(err => console.error('媒体捕获失败:', err));

应用场景：

• 视频会议系统（如 Zoom）。
• 实时游戏中的语音聊天。

---

2. WebSocket 和 HTTP 的主要区别是什么？它们分别适用于哪些场景？

答案解析
WebSocket 和 HTTP 是两种不同的通信协议，主要区别如下：

• 通信模式：
  • HTTP 是请求-响应模型，客户端发起请求，服务器单次响应，适合单向数据获取。
  • WebSocket 是全双工协议，连接建立后双方可随时发送消息，适合实时双向通信。
• 协议基础：
  • HTTP 使用 TCP，基于文本格式（请求头+正文）。
  • WebSocket 也基于 TCP，但通过 HTTP 握手升级后，使用二进制帧传输数据。
• 连接特性：
  • HTTP 是无状态的短连接（或通过长轮询模拟实时性）。
  • WebSocket 是持久连接，握手后保持开放。
• 开销：HTTP 每次请求携带完整头部，WebSocket 仅传输数据帧，开销更低。

代码示例：

// HTTP 请求
fetch('/api/data').then(res => res.json()).then(data => console.log(data));

// WebSocket
const ws = new WebSocket('ws://example.com');
ws.onopen = () => ws.send('Hello');
ws.onmessage = (e) => console.log('收到:', e.data);

应用场景：

• HTTP：静态网页加载、RESTful API 调用。
• WebSocket：实时聊天、股票价格推送。

---

3. WebRTC 的信令过程是如何工作的？需要哪些步骤？

答案解析
WebRTC 的信令过程是建立 P2P 连接的前置步骤，用于交换连接信息（如 SDP 和 ICE 候选者）。WebRTC 不提供信令服务器，需开发者自行实现（通常使用 WebSocket 或 HTTP）。具体步骤：

1. 创建 RTCPeerConnection：初始化连接对象。
2. 生成 Offer：调用 createOffer 生成 SDP（会话描述协议），描述媒体能力。
3. 设置本地描述：通过 setLocalDescription 保存 Offer。
4. 发送 Offer：通过信令服务器将 Offer 发送给对端。
5. 接收 Offer 并生成 Answer：对端调用 setRemoteDescription 设置 Offer，再通过 createAnswer 生成 Answer。
6. 设置远程描述：双方设置对方的 SDP。
7. 交换 ICE 候选者：通过 onicecandidate 事件收集并交换网络地址。
8. 连接建立：候选者协商完成后，P2P 连接生效。

代码示例：

const peer = new RTCPeerConnection();
peer.onicecandidate = (e) => e.candidate && sendToServer({
    candidate: e.candidate });
peer.createOffer()
  .then(offer => peer.setLocalDescription(offer))
  .then(() => sendToServer({
    sdp: peer.localDescription }))
  .catch(err => console.error('Offer 失败:', err));

// 处理接收到的信令数据
function handleSignalingData(data) {
   
  if (data.sdp) peer.setRemoteDescription(new RTCSessionDescription(data.sdp));
  if (data.candidate) peer.addIceCandidate(new RTCIceCandidate(data.candidate));
}

应用场景：

• 视频会议中的用户连接协调。
• 实时对战游戏的玩家匹配。

---

4. Web Audio API 的基本工作原理是什么？如何使用它处理音频？

答案解析
Web Audio API 是一个强大的音频处理框架，基于节点图（Audio Node）处理音频流。其工作原理：

• AudioContext：音频处理的核心环境，管理所有音频操作。
• 节点连接：音频流从源节点（如 MediaElementSourceNode）经过效果节点（如 GainNode），最终输出到目标节点（如扬声器）。
• 实时性：支持动态调整参数，实现复杂的音频效果（如音量、滤波）。
  常用节点包括：
• OscillatorNode：生成波形。
• BiquadFilterNode：滤波器。
• AnalyserNode：分析音频数据。

代码示例：

const audioCtx = new AudioContext();
const audio = document.querySelector('audio');
const source = audioCtx.createMediaElementSource(audio);
const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.5; // 降低音量
source.connect(gainNode).connect(audioCtx.destination);
audio.play();

应用场景：

• 音乐播放器的音量调节。
• 游戏中的音效处理。

---

5. WebSocket 的握手过程具体包含哪些步骤？如何验证连接成功？

答案解析
WebSocket 的握手过程通过 HTTP 协议完成，用于从 HTTP 升级到 WebSocket。步骤如下：

1. 客户端发送请求：发起 HTTP GET 请求，包含关键头部：
   • Upgrade: websocket：请求协议升级。
   • Connection: Upgrade：表明连接需升级。
   • Sec-WebSocket-Key：随机 Base64 编码的密钥（如 “dGhlIHNhbXBsZSBub25jZQ==”）。
   • Sec-WebSocket-Version: 13：指定协议版本。
2. 服务器响应：返回 HTTP 101 状态码，头部包括：
   • Upgrade: websocket：确认升级。
   • Connection: Upgrade：确认连接类型。
   • Sec-WebSocket-Accept：基于客户端 Key 计算的值（Key + “258EAFA5-E914-47DA-95CA-C5AB0DC85B11” 的 SHA-1 哈希后 Base64 编码）。
3. 连接验证：客户端通过 onopen 事件确认连接成功。

代码示例：

const ws = new WebSocket('ws://example.com');
ws.onopen = () => console.log('握手成功，连接建立');
ws.onmessage = (e) => console.log('收到消息:', e.data);
ws.onerror = (err) => console.error('握手失败:', err);

应用场景：

• 实时聊天应用的初始化。
• 服务器推送服务的连接建立。

---

6. WebRTC 如何通过 STUN 和 TURN 解决 NAT 穿透问题？

答案解析
WebRTC 使用 ICE（Interactive Connectivity Establishment）框架解决 NAT 穿透问题，核心组件是 STUN 和 TURN：

• STUN（Session Traversal Utilities for NAT）：
  • 作用：客户端通过 STUN 服务器获取公网 IP 和端口（反射地址）。
  • 适用场景：非对称 NAT，允许直接 P2P 连接。
• TURN（Traversal Using Relays around NAT）：
  • 作用：当 P2P 失败时，TURN 服务器中继数据。
  • 适用场景：对称 NAT 或严格防火墙。
• 工作流程：
  1. 配置 ICE 服务器（STUN/TURN）。
  2. 收集候选者（主机、反射、中继）。
  3. 交换候选者并测试连接性，选择最佳路径。

代码示例：

const config = {
   
  iceServers: [
    {
    urls: 'stun:stun.l.google.com:19302' },
    {
    urls: 'turn:turn.example.com', username: 'user', credential: 'pass' }
  ]
};
const peer = new RTCPeerConnection(config);
peer.onicecandidate = (e) => e.candidate && console.log('候选者:', e.candidate);

应用场景：

• 跨网络的视频通话。
• 企业内网与公网间的通信。

---

7. 如何使用 WebRTC 实现屏幕共享功能？

答案解析
WebRTC 通过 navigator.mediaDevices.getDisplayMedia 获取屏幕流，实现屏幕共享。步骤：

1. 调用 getDisplayMedia，用户选择共享内容（屏幕、窗口或标签）。
2. 获取的 MediaStream 可直接显示或通过 RTCPeerConnection 传输给对端。
3. 对端通过 ontrack 事件接收并显示流。

代码示例：

navigator.mediaDevices.getDisplayMedia({
    video: true })
  .then(stream => {
   
    const peer = new RTCPeerConnection();
    stream.getTracks().forEach(track => peer.addTrack(track, stream));
    const video = document.createElement('video');
    video.srcObject = stream;
    video.play();
    document.body.appendChild(video);
    peer.ontrack = (e) => console.log('对端收到屏幕流');
  })
  .catch(err => console.error('屏幕共享失败:', err));

应用场景：

• 远程技术支持的屏幕演示。
• 在线教育中的桌面共享。

---

8. WebSocket 如何支持二进制数据传输？有哪些使用场景？

答案解析
WebSocket 默认传输文本数据，通过设置 binaryType 属性支持二进制数据（ArrayBuffer 或 Blob）。过程：

• 发送：使用 send 方法传输二进制数据，服务器需解析对应格式。
• 接收：根据 binaryType（默认 “blob”，可设为 “arraybuffer”），onmessage 返回相应类型。
• 优势：高效传输结构化或大容量数据。

代码示例：

const ws = new WebSocket('ws://example.com');
ws.binaryType = 'arraybuffer';
ws.onopen = () => {
   
  const data = new Uint8Array([1, 2, 3]).buffer;
  ws.send(data);
};
ws.onmessage = (e) => {
   
  const received = new Uint8Array(e.data);
  console.log('收到二进制:', received);
};

应用场景：

• 文件分片传输。
• 实时游戏的状态数据同步。

---

9. WebRTC 的 RTCDataChannel 有什么功能？如何使用它传输数据？

答案解析
RTCDataChannel 是 WebRTC 的数据通道，用于 P2P 传输任意数据（如文本、二进制）。功能：

• 低延迟：基于 UDP，适合实时应用。
• 灵活性：支持可靠（TCP 式）或不可靠（UDP 式）传输。
• 安全性：与音视频流共享 DTLS 加密。
  使用步骤：

1. 在 RTCPeerConnection 上创建通道。
2. 配置通道属性（如 ordered）。
3. 通过 send 发送数据，onmessage 接收。

代码示例：

const peer = new RTCPeerConnection();
const channel = peer.createDataChannel('chat', {
    ordered: true });
channel.onopen = () => channel.send('Hello from RTCDataChannel');
channel.onmessage = (e) => console.log('收到:', e.data);
peer.ondatachannel = (e) => {
   
  const remoteChannel = e.channel;
  remoteChannel.onmessage = (e) => console.log('对端消息:', e.data);
};

应用场景：

• 视频会议中的文字聊天。
• 多人游戏的数据同步。

---

10. 如何在 WebRTC 中实现音频或视频的开关控制？

答案解析
WebRTC 通过 MediaStreamTrack 的 enabled 属性控制音频或视频的开关：

• 音频静音：设置 audioTrack.enabled = false，暂停音频传输但保留轨道。
• 视频关闭：设置 videoTrack.enabled = false，暂停视频流。
• 优势：不中断连接，切换灵活。

代码示例：

navigator.mediaDevices.getUserMedia({
    audio: true, video: true })
  .then(stream => {
   
    const audioTrack = stream.getAudioTracks()[0];
    const videoTrack = stream.getVideoTracks()[0];
    document.getElementById('muteAudio').onclick = () => audioTrack.enabled = !audioTrack.enabled;
    document.getElementById('muteVideo').onclick = () => videoTrack.enabled = !videoTrack.enabled;
  });

应用场景：

• 视频会议中的静音功能。
• 直播中的视频暂停。

---

11. WebSocket 的心跳机制如何实现？为什么要使用它？

答案解析
心跳机制通过定期发送消息检测 WebSocket 连接状态，防止因网络问题或服务器超时导致断开。实现步骤：

1. 客户端定时（如每 30 秒）发送轻量消息（如 “ping”）。
2. 服务器收到后响应（如 “pong”）。
3. 若未收到响应，触发重连逻辑。

• 必要性：避免连接无声中断，确保实时性。

代码示例：

const ws = new WebSocket('ws://example.com');
let heartbeat;
ws.onopen = () => {
   
  heartbeat = setInterval(() => ws.send('ping'), 30000);
};
ws.onmessage = (e) => {
   
  if (e.data === 'pong') console.log('心跳正常');
};
ws.onclose = () => clearInterval(heartbeat);

应用场景：

• 实时监控系统的心跳检测。
• 聊天应用的长连接维持。

---

12. WebRTC 的 SDP（会话描述协议）包含哪些信息？如何解析？

答案解析
SDP 是 WebRTC 中用于协商会话的文本协议，包含以下关键信息：

• 版本：v=0，协议版本。
• 会话信息：o=，发起者标识和会话 ID。
• 媒体描述：m=，如 m=video 9 UDP/TLS/RTP/SAVPF 96，定义媒体类型和协议。
• 编解码：a=rtpmap，如 a=rtpmap:96 VP8/90000，指定支持的编解码器。
• 连接信息：c=，网络地址。
• ICE 参数：a=candidate，候选者地址。
  浏览器自动解析 SDP，开发者可通过日志分析。

代码示例：

const peer = new RTCPeerConnection();
peer.createOffer().then(offer => {
   
  console.log('SDP:', offer.sdp);
  peer.setLocalDescription(offer);
});

应用场景：

• 调试 WebRTC 连接问题。
• 分析媒体协商结果。

---

13. 如何使用 Web Audio API 实现音频频谱可视化？

答案解析
Web Audio API 通过 AnalyserNode 获取音频的频率数据，用于可视化。步骤：

1. 创建 AudioContext 和 AnalyserNode。
2. 将音频源连接到分析器和输出。
3. 使用 getByteFrequencyData 获取数据并绘制到 Canvas。

代码示例：

const audioCtx = new AudioContext();
const audio = document.querySelector('audio');
const source = audioCtx.createMediaElementSource(audio);
const analyser = audioCtx.createAnalyser();
analyser.fftSize = 256;
source.connect(analyser).connect(audioCtx.destination);
const dataArray = new Uint8Array(analyser.frequencyBinCount);
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
function draw() {
   
  analyser.getByteFrequencyData(dataArray);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const barWidth = canvas.width / dataArray.length;
  dataArray.forEach((value, i) => ctx.fillRect(i * barWidth, canvas.height - value, barWidth - 1, value));
  requestAnimationFrame(draw);
}
audio.play();
draw();

应用场景：

• 音乐播放器的频谱效果。
• 直播中的声音可视化。

---

14. WebRTC 如何处理网络丢包和延迟？

答案解析
WebRTC 通过以下机制应对丢包和延迟：

• RTP/RTCP：RTP 传输数据，RTCP 提供丢包率和延迟反馈，动态调整策略。
• FEC（前向纠错）：发送冗余包以恢复丢包。
• 拥塞控制：通过带宽估计（如 GCC）调整码率。
• Jitter Buffer：缓冲区平滑网络抖动。
  这些功能内置于浏览器，开发者可通过统计数据监控。

代码示例：

const peer = new RTCPeerConnection();
peer.getStats().then(stats => {
   
  stats.forEach(report => {
   
    if (report.type === 'inbound-rtp') console.log('丢包:', report.packetsLost, '延迟:', report.jitter);
  });
});

应用场景：

• 弱网环境下的视频通话。
• 直播流畅性优化。

---

15. WebSocket 的数据帧结构是什么？如何解析？

答案解析
WebSocket 的数据帧结构如下：

• FIN（1 bit）：是否为消息的最后一帧（1 表示结束）。
• Opcode（4 bits）：消息类型（如 0x1 文本，0x2 二进制，0x8 关闭）。
• Mask（1 bit）：客户端发送时为 1，表示数据已掩码。
• Payload Length（7/7+16/7+64 bits）：数据长度，取决于大小。
• Masking Key（0 或 32 bits）：掩码密钥，用于解码客户端数据。
• Payload Data：实际数据。
  浏览器自动解析，开发者无需手动处理，但了解结构有助于调试。

代码示例：

const ws = new WebSocket('ws://example.com');
ws.onmessage = (e) => console.log('收到帧数据:', e.data); // 自动解析

应用场景：

• 调试 WebSocket 协议问题。
• 自定义 WebSocket 实现。

---

16. 如何在 WebRTC 中动态调整视频分辨率？

答案解析
WebRTC 支持通过 applyConstraints 动态调整视频分辨率。步骤：

1. 使用 getUserMedia 获取初始流并指定分辨率。
2. 对 MediaStreamTrack 调用 applyConstraints 修改参数。
   调整会触发编码器重新协商，影响带宽和质量。

代码示例：

navigator.mediaDevices.getUserMedia({
    video: {
    width: 1280, height: 720 } })
  .then(stream => {
   
    const videoTrack = stream.getVideoTracks()[0];
    setTimeout(() => {
   
      videoTrack.applyConstraints({
    width: 640, height: 360 })
        .then(() => console.log('分辨率调整成功'))
        .catch(err => console.error('调整失败:', err));
    }, 5000);
  });

应用场景：

• 根据网络状况调整视频质量。
• 用户切换清晰度选项。

---

17. WebSocket 如何实现多人消息广播功能？

答案解析
WebSocket 的多人广播通过服务器维护客户端连接池实现。步骤：

1. 服务器监听 connection 事件，将新客户端加入池中。
2. 收到消息时，遍历池中所有客户端并发送。
3. 客户端断开时从池中移除。

代码示例（Node.js + ws）：

const WebSocket = require('ws');
const wss = new WebSocket.Server({
    port: 8080 });
const clients = new Set();
wss.on('connection', (ws) => {
   
  clients.add(ws);
  ws.on('message', (msg) => {
   
    clients.forEach(client => {
   
      if (client.readyState === WebSocket.OPEN) client.send(msg);
    });
  });
  ws.on('close', () => clients.delete(ws));
});

应用场景：

• 群聊消息分发。
• 实时多人游戏状态广播。

---

18. WebRTC 的 ICE 候选者有哪些类型？它们的作用是什么？

答案解析
ICE 候选者是 WebRTC 用于建立连接的网络地址，类型包括：

• Host Candidate：本地设备的 IP 和端口，用于局域网通信。
• Server-Reflexive Candidate (srflx)：通过 STUN 获取的公网 IP 和端口，适用于非对称 NAT。
• Relay Candidate：通过 TURN 中继的地址，适用于对称 NAT 或防火墙。
  作用：提供多种连接路径，WebRTC 测试并选择最优的候选者对。

代码示例：

const peer = new RTCPeerConnection({
    iceServers: [{
    urls: 'stun:stun.l.google.com:19302' }] });
peer.onicecandidate = (e) => e.candidate && console.log('类型:', e.candidate.type);

应用场景：

• 网络连接性测试。
• 优化 P2P 路径选择。

---

19. 如何使用 Web Audio API 实现多声道音频混音？

答案解析
Web Audio API 通过将多个音频源连接到同一输出节点实现混音。步骤：

1. 创建 AudioContext。
2. 为每个音频创建 MediaElementSourceNode。
3. 连接到 audioCtx.destination。

代码示例：

const audioCtx = new AudioContext();
const audioElements = [document.querySelector('#audio1'), document.querySelector('#audio2')];
const sources = audioElements.map(el => audioCtx.createMediaElementSource(el));
sources.forEach(source => source.connect(audioCtx.destination));
audioElements.forEach(el => el.play());

应用场景：

• 多路音频会议的本地混音。
• 音乐播放器叠加音效。

---

20. WebRTC 如何通过 RTCDataChannel 实现文件传输？

答案解析
RTCDataChannel 支持二进制数据传输，可用于分片发送文件。步骤：

1. 将文件切分为小块（如 16KB）。
2. 通过 send 方法逐片发送。
3. 对端接收并重组文件。

代码示例：

const peer = new RTCPeerConnection();
const channel = peer.createDataChannel('file');
const file = document.querySelector('input[type="file"]').files[0];
const chunkSize = 16384;
channel.onopen = () => {
   
  let offset = 0;
  const sendNextChunk = () => {
   
    const chunk = file.slice(offset, offset + chunkSize);
    channel.send(chunk);
    offset += chunkSize;
    if (offset < file.size) sendNextChunk();
  };
  sendNextChunk();
};
channel.onmessage = (e) => console.log('收到分片:', e.data);

应用场景：

• P2P 文件共享。
• 视频会议中的文件传输。

---

21. WebSocket 如何处理连接超时和断线重连？

答案解析
WebSocket 连接可能因网络问题断开，处理方法：

• 超时检测：设置定时器，若未收到消息则关闭连接。
• 断线重连：监听 onclose，使用指数退避策略重连（延迟逐渐增加）。
• 状态管理：避免重复连接尝试。

代码示例：

let ws, timeout;
function connect() {
   
  ws = new WebSocket('ws://example.com');
  ws.onopen = () => console.log('连接成功');
  ws.onclose = () => {
   
    console.log('断开，尝试重连');
    timeout = setTimeout(connect, 2000);
  };
  ws.onerror = () => ws.close();
}
connect();

应用场景：

• 实时监控系统的连接恢复。
• 聊天应用的长连接管理。

---

22. WebRTC 的音视频流如何实现加密保护？

答案解析
WebRTC 使用 DTLS-SRTP 加密音视频流：

• DTLS（Datagram Transport Layer Security）：协商加密密钥，建立安全通道。
• SRTP（Secure Real-time Transport Protocol）：加密 RTP 数据包，保护传输内容。
  加密过程由浏览器自动完成，所有流默认加密，无需开发者干预。

代码示例：

const peer = new RTCPeerConnection();
peer.ontrack = (e) => {
   
  const video = document.createElement('video');
  video.srcObject = e.streams[0];
  video.play();
  document.body.appendChild(video); // 流已加密
};

应用场景：

• 视频会议的隐私保护。
• 直播内容的防窃取。

---

23. 如何在 WebRTC 中启用回声消除功能？

答案解析
WebRTC 内置回声消除（AEC），通过 getUserMedia 的 constraints 启用。

• 原理：分析麦克风输入和扬声器输出，移除回声信号。
• 参数：echoCancellation: true（默认启用）。

代码示例：

navigator.mediaDevices.getUserMedia({
   
  audio: {
    echoCancellation: true, noiseSuppression: true }
})
  .then(stream => console.log('回声消除已启用'))
  .catch(err => console.error('获取失败:', err));

应用场景：

• 免提通话的声音优化。
• 会议室多人语音场景。

---

24. WebSocket 如何处理超大消息的传输？

答案解析
WebSocket 协议未定义最大消息大小，但实现可能有限制。处理方法：

• 分片传输：将大消息拆分为小块，逐片发送。
• 服务器配置：调整缓冲区大小（如 Node.js ws 库）。
• 协议约定：与客户端协商分片规则。

代码示例：

const ws = new WebSocket('ws://example.com');
const largeMessage = new Array(1000000).join('x');
ws.onopen = () => {
   
  const chunkSize = 8192;
  for (let i = 0; i < largeMessage.length; i += chunkSize) {
   
    ws.send(largeMessage.slice(i, i + chunkSize));
  }
};

应用场景：

• 大型日志实时上传。
• 文件流式传输。

---

25. WebRTC 的带宽估计机制是如何实现的？

答案解析
WebRTC 使用拥塞控制算法（如 Google Congestion Control, GCC）估计带宽：

• RTCP 反馈：接收端通过 RTCP Receiver Reports 报告丢包率和延迟。
• 动态调整：发送端根据反馈调整码率、分辨率或帧率。
• 内置实现：由浏览器自动管理，开发者可通过 getStats 监控。

代码示例：

const peer = new RTCPeerConnection();
peer.getStats().then(stats => {
   
  stats.forEach(report => {
   
    if (report.type === 'outbound-rtp') console.log('发送码率:', report.bytesSent);
  });
});

应用场景：

• 自适应网络的视频质量。
• 弱网环境下的流畅性优化。

---

26. 如何使用 Web Audio API 添加音频滤波效果？

答案解析
Web Audio API 通过 BiquadFilterNode 添加滤波效果（如低通、高通）。步骤：

1. 创建 BiquadFilterNode。
2. 设置滤波类型和频率参数。
3. 连接到音频处理链。

代码示例：

const audioCtx = new AudioContext();
const audio = document.querySelector('audio');
const source = audioCtx.createMediaElementSource(audio);
const filter = audioCtx.createBiquadFilter();
filter.type = 'lowpass';
filter.frequency.value = 1000; // 低通 1000Hz
source.connect(filter).connect(audioCtx.destination);
audio.play();

应用场景：

• 音频均衡器的低音增强。
• 通话中的高频噪声过滤。

---

27. WebRTC 如何实现 Mesh 架构的多方视频通话？

答案解析
Mesh 架构中，每方与所有其他方建立独立的 RTCPeerConnection，适合少人数通话。步骤：

1. 为每个对端创建 PeerConnection。
2. 添加本地流到每个连接。
3. 处理对端流并显示。

• 缺点：连接数随人数平方增长（n*(n-1)/2），带宽需求高。

代码示例：

const peers = {
   };
const localStream = await navigator.mediaDevices.getUserMedia({
    video: true });
users.forEach(userId => {
   
  const peer = new RTCPeerConnection();
  localStream.getTracks().forEach(track => peer.addTrack(track, localStream));
  peer.ontrack = (e) => {
   
    const video = document.createElement('video');
    video.srcObject = e.streams[0];
    video.play();
    document.body.appendChild(video);
  };
  peers[userId] = peer;
});

应用场景：

• 小型团队视频会议。
• 去中心化通信。

---

28. WebSocket 如何实现订阅/发布模式？

答案解析
订阅/发布模式通过服务器管理主题实现，客户端订阅后接收相关消息。步骤：

1. 客户端发送订阅请求（如 { type: 'subscribe', topic: 'news' }）。
2. 服务器维护主题和客户端映射。
3. 发布消息时，按主题广播。

代码示例（Node.js + ws）：

const WebSocket = require('ws');
const wss = new WebSocket.Server({
    port: 8080 });
const subscriptions = new Map();
wss.on('connection', (ws) => {
   
  ws.on('message', (msg) => {
   
    const data = JSON.parse(msg);
    if (data.type === 'subscribe') {
   
      if (!subscriptions.has(data.topic)) subscriptions.set(data.topic, new Set());
      subscriptions.get(data.topic).add(ws);
    } else if (data.type === 'publish') {
   
      subscriptions.get(data.topic)?.forEach(client => client.send(data.message));
    }
  });
});

应用场景：

• 实时新闻推送。
• 股票价格订阅。

---

29. WebRTC 的 TURN 服务器有什么作用？如何配置？

答案解析
TURN 服务器在 WebRTC 中作为中继，用于解决 P2P 连接失败的情况。作用：

• 数据中继：转发音视频流，绕过 NAT 和防火墙。
• 连接保障：提高成功率。
  配置时需提供 TURN 地址、用户名和密码，通常与 STUN 一起使用。

代码示例：

const config = {
   
  iceServers: [
    {
    urls: 'turn:turn.example.com:3478', username: 'user', credential: 'pass' }
  ]
};
const peer = new RTCPeerConnection(config);

应用场景：

• 企业防火墙后的通信。
• 高可靠性视频通话。

---

30. 如何在 WebRTC 中检测连接状态的变化？

答案解析
WebRTC 通过 RTCPeerConnection 的事件检测连接状态：

• iceconnectionstatechange：ICE 连接状态（如 “connected”、“disconnected”）。
• connectionstatechange：整体连接状态（如 “connected”、“failed”）。
  状态变化可用于界面提示或重连逻辑。

代码示例：

const peer = new RTCPeerConnection();
peer.oniceconnectionstatechange = () => console.log('ICE 状态:', peer.iceConnectionState);
peer.onconnectionstatechange = () => console.log('连接状态:', peer.connectionState);

应用场景：

• 显示通话连接进度。
• 检测掉线并通知用户。

---

31. WebSocket 如何实现身份验证？

答案解析
WebSocket 的身份验证可在握手或消息层面实现：

• 握手验证：通过 URL 参数或自定义头部传递 Token，服务器验证后完成握手。
• 消息验证：连接后发送认证消息（如 { token: 'xxx' }），服务器校验。
• 安全性：建议结合 HTTPS（wss://）加密传输。

代码示例：

const ws = new WebSocket('wss://example.com?token=abc123');
ws.onopen = () => console.log('连接成功，Token 已发送');

应用场景：

• 限制聊天室访问权限。
• 保护实时数据推送。

---

32. WebRTC 如何调整视频帧率？

答案解析
WebRTC 通过 constraints 设置或调整视频帧率。方法：

• 初始设置：在 getUserMedia 中指定 frameRate。
• 动态调整：对 MediaStreamTrack 调用 applyConstraints。

代码示例：

navigator.mediaDevices.getUserMedia({
    video: {
    frameRate: 30 } })
  .then(stream => {
   
    const videoTrack = stream.getVideoTracks()[0];
    setTimeout(() => videoTrack.applyConstraints({
    frameRate: 15 }), 5000);
  });

应用场景：

• 降低帧率节省带宽。
• 动态调整直播流畅度。

---

33. 如何使用 Web Audio API 实现音频淡入淡出效果？

答案解析
Web Audio API 通过 GainNode 的 gain 参数实现淡入淡出，使用 linearRampToValueAtTime 创建平滑过渡。步骤：

1. 创建 GainNode。
2. 设置淡入/淡出的时间和目标值。

code示例：

const audioCtx = new AudioContext();
const source = audioCtx.createMediaElementSource(audioElement);
const gainNode = audioCtx.createGain();
source.connect(gainNode).connect(audioCtx.destination);
gainNode.gain.setValueAtTime(0, audioCtx.currentTime); // 淡入起始
gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 2); // 2秒淡入
setTimeout(() => gainNode.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 2), 5000); // 5秒后淡出

应用场景：

• 音频播放器的平滑切换。
• 游戏音效的渐变。

---

34. WebRTC 的 P2P 连接失败时如何处理？

答案解析
P2P 连接失败通常由网络限制引起，处理方法：

• 使用 TURN：配置 TURN 服务器中继流量。
• 状态检测：通过 iceconnectionstatechange 检测 “failed” 状态。
• 重试逻辑：重新创建 RTCPeerConnection 并尝试连接。

代码示例：

const peer = new RTCPeerConnection({
    iceServers: [{
    urls: 'turn:turn.example.com', username: 'user', credential: 'pass' }] });
peer.oniceconnectionstatechange = () => {
   
  if (peer.iceConnectionState === 'failed') console.log('P2P 失败，使用 TURN 中继');
};

应用场景：

• 弱网环境下的连接保障。
• 高可靠性通话场景。

---

35. WebSocket 的关闭码和原因如何使用？

答案解析
WebSocket 关闭时可指定关闭码（状态码）和原因（文本描述）：

• 关闭码：1000 表示正常关闭，其他如 1001（离开）、1009（消息过大）。
• 原因：可选的关闭原因字符串。
  客户端和服务器可通过 onclose 获取。

代码示例：

const ws = new WebSocket('ws://example.com');
ws.onopen = () => setTimeout(() => ws.close(1000, '正常关闭'), 5000);
ws.onclose = (e) => console.log('关闭码:', e.code, '原因:', e.reason);

应用场景：

• 通知客户端连接终止原因。
• 调试连接关闭问题。

---

36. 如何在 WebRTC 中启用音频降噪？

答案解析
WebRTC 内置音频降噪（Noise Suppression），通过 getUserMedia 的 constraints 启用。

• 原理：过滤背景噪声，提升语音清晰度。
• 参数：noiseSuppression: true。

代码示例：

navigator.mediaDevices.getUserMedia({
   
  audio: {
    noiseSuppression: true, echoCancellation: true }
})
  .then(stream => console.log('降噪已启用'));

应用场景：

• 嘈杂环境下的通话优化。
• 会议中的语音增强。

---

37. WebSocket 如何防止消息积压？

答案解析
消息积压发生在发送速率超过处理速率时，解决方法：

• 缓冲区检查：通过 bufferedAmount 检测未发送数据量。
• 限流：暂停发送或丢弃低优先级消息。
• 异步处理：将消息处理移到 Worker 中。

代码示例：

const ws = new WebSocket('ws://example.com');
ws.onopen = () => {
   
  setInterval(() => {
   
    if (ws.bufferedAmount < 1024) ws.send('消息');
    else console.log('缓冲区满，暂停发送');
  }, 100);
};

应用场景：

• 高频数据推送的流量控制。
• 实时日志传输优化。

---

38. WebRTC 的媒体流克隆有什么作用？

答案解析
媒体流克隆通过 clone() 方法创建流的副本，保留原始流的轨道引用。作用：

• 多用途：将同一流用于本地显示和远程传输。
• 独立控制：副本可独立操作（如停止某个轨道）。

代码示例：

navigator.mediaDevices.getUserMedia({
    video: true })
  .then(stream => {
   
    const clonedStream = stream.clone();
    const localVideo = document.createElement('video');
    localVideo.srcObject = clonedStream;
    localVideo.play();
    document.body.appendChild(localVideo);
  });

应用场景：

• 本地预览和远程发送分离。
• 多路流处理。

---

39. 如何使用 Web Audio API 实现立体声分离？

答案解析
Web Audio API 通过 ChannelSplitterNode 分离立体声通道。步骤：

1. 创建 ChannelSplitterNode，指定通道数。
2. 将音频源连接到分离器。
3. 分别处理左右声道。

代码示例：

const audioCtx = new AudioContext();
const audio = document.querySelector('audio');
const source = audioCtx.createMediaElementSource(audio);
const splitter = audioCtx.createChannelSplitter(2);
source.connect(splitter);
const leftGain = audioCtx.createGain();
const rightGain = audioCtx.createGain();
splitter.connect(leftGain, 0); // 左声道
splitter.connect(rightGain, 1); // 右声道
leftGain.connect(audioCtx.destination);
rightGain.connect(audioCtx.destination);
audio.play();

应用场景：

• 立体声效果调整。
• 音频分析工具。

---

40. WebRTC 如何支持自定义信令协议？

答案解析
WebRTC 的信令机制未标准化，开发者可自定义协议（如 JSON、Protobuf）。步骤：

1. 定义消息格式（如 { type: 'offer', sdp: '...' }）。
2. 通过 WebSocket 或 HTTP 传输信令数据。
3. 在客户端处理并调用 WebRTC API。

代码示例：

const ws = new WebSocket('ws://example.com');
const peer = new RTCPeerConnection();
ws.onmessage = (e)