WebRTC 教程

什么是 WebRTC？

WebRTC (Web Real-Time Communication) 是一个支持网页浏览器进行实时通信的 API。它使网页开发者能够在浏览器中轻松实现视频通话、音频通话以及点对点数据分享等功能。WebRTC 不需要任何插件或安装程序，也不依赖于特定供应商的技术。

WebRTC 的主要组件

MediaStream (媒体流)

MediaStream 是 WebRTC 中的一个核心接口，用于表示音视频的输入输出流。例如，你可以从用户的摄像头和麦克风获取 MediaStream，也可以将 MediaStream 发送到其他用户。MediaStream 包含了音视频的数据，可以被发送到 RTCPeerConnection 或者 MediaRecorder 等对象。

RTCPeerConnection (点对点连接)

RTCPeerConnection 是 WebRTC 中用于建立和维护音视频通话的接口。通过 RTCPeerConnection，可以实现音视频的实时传输，并且可以控制音视频的编码、解码等参数。RTCPeerConnection 会自动处理网络问题，如 NAT 和防火墙穿越，因此开发者不需要关心底层的网络协议。

RTCDataChannel (数据通道)

RTCDataChannel 是 WebRTC 中用于发送任意类型数据的接口。通过 RTCDataChannel，可以在两个浏览器之间发送二进制数据或文本数据，从而实现文件传输、游戏控制等多种应用场景。RTCDataChannel 支持可靠的顺序传输模式，也支持不可靠的无序传输模式。

如何使用 WebRTC

获取 MediaStream

要获取用户的音视频流，首先需要请求访问用户的摄像头和麦克风。这可以通过调用 navigator.mediaDevices.getUserMedia() 方法来完成：

// www.javascriptcn.com code example
const constraints = {
    audio: true,
    video: true
};

navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
        // 成功获取到 MediaStream 后的操作
        console.log('MediaStream 获取成功', stream);
    })
    .catch(error => {
        // 获取 MediaStream 失败后的操作
        console.error('MediaStream 获取失败', error);
    });

创建 RTCPeerConnection

获取到 MediaStream 后，接下来需要创建一个 RTCPeerConnection 对象，并将 MediaStream 添加到 RTCPeerConnection 上：

// www.javascriptcn.com code example
const pc = new RTCPeerConnection();

// 将本地 MediaStream 添加到 RTCPeerConnection
pc.addStream(localStream);

// 设置本地音视频的编码参数
pc.createOffer()
    .then(offer => {
        return pc.setLocalDescription(offer);
    })
    .then(() => {
        // 发送 offer 到远端
    })
    .catch(error => {
        console.error('设置本地描述符失败', error);
    });

创建 RTCDataChannel

如果需要发送数据，还需要创建一个 RTCDataChannel：

// www.javascriptcn.com code example
const dataChannel = pc.createDataChannel('myDataChannel');

dataChannel.onopen = function(event) {
    console.log('数据通道已打开');
};

dataChannel.onmessage = function(event) {
    console.log('接收到消息:', event.data);
};

发起呼叫

当所有准备工作完成后，下一步是发起呼叫。这通常涉及到生成并发送一个 SDP 描述符（Session Description Protocol）给对方。SDP 描述符包含了音视频的编码参数、网络地址等信息：

// www.javascriptcn.com code example
pc.createOffer()
    .then(offer => {
        return pc.setLocalDescription(offer);
    })
    .then(() => {
        // 发送 offer 到远端
    })
    .catch(error => {
        console.error('创建 offer 失败', error);
    });

接收呼叫

当接收到对方的 offer 时，需要设置远程描述符并创建应答：

// www.javascriptcn.com code example
// 设置远端描述符
pc.setRemoteDescription(new RTCSessionDescription({
    type: 'offer',
    sdp: receivedOffer
}))
.then(() => {
    return pc.createAnswer();
})
.then(answer => {
    return pc.setLocalDescription(answer);
})
.then(() => {
    // 发送 answer 到远端
})
.catch(error => {
    console.error('设置远端描述符失败', error);
});

处理 ICE 候选者

在建立连接过程中，还需要处理 ICE 候选者。ICE 候选者包含了候选的网络地址，用于帮助穿越 NAT 和防火墙：

// www.javascriptcn.com code example
pc.onicecandidate = function(event) {
    if (event.candidate) {
        // 发送 candidate 到远端
    }
};

// 设置远端 ICE 候选者
pc.addIceCandidate(new RTCIceCandidate({
    candidate: receivedCandidate
}))
.catch(error => {
    console.error('添加 ICE 候选者失败', error);
});

关闭连接

当通话结束时，需要关闭 RTCPeerConnection：

pc.close();

总结

以上就是 WebRTC 的基本概念和使用方法。通过这些知识，你可以在浏览器中实现高质量的实时音视频通信。随着技术的发展，WebRTC 的功能也在不断完善，为开发者提供了更多的可能性。