基于 SpringBoot、Vue、Netty 与 WebRTC 的视频聊天实现

基于 SpringBoot、Vue、Netty 与 WebRTC 的视频聊天实现 | 极客日志

<!-- SpringBoot 核心 --> 
<dependency> 
    <groupId>org.springframework.boot</groupId> 
    <artifactId>spring-boot-starter</artifactId> 
</dependency> 
<!-- Netty WebSocket 依赖 --> 
<dependency> 
    <groupId>io.netty</groupId> 
    <artifactId>netty-all</artifactId> 
    <version>4.1.94.Final</version> 
</dependency> 
<!-- JSON 解析 --> 
<dependency> 
    <groupId>com.alibaba</groupId> 
    <artifactId>fastjson</artifactId> 
    <version>2.0.25</version> 
</dependency>

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

package com.qcby.schoolai.commun; 
import com.alibaba.fastjson.JSON; 
import com.qcby.schoolai.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 io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler; 
import org.springframework.context.annotation.Configuration; 
import java.util.Map; 
import java.util.concurrent.ConcurrentHashMap; 

/** 
 * 描述：
 */ 
@Configuration 
@ChannelHandler.Sharable 
public class WebSocketHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> { 
    // 存储用户 ID 与 Channel 的映射（线程安全） 
    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 { 
        // 解析 JSON 消息 
        String text = msg.text(); 
        Message message = JSON.parseObject(text, Message.class); 
        System.out.println("收到消息：" + text); 
        switch (message.getType()) { 
            case "register": // 注册用户 ID 与 Channel 的映射 
                USER_CHANNEL_MAP.put(message.getFrom(), ctx.channel()); 
                System.out.println("用户 " + message.getFrom() + " 注册成功"); 
                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)); 
                    System.out.println("转发消息到用户 " + message.getTo()); 
                } else { 
                    System.out.println("用户 " + message.getTo() + " 不在线"); 
                } 
                break; 
            default: 
                System.out.println("未知消息类型：" + message.getType()); 
        } 
    } 

    /** 
     * 处理连接断开事件 
     */ 
    @Override 
    public void channelInactive(ChannelHandlerContext ctx) throws Exception { 
        System.out.println("与客户端断开连接，通道关闭！"); 
    } 

    /** 
     * 处理异常 
     */ 
    @Override 
    public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception { 
        System.out.println("连接异常：" + cause.getMessage()); 
        USER_CHANNEL_MAP.entrySet().removeIf(entry -> entry.getValue() == ctx.channel()); 
        ctx.close(); 
    } 
}

package com.qcby.schoolai.commun; 
import io.netty.bootstrap.ServerBootstrap; 
import io.netty.channel.ChannelFuture; 
import io.netty.channel.ChannelInitializer; 
import io.netty.channel.ChannelOption; 
import io.netty.channel.EventLoopGroup; 
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; 

/** 
 * Netty WebSocket 服务端 
 */ 
@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) // 指定使用的 channel 
             .localAddress(8004)// 绑定监听端口 
             .childHandler(new ChannelInitializer<SocketChannel>() { // 绑定客户端连接时候触发操作 
                 @Override 
                 protected void initChannel(SocketChannel ch) throws Exception { 
                     // websocket 协议本身是基于 http 协议的，所以这边也要使用 http 解编码器 
                     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);//自定义消息处理类 
                 } 
             }); 
            ChannelFuture cf = sb.bind().sync(); // 服务器异步创建绑定 
            cf.channel().closeFuture().sync(); // 关闭服务器通道 
        } finally { 
            group.shutdownGracefully().sync(); // 释放线程池资源 
            bossGroup.shutdownGracefully().sync(); 
        } 
    } 
}

import com.qcby.springboot.commun.NettyWebSocketServer; 
import org.mybatis.spring.annotation.MapperScan; 
import org.springframework.beans.factory.annotation.Autowired; 
import org.springframework.boot.CommandLineRunner; 
import org.springframework.boot.SpringApplication; 
import org.springframework.boot.autoconfigure.SpringBootApplication; 

