vue+springboot+webtrc+websocket实现双人音视频通话会议

前言

最近一些时间我有研究，怎样实现一个视频会议功能，但是找了好多资料都不太抱负，终极参考了一个文章
WebRTC实现双端音视频聊天（Vue3 + SpringBoot）
   只不外，它的实现效果里面只会播放当地的mp4视频文件，但是按照它的原理是可以正常的实现音视频通话的
它的终极效果是这样的
  

   然后我的实现逻辑在它的底子上进行了优化
实现了如下效果，如下是我摆设项目到服务器之后，和朋侪验证之后的截图
  

   针对它的逻辑，我优化了如下几点
  

• 第一个人可以输入房间号创建房间，需要注意的是，当前第二个人还没加入进来的时间，视频双方都不展示
  
• 第二个人根据第一个人的房间号输入进行加入房间，等候视频流的加载就可以相互看到双方的视频和听到音频
  
• 添加了关闭/开启麦克风和摄像头功能
  ps: 需要注意的是，我接下来分享的代码逻辑，如果某个人突然加入别的房间，原房间它视频分享还是在的，我没有额外进行处理惩罚关闭原房间的音视频流，大家可根据这个进行调整
  

    题外话，根据如上的原理，你可以进一步优化，将其开辟一个视频会议功能,当前我有开辟一个类似的，但是本次只分享双人音视频通话会议项目
  

VUE逻辑

   如下为前端部分逻辑,需要注意的是，本次项目还是相沿参考文章的VUE3项目
  前端项目布局如下:

package.json

1. {
2.   "name": "webrtc_test",
3.   "private": true,
4.   "version": "0.0.0",
5.   "type": "module",
6.   "scripts": {
7.     "dev": "vite",
8.     "build": "vite build",
9.     "preview": "vite preview"
10.   },
11.   "dependencies": {
12.     "axios": "^1.7.7",
13.     "vue": "^3.5.12"
14.   },
15.   "devDependencies": {
16.     "@vitejs/plugin-vue": "^5.1.4",
17.     "vite": "^5.4.10"
18.   }
19. }

复制代码

  换言之，你需要使用npm安装如上依赖

1. npm i axios@1.7.7

复制代码

vite.config.js

1. import { defineConfig } from 'vite'
2. import vue from '@vitejs/plugin-vue'
3. import fs from 'fs';
4. // https://vite.dev/config/
5. export default defineConfig({
6.   plugins: [vue()],
7.   server: {
8.       // 如果需要部署服务器，需要申请SSL证书，然后下载证书到指定文件夹
9.     https: {
10.           key: fs.readFileSync('src/certs/www.springsso.top.key'),
11.           cert: fs.readFileSync('src/certs/www.springsso.top.pem'),
12.         }
13.   },
14. })

复制代码

main.js

1. import { createApp } from 'vue'
2. import App from './App.vue'
4. createApp(App).mount('#app')

复制代码

App.vue

1. <template>
2.   <div class="video-chat">
3.     <div v-if="isRoomEmpty">
4.       <p>{{ roomStatusText }}</p>
5.     </div>
6.     <!-- 视频双端显示 -->
7.     <div class="video_box">
8.       <div class="self_video">
9.         <div class="text_tip">我：<span class="userId">{{ userId }}</span></div>
10.         <video ref="localVideo" autoplay playsinline></video>
11.       </div>
12.       <div class="remote_video">
13.         <div class="text_tip">对方：<span class="userId">{{ oppositeUserId }}</span></div>
14.         <video ref="remoteVideo" autoplay playsinline></video>
15.       </div>
16.     </div>
17.     <!-- 加入房间按钮 -->
18.     <div class="room-controls">
19.       <div class="room-input">
20.         <input v-model="roomId" placeholder="请输入房间号" />
21.         <button @click="createRoom">创建房间</button>
22.         <button @click="joinRoomWithId">加入房间</button>
23.       </div>
24.       <div class="media-controls">
25.         <button @click="toggleAudio">
26.           {{ isAudioEnabled ? '关闭麦克风' : '打开麦克风' }}
27.         </button>
28.         <button @click="toggleVideo">
29.           {{ isVideoEnabled ? '关闭摄像头' : '打开摄像头' }}
30.         </button>
31.       </div>
32.     </div>
33.     <!-- 日志打印 -->
34.     <div class="log_box">
35.       <pre>
36.           <div v-for="(item, index) of logData" :key="index">{{ item }}</div>
37.         </pre>
38.     </div>
39.   </div>
40. </template>

