当前位置：首页 > JavaScript

js实现语音通话

2026-03-16 05:10:18JavaScript

实现语音通话的基本方法

在JavaScript中实现语音通话通常需要结合WebRTC（Web Real-Time Communication）技术。WebRTC是一个开源项目，支持网页浏览器进行实时音视频通信，无需安装插件或第三方软件。

建立基本连接

使用WebRTC建立语音通话需要创建RTCPeerConnection对象。这个对象负责处理本地计算机与远程对等端之间的连接。

const configuration = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' }
  ]
};
const peerConnection = new RTCPeerConnection(configuration);

获取用户媒体流

通过navigator.mediaDevices.getUserMedia()方法获取用户的麦克风音频流。这个方法返回一个Promise，解析为MediaStream对象。

js实现语音通话

navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    // 将音频流添加到RTCPeerConnection
    stream.getTracks().forEach(track => {
      peerConnection.addTrack(track, stream);
    });
  })
  .catch(error => {
    console.error('获取麦克风权限失败:', error);
  });

处理信令交换

WebRTC需要信令服务器来交换SDP（Session Description Protocol）和ICE（Interactive Connectivity Establishment）候选信息。通常使用WebSocket或类似技术来实现。

// 创建offer
peerConnection.createOffer()
  .then(offer => {
    return peerConnection.setLocalDescription(offer);
  })
  .then(() => {
    // 通过信令服务器发送offer到远程对等端
    sendSignalingMessage({
      type: 'offer',
      sdp: peerConnection.localDescription
    });
  });

// 监听ICE候选
peerConnection.onicecandidate = event => {
  if (event.candidate) {
    sendSignalingMessage({
      type: 'candidate',
      candidate: event.candidate
    });
  }
};

处理远程连接

接收并处理来自远程对等端的offer、answer和ICE候选。

js实现语音通话

// 处理远程offer
function handleRemoteOffer(offer) {
  peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
    .then(() => {
      return peerConnection.createAnswer();
    })
    .then(answer => {
      return peerConnection.setLocalDescription(answer);
    })
    .then(() => {
      sendSignalingMessage({
        type: 'answer',
        sdp: peerConnection.localDescription
      });
    });
}

// 处理远程answer
function handleRemoteAnswer(answer) {
  peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
}

// 处理远程ICE候选
function handleRemoteCandidate(candidate) {
  peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
}

处理媒体流

当远程流到达时，可以将其连接到音频元素进行播放。

peerConnection.ontrack = event => {
  const audioElement = document.getElementById('remoteAudio');
  audioElement.srcObject = event.streams[0];
};

完整示例

以下是一个简化的完整示例代码框架：

// 初始化连接
const peerConnection = new RTCPeerConnection(configuration);

// 获取本地媒体流
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    stream.getTracks().forEach(track => {
      peerConnection.addTrack(track, stream);
    });
  });

// 信令处理
function sendSignalingMessage(message) {
  // 实现发送信令消息的逻辑
}

// 处理收到的信令消息
function handleSignalingMessage(message) {
  if (message.type === 'offer') {
    handleRemoteOffer(message.sdp);
  } else if (message.type === 'answer') {
    handleRemoteAnswer(message.sdp);
  } else if (message.type === 'candidate') {
    handleRemoteCandidate(message.candidate);
  }
}

// 启动呼叫
function startCall() {
  peerConnection.createOffer()
    .then(offer => peerConnection.setLocalDescription(offer))
    .then(() => sendSignalingMessage({
      type: 'offer',
      sdp: peerConnection.localDescription
    }));
}