基于socketio实现webrtc视频通话的流程

说明1:

对于socket.emit,我们要清楚,是给谁发送的,是调用这个方法的对象本身。
比如在客户端,这个socket对象应该是服务器,所以socket.emit,代表给服务器发送消息。
比如在服务器,这个socket对象应该是跟服务器连接的某个客户端socket对象,代表给这个客户端发动消息。
说明2:

nodejs中的callback代表异步回调,就是走完callback(data)这句,相当于开了一个子线程去执行,当前代码接着往下走。
流程:

按照发起方A往下走流程,调用requestServerCreateRoom方法,在这个方法里创建socket连接,将发起方A和接收方B的用户id传递给服务器,发送事件为“videoChat”。
服务器接收到videoChat事件,按照请求生成房间,并将房间号返回给发起方A。
发起方A收到房间号后,执行connectRoom方法;
进入connectRoom方法,进入addSocketHandles方法添加sockethandles.
添加的sockethandles用于一会接收服务器的事件消息,类似安卓添加点击事件一样,如果你想响应点击,就必须先注册 添加点击事件一个道理。加的sockethandles分别为:_peers、_ice_candidate、_new_peer、_remove_peer、_offer、_answer、cancelVideoChat;
添加完sockethandles之后进入joinRoom方法,通过socket给服务器发送__join事件,传递参数房间号。
服务器收到__join事件后,会根据请求的房间号,来遍历房间里的所有socketid,由于刚建立房间,现在房间是空的,即curRoom是空的,所以第一次没有触发_new_peer事件,代码接着往下走,
for循环执行完成后,会将当前连接socket对象即发起方A socket对象存入到房间里。
接着8,服务器会执行发送_peers事件,由于我们现在在服务器与发起方A的线程里,所以当前的socket对象是发起方,所以代表给发起方A发送_peers事件。由于connectionids现在长度为0,所以基本客户端的peers事件方法里没有做什么操作,只是把webrtc的本地流初始化。
接着第3条服务器在发给发起方A房间号后,并给接收方B发送videoChat事件。(与4--8并行执行)
接收方B收到videoChat事件,打开视频界面并将服务器传递过来的参数传递给视频界面。
视频界面打开判断是接收方还是发送方;由于现在是接收方B,所以是接收方,于是显示接听和拒绝按钮。
接收方B在视频界面点击同意按钮,进入connectRoom方法,进入addSocketHandles方法添加sockethandles。
添加的sockethandles用于一会接收服务器的事件消息,类似安卓添加点击事件一样,如果你想响应点击,就必须先注册 添加点击事件一个道理。加的sockethandles分别为:_peers、_ice_candidate、_new_peer、_remove_peer、_offer、_answer、cancelVideoChat;
添加完sockethandles之后进入joinRoom方法,通过socket给服务器发送__join事件,传递参数房间号。
服务器收到__join事件后,会根据请求的房间号,来遍历房间里的所有socketid,由于此时房间号rooms[房间号]里有一条信息,就是发起方A的socket对象,所以执行for循环的语句,向发起方A发起_new_peer事件,并将接收方B的socketid传递过去。
发起方A客户端接收_new_peer事件,创建Peer连接,添加本地流,并将peer放到peers集合中。peers集合存放了所有的连接。
发送完所有的_new_peer事件后,向接收方B发送_peers事件,传递参数当前房间除自己外的所有socket连接数组,还有自己的soeckedid;
接收方B客户端接收_peers事件后,跟传过来的所有socketid建立连接,添加连接流,生成offer,触发peer对象的回调方法onCreateSuccess,在这个方法里发送__offer事件给服务器。这里涉及到webrtc交互流程,参见。
服务器收到offer后,将该offer转发给对应的客户端(这里就是接收方B对应的客户端是发起方A)。
发起方A接收到offer后,加入一些参数后调用setRemoteDescription方法,调用成功后会回调onCreateSuccess方法,在 向这个方法里向服务器发送__answer,服务器接收到__answer后转发给接收方B。
接收方B接收到answer后,向stun服务器获取自己的ip地址,stun服务器返回ip后,会回调onIceCandidate方法,在这个 向方法里,向signal服务器(即上边经常提到的  服务器)发送__ice_candidate事件,服务器将事件转发给发起方A,
发起方A收到_ice_candidate事件后,向stun服务器查询自己的ip,返回成功后,回调onIceCandidate方法,这样整体建立一个p2p连接,开始视频。
总结:

