webrtc web视频会议

### 使用 WebRTC 实现 Web 视频会议

为了创建基于 WebRTC 的视频会议应用程序，开发者可以利用多种技术栈来构建完整的解决方案。下面提供了一个简化版本的实现方案。

#### 准备工作

确保服务器支持 WebSocket 协议以便处理信令消息传递。客户端则需引入适配器库 `adapter.js` 来解决不同浏览器之间的兼容性差异[^1]。

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

#### 获取用户媒体设备权限

通过调用 W3C 标准定义的方法 `navigator.mediaDevices.getUserMedia()` 可以访问用户的摄像机与麦克风资源。此方法接收一个配置对象作为参数，指定了所需的音频和视频特性[^3]。

async function startCapture() {
    try {
        const constraints = { audio: true, video: { width: 640, height: 480 } };
        let stream = await navigator.mediaDevices.getUserMedia(constraints);
        document.getElementById('localVideo').srcObject = stream;
    } catch (err) {
        console.error("Failed to obtain media device", err);
    }
}

#### 创建 RTCPeerConnection 对象并交换 SDP 描述符

RTCPeerConnection 接口表示一次点对点连接会话，在其中完成 ICE 候选者收集、SDP 谈判等工作流程。双方都需要实例化此类，并互相发送本地描述信息给对方以达成一致协商过程[^2]。

let pc;

function createPeerConnection() {
    pc = new RTCPeerConnection();
    
    // 添加已捕获的流至 Peer Connection 中
    localStream.getTracks().forEach(track => pc.addTrack(track, localStream));

    // 当接收到远程轨道时自动播放
    pc.ontrack = event => {
        if (!document.getElementById('remoteVideo').srcObject) 
            document.getElementById('remoteVideo').srcObject = event.streams[0];
    };

    setupSignaling(pc); // 处理信号交互逻辑
}

// 发送 offer 或 answer 并监听 icecandidate 事件
function setupSignaling(peerConn){
    peerConn.onicecandidate = handleICECandidateEvent;
    sendOfferOrAnswerToRemoteSide();  
}

#### 完成整个呼叫建立周期

当一方发起邀请（offer），另一方响应接受（answer）。期间还需持续更新 ICE Candidate 列表直至成功握手形成稳定链路。上述操作均依赖于额外的消息通道机制如 Socket.IO 进行异步通讯。

function handleICECandidateEvent(event) {
    if (event.candidate != null) {
        signalingChannel.send(JSON.stringify({
            type: 'candidate',
            candidate: event.candidate,
        }));
    }
}

function sendOfferOrAnswerToRemoteSide(){
    if ('createOffer' in pc && !isCaller){
        pc.createOffer()
          .then(setLocalAndSendMessage)
          .catch(errorHandler);

        isCaller = true;        
    }

    async function setLocalAndSendMessage(sessionDescription){
        try{
            await pc.setLocalDescription(sessionDescription);
            
            sendMessage(sessionDescription);
        }catch(err){
            errorHandler(err);
        }
    }
}

以上就是使用 WebRTC 构建基本网络电话系统的概览介绍。实际部署过程中可能还需要考虑更多细节方面的问题比如防火墙穿越策略(NAT Traversal),TURN Server 配置等。