复制代码

1. <script setup>
2. import { ref, onMounted, nextTick } from "vue";
3. import axios from "axios";
5. // WebRTC 相关变量
6. const localVideo = ref(null);
7. const remoteVideo = ref(null);
8. const isRoomEmpty = ref(true); // 判断房间是否为空
10. let localStream; // 本地流数据
11. let peerConnection; // RTC连接对象
12. let signalingSocket; // 信令服务器socket对象
13. let userId; // 当前用户ID
14. let oppositeUserId; // 对方用户ID
16. let logData = ref(["日志初始化..."]);
18. // 请求根路径，如果需要部署服务器，把对应ip改成自己服务器ip
19. let BaseUrl = "https://localhost:8095/meetingV1s"
21. let wsUrl = "wss://localhost:8095/meetingV1s";
24. // candidate信息
25. let candidateInfo = "";
27. // 发起端标识
28. let offerFlag = false;
30. // 房间状态文本
31. let roomStatusText = ref("点击'加入房间'开始音视频聊天");
33. // STUN 服务器，
34. // const iceServers = [
35. //   {
36. //     urls: "stun:stun.l.google.com:19302"  // Google 的 STUN 服务器
37. //   },
38. //   {
39. //     urls: "stun:自己的公网IP:3478" // 自己的Stun服务器
40. //   },
41. //   {
42. //     urls: "turn:自己的公网IP:3478",   // 自己的 TURN 服务器
43. //     username: "maohe",
44. //     credential: "maohe"
45. //   }
46. // ];
47. // ============< 看这 >================
48. // 没有搭建STUN和TURN服务器的使用如下ice配置即可
49. const iceServers = [
50.   {
51.     urls: "stun:stun.l.google.com:19302"  // Google 的 STUN 服务器
52.   }
53. ];
55. // 在 script setup 中添加新的变量声明
56. const roomId = ref(''); // 房间号
57. const isAudioEnabled = ref(true); // 音频状态
58. const isVideoEnabled = ref(true); // 视频状态
60. onMounted(() => {
61.   generateRandomId();
62. })
64. // 加入房间，开启本地摄像头获取音视频流数据。
65. function joinRoomHandle() {
66.   roomStatusText.value = "等待对方加入房间..."
67.   getVideoStream();
68. }
71. // 获取本地视频 模拟从本地摄像头获取音视频流数据
72. async function getVideoStream() {
73.   try {
74.     localStream = await navigator.mediaDevices.getUserMedia({
75.       video: true,
76.       audio: true
77.     });
78.     localVideo.value.srcObject = localStream;
79.     wlog(`获取本地流成功~`)
80.     createPeerConnection(); // 创建RTC对象，监听candidate
81.   } catch (err) {
82.     console.error('获取本地媒体流失败:', err);
83.   }
84. }
87. // 初始化 WebSocket 连接
88. function initWebSocket() {
89.   wlog("开始连接websocket")
90.   // 连接ws时携带用户ID和房间号
91.   signalingSocket = new WebSocket(`${wsUrl}/rtc?userId=${userId}&roomId=${roomId.value}`);
93.   signalingSocket.onopen = () => {
94.     wlog('WebSocket 已连接');
95.   };
97.   // 消息处理
98.   signalingSocket.onmessage = (event) => {
99.     handleSignalingMessage(event.data);
100.   };
101. };
103. // 消息处理器 - 解析器
104. function handleSignalingMessage(message) {
105.   wlog("收到ws消息，开始解析...")
106.   wlog(message)
107.   let parseMsg = JSON.parse(message);
108.   wlog(`解析结果：${parseMsg}`);
110.   if (parseMsg.type == "join") {
111.     joinHandle(parseMsg.data);
112.   } else if (parseMsg.type == "offer") {
113.     wlog("收到发起端offer，开始解析...");
114.     offerHandle(parseMsg.data);
115.   } else if (parseMsg.type == "answer") {
116.     wlog("收到接收端的answer，开始解析...");
117.     answerHandle(parseMsg.data);
118.   }else if(parseMsg.type == "candidate"){
119.     wlog("收到远端candidate，开始解析...");
120.     candidateHandle(parseMsg.data);
121.   }
123. }
125. // 远端Candidate处理器
126. async function candidateHandle(candidate){
127.   peerConnection.addIceCandidate(new RTCIceCandidate(JSON.parse(candidate)));
128.   wlog("+++++++ 本端candidate设置完毕 ++++++++");
129. }
131. // 接收端的answer处理
132. async function answerHandle(answer) {
133.   wlog("将answer设置为远端信息");
134.   peerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(answer))); // 设置远端SDP
135. }
137. // 发起端offer处理器
138. async function offerHandle(offer) {
139.   wlog("将发起端的offer设置为远端媒体信息");
140.   await peerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(offer)));
141.   wlog("创建Answer 并设置到本地");
142.   let answer = await peerConnection.createAnswer()
143.   await peerConnection.setLocalDescription(answer);
145.   wlog("发送answer给发起端");
146.   // 构造answer消息发送给对端
147.   let paramObj = {
148.     userId: oppositeUserId,
149.     type: "answer",
150.     data: JSON.stringify(answer)
151.   }
152.   // 执行发送
153.   const res = await axios.post(`${BaseUrl}/rtcs/sendMessage`, paramObj);
154. }
156. // 加入处理器
157. function joinHandle(userIds) {
158.   // 判断连接的用户个数
159.   if (userIds.length == 1 && userIds[0] == userId) {
160.     wlog("标识为发起端，等待对方加入房间...")
161.     isRoomEmpty.value = true;
162.     // 存在一个连接并且是自身，标识我们是发起端
163.     offerFlag = true;
164.   } else if (userIds.length > 1) {
165.     // 对方加入了
166.     wlog("对方已连接...")
167.     isRoomEmpty.value = false;
169.     // 取出对方ID
170.     for (let id of userIds) {
171.       if (id != userId) {
172.         oppositeUserId = id;
173.       }
174.     }
176.     wlog(`对端ID: ${oppositeUserId}`)
177.     // 开始交换SDP和Candidate
178.     swapVideoInfo()
179.   }
180. }
182. // 交换SDP和candidate
183. async function swapVideoInfo() {
184.   wlog("开始交换Sdp和Candidate...");
185.   // 检查是否为发起端，如果是创建offer设置到本地，并发送给远端
186.   if (offerFlag) {
187.     wlog(`发起端创建offer`)
188.     let offer = await peerConnection.createOffer()
189.     await peerConnection.setLocalDescription(offer); // 将媒体信息设置到本地
190.     wlog("发启端设置SDP-offer到本地");
192.     // 构造消息ws发送给远端
193.     let paramObj = {
194.       userId: oppositeUserId,
195.       type: "offer",
196.       data: JSON.stringify(offer)
197.     };
199.     wlog(`构造offer信息发送给远端：${paramObj}`)
201.     // 执行发送
202.     const res = await axios.post(`${BaseUrl}/rtcs/sendMessage`, paramObj);
204.   }
205. }
207. // 将candidate信息发送给远端
208. async function sendCandidate(candidate) {
209.   // 构造消息ws发送给远端
210.   let paramObj = {
211.     userId: oppositeUserId,
212.     type: "candidate",
213.     data: JSON.stringify(candidate)
214.   };
216.   wlog(`构造candidate信息发送给远端：${paramObj}`);
218.   // 执行发送
219.   const res = await axios.post(`${BaseUrl}/rtcs/sendMessage`, paramObj);
221. }
223. // 创建RTC连接对象并监听和获取condidate信息
224. function createPeerConnection() {
225.   wlog("开始创建PC对象...")
226.   peerConnection = new RTCPeerConnection(iceServers);
227.   wlog("创建PC对象成功")
228.   // 创建RTC连接对象后连接websocket
229.   initWebSocket();
231.   // 监听网络信息（ICE Candidate）
232.   peerConnection.onicecandidate = (event) => {
233.     if (event.candidate) {
234.       candidateInfo = event.candidate;
235.       wlog("candidate信息变化...");
236.       // 将candidate信息发送给远端
237.       setTimeout(()=>{
238.         sendCandidate(event.candidate);
239.       }, 150)
240.     }
241.   };
243.   // 监听远端音视频流
244.   peerConnection.ontrack = (event) => {
245.     nextTick(() => {
246.       wlog("====> 收到远端数据流 <=====")
247.       if (!remoteVideo.value.srcObject) {
248.         remoteVideo.value.srcObject = event.streams[0];
249.         remoteVideo.value.play();  // 强制播放
250.       }
251.     });
252.   };
254.   // 监听ice连接状态
255.   peerConnection.oniceconnectionstatechange = () => {
256.     wlog(`RTC连接状态改变：${peerConnection.iceConnectionState}`);
257.   };
260.   // 添加本地音视频流到 PeerConnection
261.   localStream.getTracks().forEach(track => {
262.     peerConnection.addTrack(track, localStream);
263.   });
264. }
267. // 日志编写
268. function wlog(text) {
269.   logData.value.unshift(text);
270. }
272. // 给用户生成随机ID.
273. function generateRandomId() {
274.   userId = Math.random().toString(36).substring(2, 12); // 生成10位的随机ID
275.   wlog(`分配到ID:${userId}`)
276. }
278. // 创建房间
279. async function createRoom() {
280.   if (!roomId.value) {
281.     alert('请输入房间号');
282.     return;
283.   }
284.   try {
285.     const res = await axios.post(`${BaseUrl}/rtcs/createRoom`, {
286.       roomId: roomId.value,
287.       userId: userId
288.     });
289.     if (res.data.success) {
290.       wlog(`创建房间成功：${roomId.value}`);
291.       joinRoomHandle();
292.     }
293.   } catch (error) {
294.     wlog(`创建房间失败：${error}`);
295.   }
296. }
298. // 加入指定房间
299. async function joinRoomWithId() {
300.   if (!roomId.value) {
301.     alert('请输入房间号');
302.     return;
303.   }
304.   try {
305.     const res = await axios.post(`${BaseUrl}/rtcs/joinRoom`, {
306.       roomId: roomId.value,
307.       userId: userId
308.     });
309.     if (res.data.success) {
310.       wlog(`加入房间成功：${roomId.value}`);
311.       joinRoomHandle();
312.     }
313.   } catch (error) {
314.     wlog(`加入房间失败：${error}`);
315.   }
316. }
318. // 切换音频
319. function toggleAudio() {
320.   if (localStream) {
321.     const audioTrack = localStream.getAudioTracks()[0];
322.     if (audioTrack) {
323.       audioTrack.enabled = !audioTrack.enabled;
324.       isAudioEnabled.value = audioTrack.enabled;
325.       wlog(`麦克风已${audioTrack.enabled ? '打开' : '关闭'}`);
326.     }
327.   }
328. }
330. // 切换视频
331. function toggleVideo() {
332.   if (localStream) {
333.     const videoTrack = localStream.getVideoTracks()[0];
334.     if (videoTrack) {
335.       videoTrack.enabled = !videoTrack.enabled;
336.       isVideoEnabled.value = videoTrack.enabled;
337.       wlog(`摄像头已${videoTrack.enabled ? '打开' : '关闭'}`);
338.     }
339.   }
340. }
341. </script>

