webrtc 笔记

news2024/7/4 5:37:26

webrtc主要步骤

navigator.mediaDevices.getUserMedia({audio:true,redio:true})

获取用户的摄像头状态,返回媒体流,把媒体流赋给video的srcObject属性,就能在页面上展示自己的音视频

let peer = new RTCPeerConnection(servers)

创建peer实例,通过这个实例的一系列方法实现p2p连接.其中传递的参数servers为TURN和STUN服务,用于NAT穿越

peer.addIceCandidate(candidate)

交换身份.用于把建立连接的对方的网络信息添加到自己的本地中.

对方的网络信息:在普通的网络环境中,ip地址就可以用来标记它,但是现在一般会把对方的网络信息隐藏在NAT网络中,这种情况下就需要使用STUN协议穿透NAT.¹但是在有的情况下,有的网络设备屏蔽了STUN的识别能力,这时就需要使用TURN协议实现媒体中转服务².

上述方案已经被webrtc内置了,即ICE框架,在创建peer实例的时候要告诉程序STUN,TURN服务器的相关信息

signaling服务器(信令服务器)

用于传输各自的身份信息以及描述信息,一般使用websocket实现

peer.onicecandidate = function(e) {
  socket.emit('icecandidate', e.candidate) // socket是假设的一个websocket实例
}//onicecandidate事件会在创建offer或者answer的时候被调用

socket.on('icecandidate', function(e) {
  let data = e.message
  peer.addIceCandidate(data)
})

//socket发布icecandidate事件并且监听这个,当传输身份信息时,把对方的candidate添加的本地peer

交换描述信息³

当一个peer打算把自己的设备媒体流发送给另外一个peer使用的时候,就要把设备信息(比如视频编码等)告诉对方,这就要实现peer之间交换描述信息,webrtc通过发送offer和answer实现这个功能.

let desc = await peer.createOffer()
await peer.setLocalDescription(desc)
socket.emit('offer', desc)  //本地Peer发送offer事件并且触发offer事件,把本地描述添加到peer中

socket.on('offer', async function(e) {
  let data = e.message
  await peer.setRemoteDescription(data)
  
  let desc = await peer.createAnswer()
  peer.setLocalDescription(desc)
  socket.emit('answer', desc) //当本地触发offer事件后,发布answer事件,当对方peer触发answer事件时,
  //把对方的描述也添加到本地Peer中,不过上面触发offer事件调用的是setLocalDescription,触发answer事件调用的添加事件是setRemoteDescription
})

socket.on('answer', async function(e) {
  let data = e.message
  await peer.setRemoteDescription(data)
})
//上述代码涉及的description就是常说的SDP

发送媒体流

localStreamRef.current!.getTracks().forEach((track) => {
  peer.addTrack(track, localStreamRef.current as MediaStream);
});

peer.ontrack = (track: RTCTrackEvent) => {
  remoteVideoRef.current!.srcObject = track.streams[0];
};

let channel = peer.createDateChannel('a channel')

当两端建立好连接之后,可以开通通道用于传送文件或者其他数据,

NAT

全称：Network Address Translation，网络地址转换。
理解：处于一个局域网下面的ipv4地址设备想要访问某一地址，会先向局域网网关发送请求，网关会给它分配一个端口地址，同时网关自己也有一个端口地址，向上请求到目的地址后，目的地址对局域网网关端口响应并发送内容，局域网网关根据ipv4设备的端口发送内容。在这个过程中，相当于网关ip代理了客户端设备的ip。
NAT类型：

网络穿透

网络穿透技术一定是基于NAT实现的。
处于两个局域网下的两台设备A,B在进行通信时，一般流程是：设备A向所处局域网网关A传递信息，网关A向某服务器传递信息，服务器将信息转发给局域网网关B，网关B将信息传递给设备B，这个过程经过了服务器，而网络穿透可以让两台设备在不经过服务器的情况下直接进行通信。
使用网络穿透可以实现客户端与客户端的直接通信，即实现了Peer to Peer(P2P网络，去中心化网络)，关键在于两个客户端通信不再经过服务器转发数据信息了。
理解：服务器给两个网关提供了对方的ip和端口号，使两个网关之间可以传递数据信息，所以处于网关下面的设备才可以通过NAT直接通信。
STUN、TURN即网络穿透技术。

参考： https://www.bilibili.com/video/BV1LY411K7Rk/?spm_id_from=333.337.search-card.all.click&vd_source=9413b5340ff3ae5833c8f4a4fc0ca795