主要的 WebRTC API和使用示例

主要的 WebRTC API

getUserMedia：
- 用于访问用户的媒体设备（如摄像头和麦克风），并获取媒体流。
- 这是 WebRTC 的基础 API 之一，但它也是现代浏览器中原生支持的 API。
RTCPeerConnection：
- 用于建立点对点连接，传输音频、视频和数据。
- 这个 API 处理信令、网络协商、媒体流的发送和接收等复杂的底层细节。
RTCDataChannel：
- 用于在点对点连接中传输任意数据。
- 这个 API 允许开发者在浏览器之间传输文本、文件等数据，而不仅仅是音频和视频。

示例：使用 WebRTC 建立点对点连接

以下是一个简单的示例，展示如何使用 WebRTC API 建立一个点对点连接，并传输视频流：

<!DOCTYPE html>
<html>
<head>
    <title>WebRTC Example</title>
</head>
<body>
    <h1>WebRTC Example</h1>
    <video id="localVideo" autoplay></video>
    <video id="remoteVideo" autoplay></video>
    <button id="startButton">Start</button>
    <script>
        let localStream;
        let peerConnection;
        const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };

        document.getElementById('startButton').addEventListener('click', async () => {
            // 获取本地媒体流
            localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
            document.getElementById('localVideo').srcObject = localStream;

            // 创建 RTCPeerConnection
            peerConnection = new RTCPeerConnection(configuration);

            // 添加本地流到 RTCPeerConnection
            localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

            // 处理远程流
            peerConnection.ontrack = (event) => {
                document.getElementById('remoteVideo').srcObject = event.streams[0];
            };

            // 创建和发送 offer
            const offer = await peerConnection.createOffer();
            await peerConnection.setLocalDescription(offer);

            // 模拟信令服务器，直接设置远程描述
            peerConnection.onicecandidate = (event) => {
                if (event.candidate) {
                    // 发送 ICE 候选到远程对等方
                }
            };

            // 模拟接收远程描述
            const remoteDescription = new RTCSessionDescription(offer);
            await peerConnection.setRemoteDescription(remoteDescription);

            // 创建和发送 answer
            const answer = await peerConnection.createAnswer();
            await peerConnection.setLocalDescription(answer);

            // 模拟接收 answer
            await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
        });
    </script>
</body>
</html>

解释

获取本地媒体流：

localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
document.getElementById('localVideo').srcObject = localStream;

使用 getUserMedia 获取本地视频和音频流，并将其显示在 <video> 元素中。

创建 RTCPeerConnection：
```
peerConnection = new RTCPeerConnection(configuration);
```
创建一个新的 RTCPeerConnection 实例，用于建立点对点连接。
添加本地流到 RTCPeerConnection：
```
localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
```
将本地媒体流的轨道添加到 RTCPeerConnection 中。

处理远程流：

peerConnection.ontrack = (event) => {
   document.getElementById('remoteVideo').srcObject = event.streams[0];
};

当接收到远程流时，将其显示在另一个 <video> 元素中。

创建和发送 offer：

const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);

创建一个 SDP offer，并将其设置为本地描述。

模拟信令服务器：
- 在实际应用中，信令服务器用于交换 SDP offer 和 answer 以及 ICE 候选。
- 在这个示例中，我们直接将 offer 和 answer 设置为远程描述，模拟信令过程。

总结

浏览器和 WebRTC 的关系：浏览器是先存在的，WebRTC 是后来引入的一组技术标准。为了支持 WebRTC，浏览器增加了相关的 API。
WebRTC API：包括 getUserMedia、RTCPeerConnection 和 RTCDataChannel，这些 API 使得开发者可以在网页中实现实时音频、视频和数据通信。

通过这些 API，开发者可以创建功能强大的实时通信应用，而无需依赖插件或第三方软件。