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

• 核心作用：实现音视频的采集、编码、传输、解码和渲染，是通话的'数据通道'。
• 关键功能：
  • 从摄像头、麦克风采集音视频数据。
  • 对音视频进行编码压缩，减少传输带宽占用。
  • 通过协商建立的 P2P 通道，直接向对方发送音视频流。
  • 接收对方的音视频流，解码后在本地播放。
  • 自动处理网络抖动、丢包等问题，保证通话流畅。

3. STUN 服务器

• 核心作用：帮助处于 NAT 后的设备（如手机、电脑）获取自己的公网 IP 和端口，是'网络地址翻译的探测器'。
• 关键功能：
  • 客户端向 STUN 服务器发送请求，服务器会返回该客户端在公网中的可见 IP 和端口。
  • 这个公网地址会通过信令服务器转发给对方，让双方知道如何找到彼此。
  • 解决了大多数家庭/企业网络下，设备无法直接被外部访问的问题。

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

• 核心作用：携带通话所需的控制信息和网络信息，是双方沟通的'语言'。
• 包含内容：
  • 通话发起、应答、挂断等控制指令。
  • 从 STUN 服务器获取的公网 IP + 端口。
  • WebRTC 协商所需的 SDP（会话描述协议）和 ICE（交互式连接建立）候选地址。
• 传递方式：通过 WebSocket 连接，由 Spring Boot 服务端转发给对方。

三、完整通话流程

1. 初始化连接：客户端 A 和 B 分别通过 WebSocket 与 Spring Boot 服务端建立长连接。
2. 获取公网地址：A 和 B 各自向 STUN 服务器请求，得到自己的公网 IP + 端口。
3. 信令交换：A 发起通话请求，携带自己的公网信息和 SDP，通过 WebSocket 发送给服务端；服务端转发给 B；B 应答并返回自己的信息，再由服务端转发给 A。
4. P2P 连接建立：A 和 B 根据收到的对方信息，通过 WebRTC 建立直接的 P2P 连接。
5. 音视频传输：连接建立后，WebRTC 接管音视频传输，双方开始实时通话。
6. 通话结束：任意一方发起挂断信令，服务端转发后，双方关闭 P2P 连接和 WebSocket 连接。

三、前后端设计

步骤 1：核心原理铺垫

核心原理：

1. 技术作用：SpringBoot 快速搭建后端项目框架，管理 Netty 服务；Netty 高性能网络通信框架，实现 WebSocket 服务端，处理多客户端连接；WebSocket 保持客户端与服务端的长连接，传输信令消息（注册、呼叫、应答等）；WebRTC 浏览器原生支持的实时音视频通信技术，实现音视频采集、编码、传输；Vue 搭建前端页面，实现用户交互（输入用户 ID、发起呼叫）和视频画面展示。
2. 核心流程图示：
   • 客户端 A → WebSocket 连接 → Netty 服务端（注册）
   • 客户端 B → WebSocket 连接 → Netty 服务端（注册）
   • 客户端 A 发起呼叫 → 信令（含 SDP 提议）→ 服务端转发 → 客户端 B
   • 客户端 B 应答 → 信令（含 SDP 应答）→ 服务端转发 → 客户端 A
   • 双方交换 ICE 候选（网络地址）→ 建立 WebRTC P2P 连接 → 实时音视频传输

• 信令交换：相当于'敲门 + 协商'——告诉对方'我要和你视频''我这边的音视频参数是什么''我的网络地址是什么'，由 WebSocket+Netty 负责
• 端到端音视频传输：协商完成后，直接在两个客户端之间传输音视频数据，不经过服务端中转（P2P），由 WebRTC 负责

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

<!-- 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>

Netty 是核心，负责网络通信；FastJSON 用于处理前后端传输的 JSON 格式信令

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

1. 创建消息实体类 Message.java

信令消息需要包含'消息类型''发送方 ID''接收方 ID''消息内容'，所以定义对应的属性

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

2. 创建 Netty WebSocket 处理器

处理 WebSocket 连接的建立、消息接收与转发、连接断开等事件，是服务端的核心逻辑

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(); 
    } 
}

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

需要在 SpringBoot 项目启动时，自动启动 Netty 的 WebSocket 服务，监听指定端口（8004）

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(); 
    } 
}

步骤 5：Vue 前端开发

1. 编辑模版 template

<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>

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

步骤 2.1：导入依赖 + 定义基础变量

<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>

• ref：创建响应式变量，变量值变化时，页面会自动更新（比如 socketConnected 变为 true，呼叫区域会显示）；
• onUnmounted：页面销毁时执行的钩子，用于清理资源（避免内存泄漏）；
• localStream：额外定义本地流变量，方便后续'挂断'时停止摄像头/麦克风。

步骤 2.2：配置 STUN 服务器 + 编写 WebSocket 连接函数

<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>

• STUN 服务器：必须配置，否则内网设备无法找到彼此的网络地址，导致视频无法连接；
• trim()：去除用户 ID 前后空格，避免用户输入空字符/仅空格；
• try-catch：防止服务端返回非 JSON 格式消息，导致脚本崩溃；
• WebSocket 地址：ws:// 对应 HTTP，wss:// 对应 HTTPS，本地测试用 ws:// 即可。

2.3 编写通用消息发送函数

<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>

• WebSocket.OPEN：状态码为 1，表示连接已打开；其他状态（0 = 连接中，2 = 关闭中，3 = 已关闭）都无法发送消息；
• 封装成通用函数：后续发送 call/answer/ice 消息时，直接调用即可，减少重复代码。

步骤 3.4：编写消息处理函数

<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>

• 按消息类型分支处理：对应服务端的 register/call/answer/ice 四种类型；
• async/await：后续操作（如设置 SDP）是异步的，需等待完成，避免报错。

步骤 2.5：编写 WebRTC 核心函数

<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>

• getUserMedia：浏览器原生 API，请求音视频权限，返回本地流；如果用户拒绝权限，会抛出错误，所以用 try-catch 包裹；
• PeerConnection：WebRTC 的核心对象，负责协商连接、传输音视频流；
• ontrack 事件：对方的音视频流到达时触发，将流绑定到 remoteVideo 即可显示对方画面；
• onicecandidate 事件：本地生成网络地址（ICE 候选）时触发，发送给对方，双方才能建立 P2P 连接。

2.6：编写资源清理函数

<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>

• 必须停止本地流：否则页面关闭后，摄像头/麦克风仍会被占用（浏览器标签栏会显示摄像头图标）；
• onUnmounted：Vue3 的生命周期钩子，页面销毁时自动执行，确保资源全部清理。

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

在 video-container 上方添加：

<!-- 挂断按钮（仅连接成功且有远程流时显示） --> 
<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>