复制代码

1. <style scoped>
2. .video-chat {
3.   display: flex;
4.   flex-direction: column;
5.   align-items: center;
6. }
8. video {
9.   width: 300px;
10.   height: 200px;
11.   margin: 10px;
12. }
14. .remote_video {
15.   border: solid rgb(30, 40, 226) 1px;
16.   margin-left: 20px;
17. }
19. .self_video {
20.   border: solid red 1px;
21. }
23. .video_box {
24.   display: flex;
25. }
27. .video_box div {
28.   border-radius: 10px;
29. }
31. .join_room_btn button {
32.   border: none;
33.   background-color: rgb(119 178 63);
34.   height: 30px;
35.   width: 80px;
36.   border-radius: 10px;
37.   color: white;
38.   margin-top: 10px;
39.   cursor: pointer;
40.   font-size: 13px;
41. }
43. .text_tip {
44.   font-size: 13px;
45.   color: #484848;
46.   padding: 6px;
47. }
49. pre {
50.   width: 600px;
51.   height: 300px;
52.   background-color: #d4d4d4;
53.   border-radius: 10px;
54.   padding: 10px;
55.   overflow-y: auto;
56. }
58. pre div {
59.   padding: 4px 0px;
60.   font-size: 15px;
61. }
63. .userId{
64.   color: #3669ad;
65. }
67. .video-chat p{
68.   font-weight: 600;
69.   color: #b24242;
70. }
72. .room-controls {
73.   margin: 20px 0;
74.   display: flex;
75.   flex-direction: column;
76.   gap: 10px;
77. }
79. .room-input {
80.   display: flex;
81.   gap: 10px;
82.   align-items: center;
83. }
85. .room-input input {
86.   padding: 5px 10px;
87.   border: 1px solid #ccc;
88.   border-radius: 5px;
89. }
91. .media-controls {
92.   display: flex;
93.   gap: 10px;
94. }
96. .room-controls button {
97.   border: none;
98.   background-color: rgb(119 178 63);
99.   height: 30px;
100.   padding: 0 15px;
101.   border-radius: 5px;
102.   color: white;
103.   cursor: pointer;
104.   font-size: 13px;
105. }
107. .media-controls button {
108.   background-color: #3669ad;
109. }
110. </style>

