当前位置：首页 > JavaScript

webrtc js实现

2026-04-06 16:00:04JavaScript

WebRTC JavaScript 实现

WebRTC（Web Real-Time Communication）是一种支持浏览器之间实时音视频通信的技术。以下是通过JavaScript实现WebRTC的基本流程和代码示例。

建立连接的基本流程

获取媒体流 使用getUserMediaAPI获取用户的音视频流。

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(stream => {
        localVideo.srcObject = stream;
        localStream = stream;
    })
    .catch(error => console.error('Error accessing media devices:', error));

创建RTCPeerConnection 实例化一个RTCPeerConnection对象，配置ICE服务器（如Google的公共STUN服务器）。

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

添加媒体流到连接 将获取的本地流添加到RTCPeerConnection中。

webrtc js实现

localStream.getTracks().forEach(track => {
    peerConnection.addTrack(track, localStream);
});

处理ICE候选 监听icecandidate事件，收集ICE候选信息并发送给对方。

peerConnection.onicecandidate = event => {
    if (event.candidate) {
        // 发送候选信息给对方
        sendCandidate(event.candidate);
    }
};

创建和交换SDP 发起方创建offer，接收方创建answer，并通过信令服务器交换SDP。

webrtc js实现

// 发起方创建offer
peerConnection.createOffer()
    .then(offer => peerConnection.setLocalDescription(offer))
    .then(() => {
        // 发送offer给对方
        sendOffer(peerConnection.localDescription);
    });

// 接收方处理offer并创建answer
peerConnection.setRemoteDescription(remoteOffer)
    .then(() => peerConnection.createAnswer())
    .then(answer => peerConnection.setLocalDescription(answer))
    .then(() => {
        // 发送answer给对方
        sendAnswer(peerConnection.localDescription);
    });

处理远程流 监听track事件，获取对方的媒体流并显示。

peerConnection.ontrack = event => {
    remoteVideo.srcObject = event.streams[0];
};

信令服务器

WebRTC本身不包含信令机制，需要开发者自行实现或使用第三方服务交换SDP和ICE候选信息。常见的实现方式包括WebSocket或HTTP请求。

完整示例代码

以下是一个简化的完整示例：

// 获取本地媒体流
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
let localStream;
let peerConnection;

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then(stream => {
        localVideo.srcObject = stream;
        localStream = stream;
        setupPeerConnection();
    })
    .catch(error => console.error('Error:', error));

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

    // 添加本地流
    localStream.getTracks().forEach(track => {
        peerConnection.addTrack(track, localStream);
    });

    // 处理ICE候选
    peerConnection.onicecandidate = event => {
        if (event.candidate) {
            // 发送候选信息
            sendCandidate(event.candidate);
        }
    };

    // 处理远程流
    peerConnection.ontrack = event => {
        remoteVideo.srcObject = event.streams[0];
    };

    // 发起方创建offer
    peerConnection.createOffer()
        .then(offer => peerConnection.setLocalDescription(offer))
        .then(() => {
            // 发送offer
            sendOffer(peerConnection.localDescription);
        });
}

// 接收方处理offer
function handleOffer(offer) {
    peerConnection.setRemoteDescription(offer)
        .then(() => peerConnection.createAnswer())
        .then(answer => peerConnection.setLocalDescription(answer))
        .then(() => {
            // 发送answer
            sendAnswer(peerConnection.localDescription);
        });
}