SpringBoot + Vue + Netty 实现 WebRTC 实时视频通话

消息实体与处理器

信令消息需要包含类型、发送方、接收方和内容。定义 Message 类来承载这些字段，包括注册、呼叫、应答和 ICE 候选数据。

public class Message {
    // 消息类型：register(注册)、call(呼叫)、answer(应答)、ice(ICE 候选)
    private String type;
    // 发送方 ID
    private String from;
    // 接收方 ID
    private String to;
    // 消息内容（SDP/ICE 数据）
    private String data;
    // Getters and Setters omitted for brevity
}

接下来是核心的 WebSocket 处理器。这里使用 ConcurrentHashMap 存储用户 ID 与 Channel 的映射，确保线程安全。当收到消息时，根据类型转发给目标用户。

package com.example.webrtc.commun;

import com.alibaba.fastjson.JSON;
import com.example.webrtc.entity.Message;
import io.netty.channel.Channel;
import io.netty.channel.ChannelHandler;
import io.netty.channel.ChannelHandlerContext;
import io.netty.channel.SimpleChannelInboundHandler;
import io.netty.handler.codec.http.websocketx.TextWebSocketFrame;
import org.springframework.context.annotation.Configuration;

import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

@Configuration
@ChannelHandler.Sharable
public class WebSocketHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {

    public static final ConcurrentHashMap<String, Channel> USER_CHANNEL_MAP = new ConcurrentHashMap<>();

    @Override
    public void channelActive(ChannelHandlerContext ctx) throws Exception {
        System.out.println("与客户端建立连接，通道开启！");
    }

    @Override
    protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {
        String text = msg.text();
        Message message = JSON.parseObject(text, Message.class);
        
        switch (message.getType()) {
            case "register":
                USER_CHANNEL_MAP.put(message.getFrom(), ctx.channel());
                break;
            case "call":
            case "answer":
            case "ice":
                Channel targetChannel = USER_CHANNEL_MAP.get(message.getTo());
                if (targetChannel != null && targetChannel.isActive()) {
                    targetChannel.writeAndFlush(new TextWebSocketFrame(text));
                } else {
                    System.out.println("用户 " + message.getTo() + " 不在线");
                }
                break;
        }
    }

    @Override
    public void channelInactive(ChannelHandlerContext ctx) throws Exception {
        USER_CHANNEL_MAP.entrySet().removeIf(entry -> entry.getValue() == ctx.channel());
    }

    @Override
    public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception {
        USER_CHANNEL_MAP.entrySet().removeIf(entry -> entry.getValue() == ctx.channel());
        ctx.close();
    }
}

服务启动配置

需要在 Spring Boot 启动时自动初始化 Netty 服务，监听指定端口（如 8004）。这里配置了 HTTP 解码器、WebSocket 协议处理器以及自定义的消息处理器。

package com.example.webrtc.commun;

import io.netty.bootstrap.ServerBootstrap;
import io.netty.channel.*;
import io.netty.channel.nio.NioEventLoopGroup;
import io.netty.channel.socket.SocketChannel;
import io.netty.channel.socket.nio.NioServerSocketChannel;
import io.netty.handler.codec.http.HttpObjectAggregator;
import io.netty.handler.codec.http.HttpServerCodec;
import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;
import io.netty.handler.stream.ChunkedWriteHandler;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;

@Configuration
public class NettyWebSocketServer {

    @Autowired
    private WebSocketHandler coordinationSocketHandler;

    public void start() throws Exception {
        EventLoopGroup bossGroup = new NioEventLoopGroup();
        EventLoopGroup group = new NioEventLoopGroup();
        try {
            ServerBootstrap sb = new ServerBootstrap();
            sb.option(ChannelOption.SO_BACKLOG, 1024);
            sb.group(group, bossGroup)
                    .channel(NioServerSocketChannel.class)
                    .localAddress(8004)
                    .childHandler(new ChannelInitializer<SocketChannel>() {
                        @Override
                        protected void initChannel(SocketChannel ch) throws Exception {
                            ch.pipeline().addLast(new HttpServerCodec());
                            ch.pipeline().addLast(new ChunkedWriteHandler());
                            ch.pipeline().addLast(new HttpObjectAggregator(8192));
                            ch.pipeline().addLast(new WebSocketServerProtocolHandler("/ws", "WebSocket", true, 65536 * 10));
                            ch.pipeline().addLast(coordinationSocketHandler);
                        }
                    });
            sb.bind().sync();
        } finally {
            group.shutdownGracefully().sync();
            bossGroup.shutdownGracefully().sync();
        }
    }
}

在主应用入口中注入并启动该服务。

@SpringBootApplication
public class Application implements CommandLineRunner {
    @Autowired
    private NettyWebSocketServer nettyServer;

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

    @Override
    public void run(String... args) throws Exception {
        nettyServer.start();
    }
}

前端交互实现

前端使用 Vue 搭建页面，核心逻辑在于 WebRTC API 的调用。我们需要处理用户 ID 输入、连接服务器、发起呼叫以及视频渲染。

模板结构

界面分为三个区域：用户登录区、呼叫控制区和视频展示区。本地视频静音以避免回声，远程视频正常播放。