复制代码

SpringBoot逻辑

   如下为后端逻辑,项目布局如下:

  pom.xml

1. <?xml version="1.0" encoding="UTF-8"?>
2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
3.         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
4.         <modelVersion>4.0.0</modelVersion>
5.         <parent>
6.                 <groupId>org.springframework.boot</groupId>
7.                 <artifactId>spring-boot-starter-parent</artifactId>
8.                 <version>2.7.9</version>
9.                 <relativePath/> <!-- lookup parent from repository -->
10.         </parent>
11.         <groupId>com.mh</groupId>
12.         <artifactId>webrtc-backend</artifactId>
13.         <version>0.0.1-SNAPSHOT</version>
14.         <name>webrtc-backend</name>
15.         <description>webrtc-backend</description>
17.         <properties>
18.                 <java.version>1.8</java.version>
19.         </properties>
20.         <dependencies>
21.                 <dependency>
22.                         <groupId>org.springframework.boot</groupId>
23.                         <artifactId>spring-boot-starter-web</artifactId>
24.                 </dependency>
26.                 <dependency>
27.                         <groupId>org.springframework.boot</groupId>
28.                         <artifactId>spring-boot-starter-test</artifactId>
29.                         <scope>test</scope>
30.                 </dependency>
32.                 <dependency>
33.                         <groupId>org.springframework.boot</groupId>
34.                         <artifactId>spring-boot-starter-websocket</artifactId>
35.                 </dependency>
37.                 <dependency>
38.                         <groupId>org.projectlombok</groupId>
39.                         <artifactId>lombok</artifactId>
40.                         <version>1.18.34</version>
41.                 </dependency>
43.         </dependencies>
45.         <build>
46.                 <plugins>
47.                         <plugin>
48.                                 <groupId>org.springframework.boot</groupId>
49.                                 <artifactId>spring-boot-maven-plugin</artifactId>
50.                                 <version>2.6.2</version>
51.                                 <configuration>
52.                                         <mainClass>com.mh.WebrtcBackendApplication</mainClass>
53.                                         <layout>ZIP</layout>
54.                                 </configuration>
55.                                 <executions>
56.                                         <execution>
57.                                                 <goals>
58.                                                         <goal>repackage</goal>
59.                                                 </goals>
60.                                         </execution>
61.                                 </executions>
62.                         </plugin>
63.                 </plugins>
64.         </build>
66. </project>

