# WebRTC
WebRTC是一种实时通信技术，它可以让浏览器之间直接建立点对点的连接，传输视频、音频或其他数据。WebRTC的优势在于它不需要安装任何插件或软件，只要支持WebRTC的浏览器就可以使用。本文将介绍WebRTC的基本概念和使用方法，帮助你快速入门这项前沿的技术。
WebRTC的核心组件
WebRTC主要由三个核心组件组成：
- MediaStream：负责获取本地的音视频流，可以通过摄像头、麦克风或屏幕共享等方式获取。
- RTCPeerConnection：负责建立和维护两个浏览器之间的连接，以及协商音视频格式、传输协议和带宽等参数。
- RTCDataChannel：负责在两个浏览器之间传输任意类型的数据，可以实现类似于WebSocket的功能，但更加高效和灵活。
WebRTC的工作流程
WebRTC的工作流程大致如下：
- 获取本地音视频流：通过MediaStream API，可以获取本地设备的音视频流，并在浏览器中播放。
- 信令交换：为了建立连接，两个浏览器需要交换一些信息，例如网络地址、音视频格式等，这个过程称为信令（signaling）。信令交换需要借助一个第三方的服务器，可以使用任何一种通信协议，例如WebSocket、HTTP等。
- NAT穿透：由于大多数设备都位于防火墙或NAT（网络地址转换）之后，无法直接访问公网地址，因此需要使用一些技术来实现NAT穿透，让两个浏览器能够互相发现和通信。WebRTC使用了两种主要的NAT穿透技术：STUN（会话穿越工具）和TURN（中继穿越工具）。STUN服务器可以帮助浏览器获取自己的公网地址，并尝试建立直接连接；如果直接连接失败，就需要使用TURN服务器，让浏览器把数据发送给TURN服务器，再由TURN服务器转发给另一个浏览器。
- 建立连接：通过RTCPeerConnection API，两个浏览器可以创建一个对等连接（peer connection），并通过SDP（会话描述协议）来描述和协商音视频的参数。在建立连接的过程中，还会使用ICE（交互式连接建立）框架来收集和选择最佳的候选地址（candidate）进行连接。
- 传输数据：一旦连接建立成功，两个浏览器就可以通过RTCPeerConnection API来传输音视频流，或者通过RTCDataChannel API来传输其他类型的数据。
WebRTC的示例代码
为了演示WebRTC的基本用法，我们可以编写一个简单的网页应用，实现本地音视频流的获取和播放。首先，我们需要准备一个HTML文件，其中包含一个video元素用于显示音视频流：
WebRTC DemoWebRTC Demo
然后，我们需要编写一个JavaScript文件，其中包含以下步骤：
- 获取本地音视频流：我们可以使用navigator.mediaDevices.getUserMedia方法来获取本地音视频流，该方法接受一个对象作为参数，指定音视频的约束条件（constraints），例如分辨率、帧率等。该方法返回一个Promise对象，如果成功，会返回一个MediaStream对象；如果失败，会返回一个错误对象。
- 播放本地音视频流：我们可以使用video元素的srcObject属性来设置要播放的MediaStream对象，并调用play方法开始播放。
// 获取video元素 const localVideo = document.getElementById("localVideo");
// 定义音视频约束条件 const constraints = { video: true, audio: true };
// 获取本地音视频流 navigator.mediaDevices.getUserMedia(constraints) .then(stream => { // 播放本地音视频流 localVideo.srcObject = stream; localVideo.play(); }) .catch(error => { // 处理错误 console.error(error); });
