要使用WebRTC在瀏覽器間建立實(shí)時(shí)音視頻或數(shù)據(jù)傳輸，首先創(chuàng)建RTCPeerConnection並配置STUN服務(wù)器；1. 創(chuàng)建連接實(shí)例並處理ICE候選以穿越NAT和防火牆；2. 生成並交換offer和answer以協(xié)商連接；3. 添加本地媒體流並通過ontrack接收遠(yuǎn)程流；4. 監(jiān)聽狀態(tài)變化並正確清理資源以避免內(nèi)存洩漏。按照順序處理異步操作和必要步驟可確保連接成功。

WebRTC lets you connect browsers directly so users can share audio, video, or data in real time — no server needed for the actual media transfer. If you're trying to set up peer-to-peer communication using JavaScript and WebRTC, you're probably looking to build something like a video chat, screen sharing tool, or multiplayer game with low latency.

Here's how to get it working without getting stuck on common pitfalls.

Setting Up the Basic Connection

The first thing you need is an RTCPeerConnection instance. This is your main object for managing the connection between two peers.

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

This code creates a basic connection with a STUN server, which helps peers find each other through NATs or firewalls. Without this, direct connections often fail in real-world networks.

You'll also want to handle ICE candidates — these are potential network paths between the two users. You exchange them through your own signaling channel (like WebSocket or Firebase):

 peerConnection.onicecandidate = event => {
  if (event.candidate) {
    // Send candidate to remote peer via your signaling method
  }
};

Once both sides have exchanged ICE candidates, the connection should start forming automatically.

Generating and Exchanging Offers and Answers

To start a call, one side creates an offer:

 const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
// Send offer to the other peer

The receiving peer takes that offer and responds with an answer:

 await peerConnection.setRemoteDescription(offer);
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
// Send answer back to the original peer

Both sides must set the remote description (the offer or answer they received), and then the ICE process kicks in to negotiate the best way to connect.

A few things to watch:

• Make sure you wait for setLocalDescription before sending the offer or answer.
• Don't skip handling ICE candidates — missing even one can cause the connection to fail.

Adding Media Streams

If you're building a video chat, you'll need to capture local media and send it over:

 const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));

On the receiving end:

 peerConnection.ontrack = event => {
  const remoteVideo = document.getElementById('remote-video');
  remoteVideo.srcObject = event.streams[0];
};

This handles adding incoming video/audio to a DOM element. Note that ontrack fires once per track (so possibly twice if both audio and video are sent).

One thing people often miss: make sure you're listening for ontrack before setting the remote description, otherwise you might miss the event.

Handling Disconnections and Cleanup

Connections don't last forever. Browsers may renegotiate, users close tabs, or networks drop. You should handle these events gracefully:

 peerConnection.oniceconnectionstatechange = () => {
  if (peerConnection.iceConnectionState === 'disconnected') {
    console.log('Connection dropped');
    // Handle reconnect or clean up
  }
};

Also, when ending a call or navigating away, always close the connection:

 peerConnection.close();

And remove any references to streams or tracks to avoid memory leaks.

Setting up WebRTC doesn't have to be complicated, but there are enough moving parts that small mistakes — like not waiting for async calls or forgetting to add tracks — can break everything silently. Stick to the flow: create connection → generate offer/answer → exchange SDP and ICE candidates → add media → handle state changes.

基本上就這些。

以上是實(shí)施JavaScript WEBRTC進(jìn)行點(diǎn)對(duì)點(diǎn)交流的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！