复制代码

application.yml

1. server:
2.   port: 8095
3.   servlet:
4.     context-path: /meetingV1s
5.   ssl: #ssl配置
6.     enabled: true  # 默认为true
7.     #key-alias: alias-key # 别名(可以不进行配置)
8.     # 保存SSL证书的秘钥库的路径，如果部署到服务器，必须要开启ssl才能获取到摄像头和麦克风
9.     key-store: classpath:www.springsso.top.jks
10.     # ssl证书密码
11.     key-password: gf71v8lf
12.     key-store-password: gf71v8lf
13.     key-store-type: JKS
14.   tomcat:
15.     uri-encoding: UTF-8

复制代码

入口文件

1. // 这个是自己实际项目位置
2. package com.mh;
4. import org.springframework.boot.SpringApplication;
5. import org.springframework.boot.autoconfigure.SpringBootApplication;
7. @SpringBootApplication
8. public class WebrtcBackendApplication {
10.         public static void main(String[] args) {
11.                 SpringApplication.run(WebrtcBackendApplication.class, args);
12.         }
14. }

复制代码

WebSocket处理惩罚器

1. package com.mh.common;
3. import com.mh.dto.bo.UserManager;
4. import com.mh.dto.vo.MessageOut;
5. import lombok.RequiredArgsConstructor;
6. import lombok.extern.slf4j.Slf4j;
7. import org.springframework.stereotype.Component;
8. import org.springframework.web.socket.CloseStatus;
9. import org.springframework.web.socket.TextMessage;
10. import org.springframework.web.socket.WebSocketSession;
11. import org.springframework.web.socket.handler.TextWebSocketHandler;
12. import com.fasterxml.jackson.databind.ObjectMapper;
14. import java.net.URI;
15. import java.util.ArrayList;
16. import java.util.Set;
18. /**
19. * Date:2024/11/14
20. * author:zmh
21. * description: WebSocket处理器
22. **/
24. @Component
25. @RequiredArgsConstructor
26. @Slf4j
27. public class RtcWebSocketHandler  extends TextWebSocketHandler {
29.     // 管理用户的加入和退出...
30.     private final UserManager userManager;
31.     private final ObjectMapper objectMapper = new ObjectMapper();
33.     // 用户连接成功
34.     @Override
35.     public void afterConnectionEstablished(WebSocketSession session) throws Exception {
36.         // 获取用户ID和房间ID
37.         String userId = getParameterByName(session.getUri(), "userId");
38.         String roomId = getParameterByName(session.getUri(), "roomId");
40.         if (userId != null && roomId != null) {
41.             // 保存用户会话
42.             userManager.addUser(userId, session);
43.             log.info("用户 {} 连接成功，房间：{}", userId, roomId);
45.             // 获取房间中的所有用户
46.             Set<String> roomUsers = userManager.getRoomUsers(roomId);
47.             
48.             // 通知房间内所有用户（包括新加入的用户）
49.             for (String uid : roomUsers) {
50.                 WebSocketSession userSession = userManager.getUser(uid);
51.                 if (userSession != null && userSession.isOpen()) {
52.                     MessageOut messageOut = new MessageOut();
53.                     messageOut.setType("join");
54.                     messageOut.setData(new ArrayList<>(roomUsers));
55.                     
56.                     String message = objectMapper.writeValueAsString(messageOut);
57.                     userSession.sendMessage(new TextMessage(message));
58.                     log.info("向用户 {} 发送房间更新消息", uid);
59.                 }
60.             }
61.         }
62.     }
64.     // 接收到客户端消息，解析消息内容进行分发
65.     @Override
66.     protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
67.         // 转换并分发消息
68.         log.info("收到消息");
69.     }
71.     // 处理断开的连接
72.     @Override
73.     public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
74.         String userId = getParameterByName(session.getUri(), "userId");
75.         String roomId = getParameterByName(session.getUri(), "roomId");
77.         if (userId != null && roomId != null) {
78.             // 从房间和会话管理中移除用户
79.             userManager.removeUser(userId);
80.             userManager.leaveRoom(roomId, userId);
81.             
82.             // 获取更新后的房间用户列表
83.             Set<String> remainingUsers = userManager.getRoomUsers(roomId);
84.             
85.             // 通知房间内的其他用户
86.             for (String uid : remainingUsers) {
87.                 WebSocketSession userSession = userManager.getUser(uid);
88.                 if (userSession != null && userSession.isOpen()) {
89.                     MessageOut messageOut = new MessageOut();
90.                     messageOut.setType("join");
91.                     messageOut.setData(new ArrayList<>(remainingUsers));
92.                     
93.                     String message = objectMapper.writeValueAsString(messageOut);
94.                     userSession.sendMessage(new TextMessage(message));
95.                     log.info("向用户 {} 发送用户离开更新消息", uid);
96.                 }
97.             }
98.             
99.             log.info("用户 {} 断开连接，房间：{}", userId, roomId);
100.         }
101.     }
103.     // 辅助方法：从URI中获取参数值
104.     private String getParameterByName(URI uri, String paramName) {
105.         String query = uri.getQuery();
106.         if (query != null) {
107.             String[] pairs = query.split("&");
108.             for (String pair : pairs) {
109.                 String[] keyValue = pair.split("=");
110.                 if (keyValue.length == 2 && keyValue[0].equals(paramName)) {
111.                     return keyValue[1];
112.                 }
113.             }
114.         }
115.         return null;
116.     }
117. }