以上是webrtc两个人视频通话的流程,我们可以总结一下几个关键点:

通过socketio的长连接,视频发起者在服务器创建一个房间;
创建房间成功后,发起者将自己的socket连接对象存于房间中,并初始化webrtc本地流;
服务器向接收者发送视频消息;
接收者收到视频消息后,初始化webrtc本地视频流,并与发起者建立peer连接;
接着进行webrtc信令交换流程;
建立p2p连接,开始视频聊天;
以两人通话流程为基础,我们可以实现三人通话;

通过socketio的长连接,视频发起者在服务器创建一个房间;
创建房间成功后,发起者将自己的socket连接对象存于房间中,并初始化webrtc本地流;
服务器向接收者1发送视频消息;
接收者1收到消息后,初始化webrtc本地视频流,并通过createPeerConnections(因为此时房间有前一人的socketid)发起者(发起者的new_peer调用)建立peer连接;
接着进行webrtc信令交换流程;
建立p2p连接,开始视频聊天;
服务器向接收者2发送视频消息;
接收者2收到消息后,初始化webrtc本地视频流,并通过createPeerConnections(因为此时房间有前两人的socketid)与发起者、接收者1(两者的new_peer调用)建立peer连接;
接着进行webrtc信令交换流程;
建立p2p连接,开始视频聊天;
按照上边理论3人和多人是一个道理的。over!

参考服务器socket调试截图:

参考视频通信流程log日志截图:

如何看emit发送是否成功呢?

页面JS:
……
socket.emit('nickname', '张三', function (data) {
           if (data) {
             console.log('Nickname set successfully');
           } 
         });
 服务端:
 ……
 socket.on('nickname', function (data, callback) {
    callback(data);
  });
参考文章:

webrtc信令交互流程
webrtc官网需要翻墙
Android之WebRTC介绍
转自https://blog.csdn.net/wzmde007/article/details/80006264

WebRTC(Web Real-Time Communication)是一种开放的实时通信技术,它允许浏览器之间进行音频、视频和数据的实时传输。WebRTC提供了一套API,使得开发者可以在网页上直接实现视频通话、文件共享等功能,而无需依赖第三方插件或应用程序。 WebRTC视频通话功能主要包括以下几个方面: 1. 媒体获取:WebRTC可以通过摄像头和麦克风获取本地的音视频流。 2. 媒体传输:WebRTC使用实时传输协议(Real-time Transport Protocol,简称RTP)来传输音视频数据。它可以通过用户数据报协议(User Datagram Protocol,简称UDP)或传输控制协议(Transmission Control Protocol,简称TCP)进行数据传输。 3. 媒体处理:WebRTC提供了音视频编解码器,可以对音视频数据进行压缩和解压缩,以减少带宽和延迟。 4. 网络连接:WebRTC使用ICE(Interactive Connectivity Establishment)协议来建立点对点的网络连接,通过NAT穿越和防火墙遍历,实现两个浏览器之间的直接通信。 5. 信令传输:WebRTC需要使用信令服务器来协调通信双方的会话信息,包括媒体协商、网络地址交换等。常见的信令协议有WebSocket、HTTP等。 WebRTC视频通话功能可以在支持WebRTC的浏览器中直接使用,无需安装额外的插件或应用程序。它在实时性、音视频质量和跨平台兼容性方面具有很大优势,被广泛应用于在线会议、远程教育、视频客服等场景。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值