WebRTC 工作流程

最新推荐文章于 2025-09-26 10:32:16 发布

转载最新推荐文章于 2025-09-26 10:32:16 发布 · 1.8k 阅读

文章标签：

#webrtc #视频聊天 #工作流程

WebRTC 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何使用WebRTC技术实现用户A与用户B之间的视频聊天。从双方上线、发起请求、媒体流获取到建立PeerConnection的过程，包括信令交换、创建Offer与Answer等步骤。还展示了具体的JavaScript代码实现。

转载自：WebRTC 工作流程

假设用户A想要和用户B进行视频聊天（使用 socket.io）

用户A                         服务器                         用户B
上线                                                        上线
emit 'online'  ->                                      <-   emit 'online'
                             on 'online'
                        <-   emit 'online'  ->
on 'online'                                                 on 'online'
获得在线用户列表                                               获得在线用户列表
选择用户B
确认要和用户B聊天
emit 'request chat'  ->
                             on 'request chat'
                             emit 'request chat'  ->
                                                             on 'request chat'
                                                             getUserMedia()
                                                         <-  emit 'stream ok'
                             on 'stream ok'
                         <-  emit 'stream ok'
on 'stream ok'
getUserMedia()
emit 'stream ok'  ->
                             on 'stream ok'
                             emit 'stream ok'  ->
                                                              on 'stream ok'
                                                              createPeerConnection()
                                                              pc.createOffer()
                                                              pc.setLocalDescription()
                                                          <-  emit 'offer'
                              on 'offer'
                          <-  emit 'offer'
on 'offer'
createPeerConnection()
pc.setRemoteDescription
pc.createAnswer()
pc.setLocalDescription()
emit 'answer'  ->
                              on 'answer'
                              emit 'answer'  ->
                                                              on 'answer'
                                                              pc.setRemoteDescription()

这样就能进行视频聊天了。

其中 createPeerConnection 过程如下：

pc = new RTCPeerConnection(config)
// 向pc中加入需要发送的流
pc.addStream(localStream)
// onicecandidate 处理器会在网络候选可用的时候调用。
pc.onicecandidate = function (event) {
    if (event.candidate) {
        socket.emit('candidate', requestSocketId, {
            type: 'candidate',
            label: event.candidate.sdpMLineIndex,
            id: event.candidate.sdpMid,
            candidate: event.candidate.candidate
        });
    } else {
        console.log('End of candidates.');
    }
};
// 如果检测到流媒体流到本地，就把它显示出来，同时把流赋值给 remoteStream
pc.onaddstream = function (event) {
    attachMediaStream(remoteVideo, event.stream);
    remoteStream = event.stream;
};