复制代码

WebSocket设置类

1. package com.mh.config;
3. import com.mh.common.RtcWebSocketHandler;
4. import lombok.RequiredArgsConstructor;
5. import org.springframework.context.annotation.Configuration;
6. import org.springframework.web.socket.config.annotation.EnableWebSocket;
7. import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
8. import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
10. /**
11. * Date:2024/11/14
12. * author:zmh
13. * description: WebSocket配置类
14. **/
16. @Configuration
17. @EnableWebSocket
18. @RequiredArgsConstructor
19. public class WebSocketConfig implements WebSocketConfigurer {
21.     private final RtcWebSocketHandler rtcWebSocketHandler;
23.     @Override
24.     public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
25.         registry.addHandler(rtcWebSocketHandler, "/rtc")
26.                 .setAllowedOrigins("*");
27.     }
28. }

复制代码

webRtc相关接口

1. package com.mh.controller;
3. import com.mh.dto.bo.UserManager;
4. import com.mh.dto.vo.MessageReceive;
5. import lombok.RequiredArgsConstructor;
6. import lombok.extern.slf4j.Slf4j;
7. import org.springframework.http.ResponseEntity;
8. import org.springframework.web.bind.annotation.*;
10. import java.util.HashMap;
11. import java.util.Map;
13. /**
14. * Date:2024/11/15
15. * author:zmh
16. * description: rtc 相关接口
17. **/
19. @RestController
20. @Slf4j
21. @CrossOrigin
22. @RequiredArgsConstructor
23. @RequestMapping("/rtcs")
24. public class RtcController {
26.     private final UserManager userManager;
28.     /**
29.      * 给指定用户发送执行类型消息
30.      * @param messageReceive 消息参数接收Vo
31.      * @return ·
32.      */
33.     @PostMapping("/sendMessage")
34.     public Boolean sendMessage(@RequestBody MessageReceive messageReceive){
35.         userManager.sendMessage(messageReceive);
36.         return true;
37.     }
39.     @PostMapping("/createRoom")
40.     public ResponseEntity<?> createRoom(@RequestBody Map<String, String> params) {
41.         String roomId = params.get("roomId");
42.         String userId = params.get("userId");
43.         // 在 UserManager 中实现房间创建逻辑
44.         boolean success = userManager.createRoom(roomId, userId);
45.         Map<String, Object> response = new HashMap<>();
46.         response.put("success", success);
47.         return ResponseEntity.ok(response);
48.     }
50.     @PostMapping("/joinRoom")
51.     public ResponseEntity<?> joinRoom(@RequestBody Map<String, String> params) {
52.         String roomId = params.get("roomId");
53.         String userId = params.get("userId");
54.         // 在 UserManager 中实现加入房间逻辑
55.         boolean success = userManager.joinRoom(roomId, userId);
56.         Map<String, Object> response = new HashMap<>();
57.         response.put("success", success);
58.         return ResponseEntity.ok(response);
59.     }
60. }

