主要的 WebRTC API和使用示例
hyr edytuje tę stronę 4 miesięcy temu

主要的 WebRTC API

  1. getUserMedia

    • 用于访问用户的媒体设备(如摄像头和麦克风),并获取媒体流。
    • 这是 WebRTC 的基础 API 之一,但它也是现代浏览器中原生支持的 API。
  2. RTCPeerConnection

    • 用于建立点对点连接,传输音频、视频和数据。
    • 这个 API 处理信令、网络协商、媒体流的发送和接收等复杂的底层细节。
  3. 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>

解释

  1. 获取本地媒体流

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

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

  2. 创建 RTCPeerConnection

    peerConnection = new RTCPeerConnection(configuration);
    

    创建一个新的 RTCPeerConnection 实例,用于建立点对点连接。

  3. 添加本地流到 RTCPeerConnection

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

    将本地媒体流的轨道添加到 RTCPeerConnection 中。

  4. 处理远程流

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

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

  5. 创建和发送 offer

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

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

  6. 模拟信令服务器

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

总结

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

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