<template>
  <div class="container">
    <h2>WebRTC 视频聊天</h2>
    
    <!-- 用户 ID 输入与连接服务器区域 -->
    <div class="input-group">
      <input v-model="userId" placeholder="输入你的用户 ID（如 user1）" type="text" />
      <button @click="connect">连接服务器</button>
    </div>

    <!-- 呼叫功能区域 -->
    <div v-if="socketConnected">
      <input v-model="targetUserId" placeholder="输入对方用户 ID（如 user2）" type="text" />
      <button @click="call">发起视频呼叫</button>
    </div>

    <!-- 挂断按钮 -->
    <div v-if="socketConnected && remoteVideo?.srcObject">
      <button @click="hangUp">挂断通话</button>
    </div>

    <!-- 视频展示区域 -->
    <div class="video-container">
      <div class="video-item">
        <p>本地视频</p>
        <video ref="localVideo" autoplay muted></video>
      </div>
      <div class="video-item">
        <p>远程视频</p>
        <video ref="remoteVideo" autoplay></video>
      </div>
    </div>
  </div>
</template>

<style scoped>
.container { width: 900px; margin: 20px auto; text-align: center; font-family: sans-serif; }
.input-group { margin: 25px 0; }
input { padding: 10px; width: 220px; margin-right: 10px; border-radius: 4px; }
button { padding: 10px 20px; background: #42b983; color: white; border: none; border-radius: 4px; cursor: pointer; }
.video-container { display: flex; justify-content: center; gap: 30px; margin-top: 30px; }
video { width: 400px; height: 300px; border: 1px solid #ccc; border-radius: 8px; }
</style>

核心脚本逻辑

1. 变量定义与资源管理

使用 ref 创建响应式变量，并定义全局变量存储 WebSocket 实例和 PeerConnection。记得在组件销毁时清理资源，防止摄像头被占用。

<script setup>
import { ref, onUnmounted } from 'vue';

const userId = ref('');
const targetUserId = ref('');
const socketConnected = ref(false);
const inCall = ref(false);

const localVideo = ref(null);
const remoteVideo = ref(null);

let socket = null;
let peerConnection = null;
let localStream = null;

// 页面销毁时清理资源
onUnmounted(() => {
  if (socket) socket.close();
  if (peerConnection) peerConnection.close();
  if (localStream) {
    localStream.getTracks().forEach(track => track.stop());
  }
});
</script>

2. 连接与信令处理

配置 STUN 服务器是必须的，否则内网设备无法找到彼此。连接成功后发送注册消息，告知服务端上线。

<script setup>
// ... imports

const iceServers = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'stun:stun.qq.com:3478' },
    { urls: 'stun:stun.aliyun.com:3478' }
  ]
};

const connect = () => {
  if (!userId.value.trim()) return alert('请输入用户 ID');
  socket = new WebSocket(`ws://localhost:8004/ws`);

  socket.onopen = () => {
    console.log('✅ WebSocket 连接成功');
    socketConnected.value = true;
    sendMessage({ type: 'register', from: userId.value, to: '', data: '' });
  };

  socket.onmessage = (e) => {
    try {
      const message = JSON.parse(e.data);
      handleMessage(message);
    } catch (err) {
      console.error('❌ 消息解析失败', err);
    }
  };

  socket.onclose = () => {
    socketConnected.value = false;
    inCall.value = false;
  };
};

const sendMessage = (message) => {
  if (socket && socket.readyState === WebSocket.OPEN) {
    socket.send(JSON.stringify(message));
  }
};
</script>

3. WebRTC 核心交互

这是最关键的部分。我们需要初始化 RTCPeerConnection，监听 ICE 候选生成事件和远程流到达事件。当收到呼叫请求时，自动应答或手动接听，完成 SDP 交换。

<script setup>
// ... previous code

const initPeerConnection = async () => {
  if (peerConnection) peerConnection.close();
  peerConnection = new RTCPeerConnection(iceServers);

  peerConnection.onicecandidate = (e) => {
    if (e.candidate) {
      sendMessage({ type: 'ice', from: userId.value, to: targetUserId.value, data: JSON.stringify(e.candidate) });
    }
  };

  peerConnection.ontrack = (e) => {
    remoteVideo.value.srcObject = e.streams[0];
  };
};

const call = async () => {
  if (!targetUserId.value.trim()) return alert('请输入对方 ID');
  await initPeerConnection();

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

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

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

  sendMessage({ type: 'call', from: userId.value, to: targetUserId.value, data: JSON.stringify(offer) });
  inCall.value = true;
};

const answerCall = async (message) => {
  targetUserId.value = message.from;
  await initPeerConnection();

  localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
  localVideo.value.srcObject = localStream;
  localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));

  await peerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(message.data)));
  const answer = await peerConnection.createAnswer();
  await peerConnection.setLocalDescription(answer);

  sendMessage({ type: 'answer', from: userId.value, to: targetUserId.value, data: JSON.stringify(answer) });
  inCall.value = true;
};

const handleMessage = async (message) => {
  switch (message.type) {
    case 'call': await answerCall(message); break;
    case 'answer': await peerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(message.data))); break;
    case 'ice': await peerConnection.addIceCandidate(new RTCIceCandidate(JSON.parse(message.data))); break;
  }
};

const hangUp = () => {
  if (localStream) localStream.getTracks().forEach(track => track.stop());
  if (peerConnection) peerConnection.close();
  localVideo.value.srcObject = null;
  remoteVideo.value.srcObject = null;
  targetUserId.value = '';
  inCall.value = false;
};
</script>

通过以上步骤，我们就完成了一个完整的 WebRTC 视频通话系统。后端负责信令中转，前端负责媒体流处理，配合 STUN 服务器解决网络穿透，实现了流畅的点对点音视频通信。