复制代码

用户管理器单例对象

1. package com.mh.dto.bo;
3. import com.fasterxml.jackson.core.JsonProcessingException;
4. import com.fasterxml.jackson.databind.ObjectMapper;
5. import com.mh.dto.vo.MessageOut;
6. import com.mh.dto.vo.MessageReceive;
7. import java.util.stream.Collectors;
8. import lombok.Data;
9. import lombok.extern.slf4j.Slf4j;
10. import org.springframework.stereotype.Component;
11. import org.springframework.web.socket.TextMessage;
12. import org.springframework.web.socket.WebSocketSession;
14. import java.io.IOException;
15. import java.util.HashMap;
16. import java.util.List;
17. import java.util.Map;
18. import java.util.Set;
19. import java.util.HashSet;
20. import java.util.concurrent.ConcurrentHashMap;
22. /**
23. * Date:2024/11/14
24. * author:zmh
25. * description: 用户管理器单例对象
26. **/
28. @Data
29. @Component
30. @Slf4j
31. public class UserManager {
32.     // 管理连接用户信息
33.     private final HashMap<String, WebSocketSession> userMap = new HashMap<>();
35.     // 添加房间管理的Map
36.     private final Map<String, Set<String>> roomUsers = new ConcurrentHashMap<>();
38.     // 加入用户
39.     public void addUser(String userId, WebSocketSession session) {
40.         userMap.put(userId, session);
41.         log.info("用户 {} 加入", userId);
42.     }
44.     // 移除用户
45.     public void removeUser(String userId) {
46.         userMap.remove(userId);
47.         log.info("用户 {} 退出", userId);
48.     }
50.     // 获取用户
51.     public WebSocketSession getUser(String userId) {
52.         return userMap.get(userId);
53.     }
55.     // 获取所有用户ID构造成list返回
56.     public List<String> getAllUserId() {
57.         return userMap.keySet().stream().collect(Collectors.toList());
58.     }
60.     // 通知用户加入-广播消息
61.     public void sendMessageAllUser() throws IOException {
62.         // 获取所有连接用户ID列表
63.         List<String> allUserId = getAllUserId();
64.         for (String userId : userMap.keySet()) {
65.             WebSocketSession session = userMap.get(userId);
66.             MessageOut messageOut = new MessageOut("join", allUserId);
67.             String messageText = new ObjectMapper().writeValueAsString(messageOut);
68.             // 广播消息
69.              session.sendMessage(new TextMessage(messageText));
70.         }
71.     }
73.     /**
74.      * 创建房间
75.      * @param roomId 房间ID
76.      * @param userId 用户ID
77.      * @return 创建结果
78.      */
79.     public boolean createRoom(String roomId, String userId) {
80.         if (roomUsers.containsKey(roomId)) {
81.             log.warn("房间 {} 已存在", roomId);
82.             return false;
83.         }
84.         Set<String> users = new HashSet<>();
85.         users.add(userId);
86.         roomUsers.put(roomId, users);
87.         log.info("用户 {} 创建了房间 {}", userId, roomId);
88.         return true;
89.     }
91.     /**
92.      * 加入房间
93.      * @param roomId 房间ID
94.      * @param userId 用户ID
95.      * @return 加入结果
96.      */
97.     public boolean joinRoom(String roomId, String userId) {
98.         Set<String> users = roomUsers.computeIfAbsent(roomId, k -> new HashSet<>());
99.         if (users.size() >= 2) {
100.             log.warn("房间 {} 已满", roomId);
101.             return false;
102.         }
103.         users.add(userId);
104.         log.info("用户 {} 加入房间 {}", userId, roomId);
105.         return true;
106.     }
108.     /**
109.      * 离开房间
110.      * @param roomId 房间ID
111.      * @param userId 用户ID
112.      */
113.     public void leaveRoom(String roomId, String userId) {
114.         Set<String> users = roomUsers.get(roomId);
115.         if (users != null) {
116.             users.remove(userId);
117.             if (users.isEmpty()) {
118.                 roomUsers.remove(roomId);
119.                 log.info("房间 {} 已清空并删除", roomId);
120.             }
121.             log.info("用户 {} 离开了房间 {}", userId, roomId);
122.         }
123.     }
125.     /**
126.      * 获取房间用户
127.      * @param roomId 房间ID
128.      * @return 用户集合
129.      */
130.     public Set<String> getRoomUsers(String roomId) {
131.         return roomUsers.getOrDefault(roomId, new HashSet<>());
132.     }
134.     // 修改现有的 sendMessage 方法，考虑房间信息
135.     public void sendMessage(MessageReceive messageReceive) {
136.         String userId = messageReceive.getUserId();
137.         String type = messageReceive.getType();
138.         String data = messageReceive.getData();
139.         
140.         WebSocketSession session = userMap.get(userId);
141.         if (session != null && session.isOpen()) {
142.             try {
143.                 MessageOut messageOut = new MessageOut();
144.                 messageOut.setType(type);
145.                 messageOut.setData(data);
146.                
147.                 String message = new ObjectMapper().writeValueAsString(messageOut);
148.                 session.sendMessage(new TextMessage(message));
149.                 log.info("消息发送成功: type={}, to={}", type, userId);
150.             } catch (Exception e) {
151.                 log.error("消息发送失败", e);
152.             }
153.         }
154.     }
155. }

