一篇文章理解WebRTC原理_webrtc candidate和sdp有什么区别-CSDN博客

本文链接：https://blog.csdn.net/superherooooss/article/details/128937687

WebRTC是一种开源的网页实时通信技术，用于实现浏览器之间的音频、视频对话，无需插件。它涉及到NAT穿透、ICE候选和SDP协商等网络通信关键概念。通过RTCPeerConnection等接口，开发者可以创建并交换SDP和ICE信息，建立两端的通信连接，实现视频互动功能。

摘要由CSDN通过智能技术生成

1.前言

WebRTC 技术已经在很多行业场景中使用，但是还是有些人还没有接触或者不了解该技术，该技术有很多独有的概念，有些概念是依赖底层概念和网络，是许多web开发者很少了解到的，希望通过这篇文章能让更多的web开发者以及其他有兴趣的人了解WebRTC原理。

2.什么是WebRTC

WebRTC（Web Real-Time Communication），翻译过来是网页实时通信，是一个支持网页浏览器进行实时语音对话或者视频对话的技术，是谷歌旗下的一项开源技术，无需任何插件，该技术还支持Android和ios端，范围广泛。

该技术应用在社交、娱乐、教育等一些需要实时语音或视频的场景中。

该技术满足W3C的标准、开源化、插件化、整体上手效果良好。

3.满足使用WebRTC的条件

例如两个人分别在他们自己的浏览器上与对方视频互动，保持通讯，那么这个通讯前必须在视频编码能力上达成一致，如果无法达成一致则通讯失败。

电脑之间，大多数是在自己独立的局域网内，需要 NAT（Network Address Translation，网络地址转换），因此不能直接通信。

icecandidate：包含通信协议(TCP/UDP)和通信IP，STUN和TURN协议中描述网络信息的格式规范，解决双方网络链接问题；SDP：浏览器能力，包括不限于音视频编码格式，带宽，流控策略等；解决前置思考中，双方能力不匹配问题，通过交换双方 SDP 浏览器会自动选择双方都支持的视频编码格式。

4.代码实现

1.创建数据源

// 创建数据源
const localStream = await navigator.mediaDevices.getUserMedia({
video: true,
audio: true,
});
// localVideo 是 html 中的 video 标签 显示出来
localVideo.srcObject = localStream;

2.创建发送数据实例

// 创建本地实例
const pc1 = new RTCPeerConnection();

// 创建远端实例
const pc2 = new RTCPeerConnection();

3.配置实例

交换两端 icecandidate 和 SDP 的信息

// 传给远端本地地址
pc1.addEventListener('icecandidate', async (e) => {
// 远端添加本端地址
if (e.candidate) {
await pc2.addIceCandidate(e.candidate);
}
});
// 远端发送给本端地址
pc2.addEventListener('icecandidate', async (e) => {
// 本端添加远端端地址
if (e.candidate) {
await pc1.addIceCandidate(e.candidate);
}
});
// 创建本端SDP,告诉本端浏览器所支持项
const offer = await pc1.createOffer();
pc1.setLocalDescription(offer);
// 创建远端SDP,告诉远端浏览器所支持项
const answer = await pc2.createAnswer();
pc2.setLocalDescription(answer);
// 发送远端SDP给本端
// 接收远端sdp,告诉远端浏览器所支持项
pc1.setRemoteDescription(answer);
// 接收客户端sdp,告诉远端浏览器所支持项
pc2.setRemoteDescription(offer);

4.发送数据实例

localStream.getTracks().forEach(
(track) => pc1.addTrack(track, localStream)
);