在应用程序中使用 WebRTC（Web Real-Time Communication）可以实现实时音视频通信。以下是使用 WebRTC 的基本步骤：
1. 环境准备
- 确保你的开发环境支持 JavaScript、HTML5 和 CSS。
- 使用现代浏览器（Chrome、Firefox、Safari 等），因为它们原生支持 WebRTC。
2. 建立 HTML 页面
创建一个简单的 HTML 页面，其中包含用于显示视频流的 <video> 标签和一些按钮来开始/停止通话等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebRTC Demo</title>
</head>
<body>
<h2>WebRTC Video Chat</h2>
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
<button id="startButton">Start Call</button>
<button id="hangupButton">Hang Up</button>
<script src="app.js"></script>
</body>
</html>
3. 获取用户媒体
使用 getUserMedia 方法请求访问用户的摄像头和麦克风。
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(stream => {
document.getElementById('localVideo').srcObject = stream;
// 这里需要保存流，以便发送到其他端
localStream = stream;
})
.catch(error => {
console.error('Error accessing media devices.', error);
});
4. 创建 RTCPeerConnection
创建一个 RTCPeerConnection 实例并添加本地流。
const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
const peerConnection = new RTCPeerConnection(configuration);
// 将本地流中的轨道添加到连接中
localStream.getTracks().forEach(track => {
peerConnection.addTrack(track, localStream);
});
5. 处理 ICE 候选者
设置 ICE 候选者回调函数，以便交换候选者信息以建立连接。
peerConnection.onicecandidate = event => {
if (event.candidate) {
// 将候选者发送给远端
sendCandidate(event.candidate);
}
};
peerConnection.ontrack = event => {
document.getElementById('remoteVideo').srcObject = event.streams[0];
};
6. 建立连接
当需要建立连接时，创建 SDP offer，并将其发送到远程端。
// 创建offer并设置localDescription
peerConnection.createOffer()
.then(offer => {
return peerConnection.setLocalDescription(offer);
})
.then(() => {
// 将offer发送给远端
sendOffer(peerConnection.localDescription);
});
7. 接收远端信息
接收从对方传来的 SDP 和 ICE 候选者，并设置为 remote description。
function onReceiveOffer(offer) {
peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
.then(() => {
return peerConnection.createAnswer();
})
.then(answer => {
return peerConnection.setLocalDescription(answer);
})
.then(() => {
// 将answer发送给远端
sendAnswer(peerConnection.localDescription);
});
}
function onReceiveCandidate(candidate) {
peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
}
8. 信令机制
你需要一个信令服务器（如 WebSocket 或其他方式）来进行信息交换，包括 SDP offer/answer 和 ICE candidates。
总结：
以上只是 WebRTC 的基本用法示例，实际应用中，你还需考虑错误处理、界面优化以及如何管理多个连接等问题。根据具体需求，可能还需要集成 TURN servers 来解决 NAT 问题，从而确保网络穿透。
内容由零声教学AI助手提供，问题来源于学员提问
![5-01-15T13:58:44+08:00 [FATA][LIB][MonDB] server selection error: server selection timeout, current topology: { Type: Unknown, Servers: [{ Addr: 127.0.0.1:27017, Type: Unknown, Last error: connection() error occured during connection handshake: di...](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162215397523846.png)