复制代码

消息输出前端Vo对象

1. package com.mh.dto.vo;
3. import lombok.AllArgsConstructor;
4. import lombok.Data;
5. import lombok.NoArgsConstructor;
7. /**
8. * Date:2024/11/15
9. * author:zmh
10. * description: 消息输出前端Vo对象
11. **/
13. @Data
14. @AllArgsConstructor
15. @NoArgsConstructor
16. public class MessageOut {
17.     /**
18.      * 消息类型【join, offer, answer, candidate, leave】
19.      */
20.     private String type;
22.     /**
23.      * 消息内容 前端stringFiy序列化后字符串
24.      */
25.     private Object data;
26. }

复制代码

消息接收Vo对象

1. package com.mh.dto.vo;
3. import lombok.AllArgsConstructor;
4. import lombok.Data;
5. import lombok.NoArgsConstructor;
7. /**
8. * Date:2024/11/15
9. * author:zmh
10. * description: 消息接收Vo对象
11. **/
13. @Data
14. @AllArgsConstructor
15. @NoArgsConstructor
16. public class MessageReceive {
18.     /**
19.      * 用户ID，用于获取用户Session
20.      */
21.     private String userId;
23.     /**
24.      * 消息类型【join, offer, answer, candidate, leave】
25.      */
26.     private String type;
28.     /**
29.      * 消息内容 前端stringFiy序列化后字符串
30.      */
31.     private String data;
32. }

复制代码

结语

如上为vue+springboot+webtrc+websocket实现双人音视频通话会议的全部逻辑，如有遗漏后续会进行补充

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。