@SpringBootApplication 
@MapperScan("com.qcby.springboot.dao") 
public class Application implements CommandLineRunner { 
    public static void main(String[] args) { 
        SpringApplication.run(Application.class, args); 
    } 

    @Autowired 
    private NettyWebSocketServer nettyServer; 

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

<template> 
    <div> 
        <h2>WebRTC 视频聊天</h2> 
        <!-- 1. 用户 ID 输入与连接服务器区域 --> 
        <div> 
            <input v-model="userId" placeholder="输入你的用户 ID（如 user1）" type="text" /> 
            <button @click="connect">连接服务器</button> 
        </div> 
        <!-- 2. 呼叫功能区域（仅连接成功后显示） --> 
        <div v-if="socketConnected"> 
            <input v-model="targetUserId" placeholder="输入对方用户 ID（如 user2）" type="text" /> 
            <button @click="call">发起视频呼叫</button> 
        </div> 
        <!-- 3. 视频展示区域 --> 
        <div> 
            <div> 
                <p>本地视频</p> 
                <!-- muted：本地视频静音，避免回声；autoplay：自动播放 --> 
                <video ref="localVideo" autoplay muted></video> 
            </div> 
            <div> 
                <p>远程视频</p> 
                <video ref="remoteVideo" autoplay></video> 
            </div> 
        </div> 
    </div> 
</template> 
<style scoped> 
/* 全局容器：居中 + 固定宽度，避免页面太宽/太窄 */ 
.container { 
    width: 900px; 
    margin: 20px auto; 
    text-align: center; 
    font-family: "Microsoft YaHei", sans-serif; 
} 
/* 输入框 + 按钮组样式：统一间距和样式 */ 
.input-group { 
    margin: 25px 0; 
} 
input { 
    padding: 10px 15px; 
    width: 220px; 
    margin-right: 10px; 
    border: 1px solid #ddd; 
    border-radius: 4px; 
    font-size: 14px; 
} 
button { 
    padding: 10px 20px; 
    background: #42b983; 
    color: white; 
    border: none; 
    border-radius: 4px; 
    cursor: pointer; 
    font-size: 14px; 
} 
button:hover { 
    background: #359469; /* 鼠标悬浮变色，提升交互体验 */ 
} 
/* 视频容器：并排展示两个视频 */ 
.video-container { 
    display: flex; 
    justify-content: center; 
    gap: 30px; 
    margin-top: 30px; 
} 
.video-item { 
    text-align: center; 
} 
.video-item p { 
    margin-bottom: 8px; 
    font-size: 16px; 
    color: #333; 
} 
/* 视频标签样式：固定尺寸，加边框，提升美观度 */ 
video { 
    width: 400px; 
    height: 300px; 
    border: 1px solid #ccc; 
    border-radius: 8px; 
    background-color: #f5f5f5; /* 未加载流时显示浅灰色背景 */ 
} 
</style>

<script setup> 
// 1. 导入 Vue 内置的响应式变量和生命周期钩子 
import { ref, onUnmounted } from 'vue'; 
// 2. 定义响应式变量（页面上用到的动态数据） 
const userId = ref(''); // 本地用户 ID 
const targetUserId = ref(''); // 对方用户 ID 
const socketConnected = ref(false); // WebSocket 连接状态（控制呼叫区域显示） 
const inCall = ref(false); // 通话状态（控制挂断按钮显示） 
// 3. 定义视频 DOM 引用（用于绑定音视频流） 
const localVideo = ref(null); // 本地视频 DOM 
const remoteVideo = ref(null); // 远程视频 DOM 
// 4. 定义非响应式全局变量（仅脚本内使用，无需页面响应） 
let socket = null; // WebSocket 实例 
let peerConnection = null; // WebRTC 核心实例 
let localStream = null; // 本地音视频流（用于后续停止流） 
</script>

<script setup> 
// （接上一步代码） 
// 5. 配置 STUN 服务器（WebRTC 必需，用于获取公网 ICE 候选） 
const iceServers = { 
    iceServers: [ 
        { urls: 'stun:stun.l.google.com:19302' }, // 谷歌免费 STUN（需外网） 
        { urls: 'stun:stun.qq.com:3478' }, // 腾讯免费 STUN（国内更稳定） 
        { urls: 'stun:stun.aliyun.com:3478' } // 阿里云免费 STUN（备用） 
    ] 
}; 
// 6. 连接 WebSocket 服务器函数（点击'连接服务器'按钮触发） 
const connect = () => { 
    // 校验：用户 ID 不能为空 
    if (!userId.value.trim()) { 
        alert('请输入你的用户 ID！（不能为空/仅空格）'); 
        return; 
    } 
    // 创建 WebSocket 连接（Netty 服务端地址：ws://localhost:8004/ws） 
    // 注意：如果服务端部署在其他机器，需替换为对应 IP（如 ws://192.168.1.100:8004/ws） 
    socket = new WebSocket(`ws://localhost:8004/ws`); 
    // 6.1 连接成功回调 
    socket.onopen = () => { 
        console.log('✅ WebSocket 连接成功'); 
        socketConnected.value = true; // 更新连接状态，显示呼叫区域 
        // 发送注册消息：告诉服务端'我上线了' 
        sendMessage({ type: 'register', from: userId.value, to: '', data: '' }); 
    }; 
    // 6.2 接收服务端消息回调（核心：处理转发的信令） 
    socket.onmessage = (e) => { 
        try { 
            const message = JSON.parse(e.data); // 解析 JSON 消息 
            console.log('📥 收到服务端消息：', message); 
            handleMessage(message); // 专门处理消息的函数（后续定义） 
        } catch (err) { 
            console.error('❌ 消息解析失败：', err); 
        } 
    }; 
    // 6.3 连接关闭回调 
    socket.onclose = () => { 
        console.log('❌ WebSocket 连接关闭'); 
        socketConnected.value = false; // 更新连接状态，隐藏呼叫区域 
        inCall.value = false; // 连接关闭时重置通话状态 
    }; 
    // 6.4 连接错误回调 
    socket.onerror = (err) => { 
        console.error('❌ WebSocket 连接错误：', err); 
        socketConnected.value = false; 
        inCall.value = false; // 连接错误时重置通话状态 
        alert('连接服务器失败！请检查服务端是否启动，端口是否正确。'); 
    }; 
}; 
</script>

<script setup> 
// （接上一步代码） 
// 7. 通用发送 WebSocket 消息函数（复用，避免重复代码） 
const sendMessage = (message) => { 
    // 校验：WebSocket 必须处于打开状态 
    if (socket && socket.readyState === WebSocket.OPEN) { 
        socket.send(JSON.stringify(message)); // 转为 JSON 字符串发送 
        console.log('📤 发送消息：', message); 
    } else { 
        console.error('❌ WebSocket 未连接，无法发送消息'); 
        alert('未连接服务器，请先点击'连接服务器'！'); 
    } 
}; 
</script>

<script setup> 
// （接上一步代码） 
// 8. 处理收到的信令消息 
const handleMessage = async (message) => { 
    switch (message.type) { 
        case 'call': // 收到呼叫请求：自动应答（实际项目可加'是否接听'弹窗） 
            await answerCall(message); 
            break; 
        case 'answer': // 收到应答消息：设置远程 SDP 
            await setRemoteSDP(message.data); 
            break; 
        case 'ice': // 收到 ICE 候选：添加到 PeerConnection 
            await addIceCandidate(message.data); 
            break; 
        default: 
            console.log('📌 未知消息类型：', message.type); 
    } 
}; 
</script>

<script setup> 
// （接上一步代码） 
// 9. 初始化 PeerConnection（WebRTC 核心，复用函数） 
const initPeerConnection = async () => { 
    // 如果已有 PeerConnection，先关闭（避免重复创建） 
    if (peerConnection) { 
        peerConnection.close(); 
    } 
    // 创建 PeerConnection 实例（传入 STUN 服务器配置） 
    peerConnection = new RTCPeerConnection(iceServers); 
    // 9.1 监听 ICE 候选生成事件（本地网络地址） 
    peerConnection.onicecandidate = (e) => { 
        if (e.candidate) { 
            // 发送 ICE 候选给对方 
            sendMessage({ type: 'ice', from: userId.value, to: targetUserId.value, data: JSON.stringify(e.candidate) }); 
        } 
    }; 
    // 9.2 监听远程音视频流到达事件（关键：显示对方视频） 
    peerConnection.ontrack = (e) => { 
        // 将远程流绑定到远程视频 DOM 
        remoteVideo.value.srcObject = e.streams[0]; 
        console.log('🎥 收到远程音视频流'); 
    }; 
}; 
// 10. 发起视频呼叫函数（点击'发起视频呼叫'按钮触发） 
const call = async () => { 
    // 校验：对方 ID 不能为空 
    if (!targetUserId.value.trim()) { 
        alert('请输入对方用户 ID！'); 
        return; 
    } 
    try { 
        // 初始化 PeerConnection 
        await initPeerConnection(); 
        // 获取本地音视频流（请求摄像头/麦克风权限） 
        localStream = await navigator.mediaDevices.getUserMedia({ 
            video: true, // 开启视频 
            audio: true // 开启音频 
        }); 
        // 将本地流绑定到本地视频 DOM 
        localVideo.value.srcObject = localStream; 
        // 将音视频轨道添加到 PeerConnection（传给对方） 
        localStream.getTracks().forEach(track => { 
            peerConnection.addTrack(track, localStream); 
        }); 
        // 创建 SDP 提议（offer）：包含本地音视频配置 
        const offer = await peerConnection.createOffer(); 
        // 设置本地 SDP 
        await peerConnection.setLocalDescription(offer); 
        // 发送呼叫信令（含 SDP offer）给对方 
        sendMessage({ type: 'call', from: userId.value, to: targetUserId.value, data: JSON.stringify(offer) }); 
        inCall.value = true; // 标记为通话中 
        console.log('📞 发起视频呼叫：', targetUserId.value); 
    } catch (err) { 
        console.error('❌ 发起呼叫失败：', err); 
        alert('发起呼叫失败！请检查摄像头/麦克风权限，或是否已连接服务器。'); 
    } 
}; 
// 11. 应答呼叫请求函数 
const answerCall = async (message) => { 
    // 记录呼叫方 ID（后续发送应答/ICE 消息需要） 
    targetUserId.value = message.from; 
    try { 
        // 初始化 PeerConnection 
        await initPeerConnection(); 
        // 获取本地音视频流 
        localStream = await navigator.mediaDevices.getUserMedia({ 
            video: true, 
            audio: true 
        }); 
        localVideo.value.srcObject = localStream; 
        localStream.getTracks().forEach(track => { 
            peerConnection.addTrack(track, localStream); 
        }); 
        // 设置远程 SDP（呼叫方的 offer） 
        await peerConnection.setRemoteDescription(JSON.parse(message.data)); 
        // 创建 SDP 应答（answer） 
        const answer = await peerConnection.createAnswer(); 
        // 设置本地 SDP 
        await peerConnection.setLocalDescription(answer); 
        // 发送应答信令给呼叫方 
        sendMessage({ type: 'answer', from: userId.value, to: targetUserId.value, data: JSON.stringify(answer) }); 
        inCall.value = true; // 标记为通话中 
        console.log('📞 应答视频呼叫：', targetUserId.value); 
    } catch (err) { 
        console.error('❌ 应答呼叫失败：', err); 
        alert('应答呼叫失败！'); 
    } 
}; 
// 12. 设置远程 SDP 函数 
const setRemoteSDP = async (sdpStr) => { 
    try { 
        const sdp = JSON.parse(sdpStr); 
        await peerConnection.setRemoteDescription(new RTCSessionDescription(sdp)); 
        console.log('✅ 设置远程 SDP 成功'); 
    } catch (err) { 
        console.error('❌ 设置远程 SDP 失败：', err); 
    } 
}; 
// 13. 添加 ICE 候选函数 
const addIceCandidate = async (iceStr) => { 
    try { 
        const ice = JSON.parse(iceStr); 
        await peerConnection.addIceCandidate(new RTCIceCandidate(ice)); 
        console.log('✅ 添加 ICE 候选成功'); 
    } catch (err) { 
        console.error('❌ 添加 ICE 候选失败：', err); 
    } 
}; 
</script>

<script setup> 
// （接上一步代码） 
// 14. 页面销毁时清理资源（避免内存泄漏/设备占用） 
onUnmounted(() => { 
    // 关闭 WebSocket 连接 
    if (socket) { 
        socket.close(); 
        console.log('🔌 关闭 WebSocket 连接'); 
    } 
    // 关闭 PeerConnection 
    if (peerConnection) { 
        peerConnection.close(); 
        console.log('🔌 关闭 PeerConnection'); 
    } 
    // 停止本地音视频流（释放摄像头/麦克风） 
    if (localStream) { 
        localStream.getTracks().forEach(track => { 
            track.stop(); 
            console.log('🔇 停止本地音视频流'); 
        }); 
    } 
    inCall.value = false; // 页面销毁时重置通话状态 
}); 
</script>

<!-- 挂断按钮（仅连接成功且有远程流时显示） --> 
<div v-if="socketConnected && remoteVideo.value?.srcObject"> 
    <button @click="hangUp">挂断通话</button> 
</div>

<script setup> 
// （添加在 initPeerConnection 之后） 
// 15. 挂断通话函数 
const hangUp = () => { 
    // 停止本地流 
    if (localStream) { 
        localStream.getTracks().forEach(track => track.stop()); 
        localVideo.value.srcObject = null; // 清空本地视频 
    } 
    // 清空远程视频 
    if (remoteVideo.value) { 
        remoteVideo.value.srcObject = null; 
    } 
    // 关闭 PeerConnection 
    if (peerConnection) { 
        peerConnection.close(); 
        peerConnection = null; 
    } 
    // 重置目标用户 ID 和通话状态 
    targetUserId.value = ''; 
    inCall.value = false; 
    console.log('📞 挂断通话'); 
    alert('已挂断通话！'); 
}; 
</script>

基于 SpringBoot、Vue、Netty 与 WebRTC 的视频聊天实现

一、关于 WebRTC（Web Real-Time Communication）

先补个前提：为什么需要 STUN？

二、设计思路

一、整体视频通话思路

二、各功能模块的作用

1. Spring Boot 项目

2. WebRTC（客户端 A/B）

3. STUN 服务器

4. 信令（A 信令 / B 信令）

三、完整通话流程

三、前后端设计

步骤 1：核心原理铺垫

步骤 2：服务端开发（一）—— 项目搭建与依赖配置

步骤 3：服务端开发（二）—— 核心实体类与消息处理器

步骤 4：Netty 服务启动类与 SpringBoot 启动类

步骤 5：Vue 前端开发

1. 编辑模版 template

2. 编写核心脚本（script setup），实现交互逻辑

步骤 6：补充'挂断'功能

更多推荐文章

相关免费在线工具

基于 SpringBoot、Vue、Netty 与 WebRTC 的视频聊天实现

一、关于 WebRTC（Web Real-Time Communication）

先补个前提：为什么需要 STUN？

二、设计思路

一、整体视频通话思路

二、各功能模块的作用

1. Spring Boot 项目

2. WebRTC（客户端 A/B）

3. STUN 服务器

4. 信令（A 信令 / B 信令）

三、完整通话流程

三、前后端设计

步骤 1：核心原理铺垫

步骤 2：服务端开发（一）—— 项目搭建与依赖配置

步骤 3：服务端开发（二）—— 核心实体类与消息处理器

步骤 4：Netty 服务启动类与 SpringBoot 启动类

步骤 5：Vue 前端开发

1. 编辑模版 template

2. 编写核心脚本（script setup），实现交互逻辑

步骤 6：补充'挂断'功能

微信扫一扫，关注极客日志

更多推荐文章

相关免费在线工具