使用ASP.NET Core和WebRTC开发实时音视频通信应用：从零搭建一个简易视频会议系统
大家好，作为一名在实时通信领域踩过不少坑的开发者，我一直对WebRTC这项技术抱有极大的热情。它让我们能在浏览器中直接实现点对点的音视频通信，无需插件，延迟极低。今天，我想和大家分享一下，如何结合我们熟悉的ASP.NET Core后端，来构建一个基础的实时音视频通信应用。这个过程就像搭积木，我们会一步步搭建信令服务器、建立P2P连接，最终实现两个浏览器窗口的“面对面”聊天。过程中我会穿插一些我实战中遇到的“坑”和解决思路，希望能让大家少走弯路。
一、项目准备与环境搭建
首先，我们创建一个新的ASP.NET Core Web应用。我更喜欢使用空模板，这样结构更清晰，没有多余的代码。打开你的终端或命令提示符，执行以下命令：
dotnet new web -n WebRTC_Demo
cd WebRTC_Demo
接下来，我们需要添加对WebSocket的支持，因为我们的信令服务器（负责协调通信双方）将通过WebSocket进行实时消息传递。修改 `Program.cs` 文件：
var builder = WebApplication.CreateBuilder(args);
// 添加WebSocket中间件服务
builder.Services.AddWebSockets(options => { });
var app = builder.Build();
// 启用WebSocket，并配置静态文件中间件（用于服务前端HTML/JS）
app.UseWebSockets();
app.UseDefaultFiles(); // 默认寻找 index.html
app.UseStaticFiles(); // 提供静态文件
app.Run();
踩坑提示：`UseWebSockets` 必须在 `UseStaticFiles` 之前调用，否则WebSocket握手请求可能会被静态文件中间件错误处理。顺序很重要！
二、构建信令服务器
WebRTC本身不负责发现和协调通信双方，这个“媒人”角色就是信令服务器。我们将建立一个简单的WebSocket服务器来处理“加入房间”、“发送Offer/Answer”、“交换ICE候选”这些消息。
在 `Program.cs` 的 `app.Run()` 之前，添加一个WebSocket处理端点：
app.Map("/ws", async context =>
{
if (context.WebSockets.IsWebSocketRequest)
{
using var webSocket = await context.WebSockets.AcceptWebSocketAsync();
// 这里为了简化，我们使用一个静态字典来模拟“房间”和用户管理。
// 生产环境请使用更健壮的方案，如Redis或SignalR Hub。
await HandleWebSocketConnection(webSocket);
}
else
{
context.Response.StatusCode = StatusCodes.Status400BadRequest;
}
});
然后，我们需要实现 `HandleWebSocketConnection` 方法。为了教程清晰，我将其简化，核心是广播消息给同一房间的其他用户。完整的信令服务器逻辑涉及房间管理、用户映射等，这里展示核心的消息转发循环：
async Task HandleWebSocketConnection(WebSocket webSocket)
{
var buffer = new byte[1024 * 4];
try
{
WebSocketReceiveResult result = await webSocket.ReceiveAsync(new ArraySegment(buffer), CancellationToken.None);
while (!result.CloseStatus.HasValue)
{
// 1. 解析收到的JSON消息（例如：{“type”:“join”, “roomId”:“room1”, “userId”:“userA”}）
var message = Encoding.UTF8.GetString(buffer, 0, result.Count);
Console.WriteLine($"收到消息: {message}");
// 2. 根据消息类型处理（如将用户加入房间字典）
// 3. 找到同房间的其他用户，将消息转发给他/她
// （此处省略具体的房间管理和转发逻辑，需自行实现一个连接管理器）
// 示例：简单回声，仅用于测试
var echoBytes = Encoding.UTF8.GetBytes($"服务器回声: {message}");
await webSocket.SendAsync(new ArraySegment(echoBytes), WebSocketMessageType.Text, true, CancellationToken.None);
result = await webSocket.ReceiveAsync(new ArraySegment(buffer), CancellationToken.None);
}
await webSocket.CloseAsync(result.CloseStatus.Value, result.CloseStatusDescription, CancellationToken.None);
}
catch (Exception ex)
{
Console.WriteLine($"WebSocket错误: {ex.Message}");
}
}
实战经验：在生产环境中，我强烈建议使用 SignalR 来代替原生的WebSocket处理。SignalR内置了连接管理、广播、组（房间）等高级功能，并且自动处理连接重连和协议协商，能节省大量开发时间，让我们的信令服务器更健壮。
三、创建前端页面与WebRTC核心逻辑
在 `wwwroot` 文件夹下创建 `index.html`。这个页面将包含两个视频元素（本地和远程）和几个控制按钮。
ASP.NET Core + WebRTC 视频通话
本地视频
远程视频
房间号:
现在是最核心的部分——JavaScript WebRTC逻辑。在 `wwwroot/js` 下创建 `site.js`。代码较长，我提炼出关键步骤和代码块：
// 1. 定义关键变量
let localStream;
let peerConnection;
const signalingServerUrl = `ws://${window.location.host}/ws`;
// 2. 获取媒体设备（摄像头和麦克风）
document.getElementById('startButton').onclick = async () => {
try {
localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
document.getElementById('localVideo').srcObject = localStream;
document.getElementById('callButton').disabled = false;
console.log('本地媒体流获取成功');
} catch (err) {
console.error('获取媒体设备失败:', err);
}
};
// 3. 创建RTCPeerConnection并设置事件处理
function createPeerConnection() {
const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
peerConnection = new RTCPeerConnection(configuration);
// 将本地流的所有轨道添加到连接中
localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
// 监听远程流
peerConnection.ontrack = event => {
if (document.getElementById('remoteVideo').srcObject !== event.streams[0]) {
document.getElementById('remoteVideo').srcObject = event.streams[0];
console.log('收到远程流');
}
};
// ICE候选收集完成后，需要发送给对等方
peerConnection.onicecandidate = event => {
if (event.candidate) {
// 通过信令服务器发送 candidate
sendSignalingMessage({ type: 'candidate', candidate: event.candidate });
}
};
peerConnection.oniceconnectionstatechange = () => {
console.log(`ICE连接状态: ${peerConnection.iceConnectionState}`);
};
}
// 4. 创建Offer并设置本地描述
document.getElementById('callButton').onclick = async () => {
createPeerConnection();
try {
const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);
// 通过信令服务器发送 offer
sendSignalingMessage({ type: 'offer', sdp: offer.sdp });
document.getElementById('hangupButton').disabled = false;
} catch (err) {
console.error('创建Offer失败:', err);
}
};
// 5. 处理从信令服务器收到的消息（模拟）
// 假设我们通过WebSocket收到对等方发来的消息
function handleSignalingMessage(message) {
if (message.type === 'offer') {
handleOffer(message);
} else if (message.type === 'answer') {
handleAnswer(message);
} else if (message.type === 'candidate') {
handleCandidate(message);
}
}
async function handleOffer(offer) {
if (!peerConnection) {
createPeerConnection();
}
await peerConnection.setRemoteDescription(new RTCSessionDescription({ type: 'offer', sdp: offer.sdp }));
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);
sendSignalingMessage({ type: 'answer', sdp: answer.sdp });
}
async function handleAnswer(answer) {
await peerConnection.setRemoteDescription(new RTCSessionDescription({ type: 'answer', sdp: answer.sdp }));
}
async function handleCandidate(candidateMsg) {
try {
await peerConnection.addIceCandidate(new RTCIceCandidate(candidateMsg.candidate));
} catch (err) {
console.error('添加ICE候选失败:', err);
}
}
// 6. 挂断连接
document.getElementById('hangupButton').onclick = () => {
if (peerConnection) {
peerConnection.close();
peerConnection = null;
document.getElementById('remoteVideo').srcObject = null;
document.getElementById('hangupButton').disabled = true;
console.log('通话已挂断');
}
};
// 发送信令消息的函数（需连接WebSocket）
let signalingSocket;
function initSignaling() {
signalingSocket = new WebSocket(signalingServerUrl);
signalingSocket.onmessage = (event) => {
const message = JSON.parse(event.data);
handleSignalingMessage(message);
};
// 加入房间的逻辑可以在这里触发
document.getElementById('joinButton').onclick = () => {
const roomId = document.getElementById('roomId').value;
sendSignalingMessage({ type: 'join', roomId: roomId });
};
}
function sendSignalingMessage(message) {
if (signalingSocket.readyState === WebSocket.OPEN) {
signalingSocket.send(JSON.stringify(message));
}
}
// 页面加载后初始化信令连接
window.onload = initSignaling;
踩坑提示：ICE候选交换是WebRTC连接中最容易出问题的一环。确保STUN服务器（代码中的`stun:stun.l.google.com:19302`）可用，并且在NAT或防火墙后，你可能还需要配置TURN服务器来中转媒体流。另外，`setLocalDescription` 和 `setRemoteDescription` 的顺序必须正确，否则连接会失败。
四、运行与测试
回到项目根目录，运行我们的ASP.NET Core应用：
dotnet run
打开浏览器，访问 `https://localhost:5001` (或 `http://localhost:5000`)。重要：必须使用HTTPS或localhost，否则 `getUserMedia` 可能无法工作。打开两个浏览器标签页（或两台不同设备），都点击“开始采集视频”，然后一个点击“创建呼叫”，另一个就会自动应答（在我们的简化逻辑中）。如果一切顺利，你应该能看到两个视频窗口，一个显示本地画面，另一个显示远程画面。
总结一下，我们通过ASP.NET Core搭建了一个WebSocket信令服务器，并在前端利用WebRTC API完成了媒体捕获、P2P连接建立和媒体流传输。虽然这是一个极简的demo，但它清晰地揭示了WebRTC应用的核心架构。要将其发展为真正的产品，你还需要完善信令服务器的房间管理、增加错误处理、集成TURN服务器、并考虑使用像SignalR这样的库来简化后端复杂度。希望这篇教程能成为你探索实时音视频世界的一块坚实跳板。Happy Coding！
评论(0)