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

前言

最近一些时间我有研究,如何实现一个视频会议功能,但是找了好多资料都不太理想,最终参考了一个文章
WebRTC实现双端音视频聊天(Vue3 + SpringBoot)

只不过,它的实现效果里面只会播放本地的mp4视频文件,但是按照它的原理是可以正常的实现音视频通话的
它的最终效果是这样的

在这里插入图片描述

然后我的实现逻辑在它的基础上进行了优化
实现了如下效果,如下是我部署项目到服务器之后,和朋友验证之后的截图

在这里插入图片描述

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

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

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

在这里插入图片描述
在这里插入图片描述

VUE逻辑

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

前端项目结构如下:

在这里插入图片描述

package.json

{"name": "webrtc_test","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"axios": "^1.7.7","vue": "^3.5.12"},"devDependencies": {"@vitejs/plugin-vue": "^5.1.4","vite": "^5.4.10"}
}

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

npm i axios@1.7.7

vite.config.js

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

main.js

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

App.vue

<template><div class="video-chat"><div v-if="isRoomEmpty"><p>{{ roomStatusText }}</p></div><!-- 视频双端显示 --><div class="video_box"><div class="self_video"><div class="text_tip">我:<span class="userId">{{ userId }}</span></div><video ref="localVideo" autoplay playsinline></video></div><div class="remote_video"><div class="text_tip">对方:<span class="userId">{{ oppositeUserId }}</span></div><video ref="remoteVideo" autoplay playsinline></video></div></div><!-- 加入房间按钮 --><div class="room-controls"><div class="room-input"><input v-model="roomId" placeholder="请输入房间号" /><button @click="createRoom">创建房间</button><button @click="joinRoomWithId">加入房间</button></div><div class="media-controls"><button @click="toggleAudio">{{ isAudioEnabled ? '关闭麦克风' : '打开麦克风' }}</button><button @click="toggleVideo">{{ isVideoEnabled ? '关闭摄像头' : '打开摄像头' }}</button></div></div><!-- 日志打印 --><div class="log_box"><pre><div v-for="(item, index) of logData" :key="index">{{ item }}</div></pre></div></div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue";
import axios from "axios";// WebRTC 相关变量
const localVideo = ref(null);
const remoteVideo = ref(null);
const isRoomEmpty = ref(true); // 判断房间是否为空let localStream; // 本地流数据
let peerConnection; // RTC连接对象
let signalingSocket; // 信令服务器socket对象
let userId; // 当前用户ID
let oppositeUserId; // 对方用户IDlet logData = ref(["日志初始化..."]);// 请求根路径,如果需要部署服务器,把对应ip改成自己服务器ip
let BaseUrl = "https://localhost:8095/meetingV1s"let wsUrl = "wss://localhost:8095/meetingV1s";// candidate信息
let candidateInfo = "";// 发起端标识
let offerFlag = false;// 房间状态文本
let roomStatusText = ref("点击'加入房间'开始音视频聊天");// STUN 服务器,
// const iceServers = [
//   {
//     urls: "stun:stun.l.google.com:19302"  // Google 的 STUN 服务器
//   },
//   {
//     urls: "stun:自己的公网IP:3478" // 自己的Stun服务器
//   },
//   {
//     urls: "turn:自己的公网IP:3478",   // 自己的 TURN 服务器
//     username: "maohe",
//     credential: "maohe"
//   }
// ];
// ============< 看这 >================
// 没有搭建STUN和TURN服务器的使用如下ice配置即可
const iceServers = [{urls: "stun:stun.l.google.com:19302"  // Google 的 STUN 服务器}
];// 在 script setup 中添加新的变量声明
const roomId = ref(''); // 房间号
const isAudioEnabled = ref(true); // 音频状态
const isVideoEnabled = ref(true); // 视频状态onMounted(() => {generateRandomId();
})// 加入房间,开启本地摄像头获取音视频流数据。
function joinRoomHandle() {roomStatusText.value = "等待对方加入房间..."getVideoStream();
}// 获取本地视频 模拟从本地摄像头获取音视频流数据
async function getVideoStream() {try {localStream = await navigator.mediaDevices.getUserMedia({video: true,audio: true});localVideo.value.srcObject = localStream;wlog(`获取本地流成功~`)createPeerConnection(); // 创建RTC对象,监听candidate} catch (err) {console.error('获取本地媒体流失败:', err);}
}// 初始化 WebSocket 连接
function initWebSocket() {wlog("开始连接websocket")// 连接ws时携带用户ID和房间号signalingSocket = new WebSocket(`${wsUrl}/rtc?userId=${userId}&roomId=${roomId.value}`);signalingSocket.onopen = () => {wlog('WebSocket 已连接');};// 消息处理signalingSocket.onmessage = (event) => {handleSignalingMessage(event.data);};
};// 消息处理器 - 解析器
function handleSignalingMessage(message) {wlog("收到ws消息,开始解析...")wlog(message)let parseMsg = JSON.parse(message);wlog(`解析结果:${parseMsg}`);if (parseMsg.type == "join") {joinHandle(parseMsg.data);} else if (parseMsg.type == "offer") {wlog("收到发起端offer,开始解析...");offerHandle(parseMsg.data);} else if (parseMsg.type == "answer") {wlog("收到接收端的answer,开始解析...");answerHandle(parseMsg.data);}else if(parseMsg.type == "candidate"){wlog("收到远端candidate,开始解析...");candidateHandle(parseMsg.data);}}// 远端Candidate处理器
async function candidateHandle(candidate){peerConnection.addIceCandidate(new RTCIceCandidate(JSON.parse(candidate)));wlog("+++++++ 本端candidate设置完毕 ++++++++");
}// 接收端的answer处理
async function answerHandle(answer) {wlog("将answer设置为远端信息");peerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(answer))); // 设置远端SDP
}// 发起端offer处理器
async function offerHandle(offer) {wlog("将发起端的offer设置为远端媒体信息");await peerConnection.setRemoteDescription(new RTCSessionDescription(JSON.parse(offer)));wlog("创建Answer 并设置到本地");let answer = await peerConnection.createAnswer()await peerConnection.setLocalDescription(answer);wlog("发送answer给发起端");// 构造answer消息发送给对端let paramObj = {userId: oppositeUserId,type: "answer",data: JSON.stringify(answer)}// 执行发送const res = await axios.post(`${BaseUrl}/rtcs/sendMessage`, paramObj);
}// 加入处理器
function joinHandle(userIds) {// 判断连接的用户个数if (userIds.length == 1 && userIds[0] == userId) {wlog("标识为发起端,等待对方加入房间...")isRoomEmpty.value = true;// 存在一个连接并且是自身,标识我们是发起端offerFlag = true;} else if (userIds.length > 1) {// 对方加入了wlog("对方已连接...")isRoomEmpty.value = false;// 取出对方IDfor (let id of userIds) {if (id != userId) {oppositeUserId = id;}}wlog(`对端ID: ${oppositeUserId}`)// 开始交换SDP和CandidateswapVideoInfo()}
}// 交换SDP和candidate
async function swapVideoInfo() {wlog("开始交换Sdp和Candidate...");// 检查是否为发起端,如果是创建offer设置到本地,并发送给远端if (offerFlag) {wlog(`发起端创建offer`)let offer = await peerConnection.createOffer()await peerConnection.setLocalDescription(offer); // 将媒体信息设置到本地wlog("发启端设置SDP-offer到本地");// 构造消息ws发送给远端let paramObj = {userId: oppositeUserId,type: "offer",data: JSON.stringify(offer)};wlog(`构造offer信息发送给远端:${paramObj}`)// 执行发送const res = await axios.post(`${BaseUrl}/rtcs/sendMessage`, paramObj);}
}// 将candidate信息发送给远端
async function sendCandidate(candidate) {// 构造消息ws发送给远端let paramObj = {userId: oppositeUserId,type: "candidate",data: JSON.stringify(candidate)};wlog(`构造candidate信息发送给远端:${paramObj}`);// 执行发送const res = await axios.post(`${BaseUrl}/rtcs/sendMessage`, paramObj);}// 创建RTC连接对象并监听和获取condidate信息
function createPeerConnection() {wlog("开始创建PC对象...")peerConnection = new RTCPeerConnection(iceServers);wlog("创建PC对象成功")// 创建RTC连接对象后连接websocketinitWebSocket();// 监听网络信息(ICE Candidate)peerConnection.onicecandidate = (event) => {if (event.candidate) {candidateInfo = event.candidate;wlog("candidate信息变化...");// 将candidate信息发送给远端setTimeout(()=>{sendCandidate(event.candidate);}, 150)}};// 监听远端音视频流peerConnection.ontrack = (event) => {nextTick(() => {wlog("====> 收到远端数据流 <=====")if (!remoteVideo.value.srcObject) {remoteVideo.value.srcObject = event.streams[0];remoteVideo.value.play();  // 强制播放}});};// 监听ice连接状态peerConnection.oniceconnectionstatechange = () => {wlog(`RTC连接状态改变:${peerConnection.iceConnectionState}`);};// 添加本地音视频流到 PeerConnectionlocalStream.getTracks().forEach(track => {peerConnection.addTrack(track, localStream);});
}// 日志编写
function wlog(text) {logData.value.unshift(text);
}// 给用户生成随机ID.
function generateRandomId() {userId = Math.random().toString(36).substring(2, 12); // 生成10位的随机IDwlog(`分配到ID:${userId}`)
}// 创建房间
async function createRoom() {if (!roomId.value) {alert('请输入房间号');return;}try {const res = await axios.post(`${BaseUrl}/rtcs/createRoom`, {roomId: roomId.value,userId: userId});if (res.data.success) {wlog(`创建房间成功:${roomId.value}`);joinRoomHandle();}} catch (error) {wlog(`创建房间失败:${error}`);}
}// 加入指定房间
async function joinRoomWithId() {if (!roomId.value) {alert('请输入房间号');return;}try {const res = await axios.post(`${BaseUrl}/rtcs/joinRoom`, {roomId: roomId.value,userId: userId});if (res.data.success) {wlog(`加入房间成功:${roomId.value}`);joinRoomHandle();}} catch (error) {wlog(`加入房间失败:${error}`);}
}// 切换音频
function toggleAudio() {if (localStream) {const audioTrack = localStream.getAudioTracks()[0];if (audioTrack) {audioTrack.enabled = !audioTrack.enabled;isAudioEnabled.value = audioTrack.enabled;wlog(`麦克风已${audioTrack.enabled ? '打开' : '关闭'}`);}}
}// 切换视频
function toggleVideo() {if (localStream) {const videoTrack = localStream.getVideoTracks()[0];if (videoTrack) {videoTrack.enabled = !videoTrack.enabled;isVideoEnabled.value = videoTrack.enabled;wlog(`摄像头已${videoTrack.enabled ? '打开' : '关闭'}`);}}
}
</script>
<style scoped>
.video-chat {display: flex;flex-direction: column;align-items: center;
}video {width: 300px;height: 200px;margin: 10px;
}.remote_video {border: solid rgb(30, 40, 226) 1px;margin-left: 20px;
}.self_video {border: solid red 1px;
}.video_box {display: flex;
}.video_box div {border-radius: 10px;
}.join_room_btn button {border: none;background-color: rgb(119 178 63);height: 30px;width: 80px;border-radius: 10px;color: white;margin-top: 10px;cursor: pointer;font-size: 13px;
}.text_tip {font-size: 13px;color: #484848;padding: 6px;
}pre {width: 600px;height: 300px;background-color: #d4d4d4;border-radius: 10px;padding: 10px;overflow-y: auto;
}pre div {padding: 4px 0px;font-size: 15px;
}.userId{color: #3669ad;
}.video-chat p{font-weight: 600;color: #b24242;
}.room-controls {margin: 20px 0;display: flex;flex-direction: column;gap: 10px;
}.room-input {display: flex;gap: 10px;align-items: center;
}.room-input input {padding: 5px 10px;border: 1px solid #ccc;border-radius: 5px;
}.media-controls {display: flex;gap: 10px;
}.room-controls button {border: none;background-color: rgb(119 178 63);height: 30px;padding: 0 15px;border-radius: 5px;color: white;cursor: pointer;font-size: 13px;
}.media-controls button {background-color: #3669ad;
}
</style>

SpringBoot逻辑

如下为后端逻辑,项目结构如下:
在这里插入图片描述

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.9</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.mh</groupId><artifactId>webrtc-backend</artifactId><version>0.0.1-SNAPSHOT</version><name>webrtc-backend</name><description>webrtc-backend</description><properties><java.version>1.8</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.34</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>2.6.2</version><configuration><mainClass>com.mh.WebrtcBackendApplication</mainClass><layout>ZIP</layout></configuration><executions><execution><goals><goal>repackage</goal></goals></execution></executions></plugin></plugins></build></project>

application.yml

server:port: 8095servlet:context-path: /meetingV1sssl: #ssl配置enabled: true  # 默认为true#key-alias: alias-key # 别名(可以不进行配置)# 保存SSL证书的秘钥库的路径,如果部署到服务器,必须要开启ssl才能获取到摄像头和麦克风key-store: classpath:www.springsso.top.jks# ssl证书密码key-password: gf71v8lfkey-store-password: gf71v8lfkey-store-type: JKStomcat:uri-encoding: UTF-8

入口文件

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

WebSocket处理器

package com.mh.common;import com.mh.dto.bo.UserManager;
import com.mh.dto.vo.MessageOut;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import com.fasterxml.jackson.databind.ObjectMapper;import java.net.URI;
import java.util.ArrayList;
import java.util.Set;/*** Date:2024/11/14* author:zmh* description: WebSocket处理器**/@Component
@RequiredArgsConstructor
@Slf4j
public class RtcWebSocketHandler  extends TextWebSocketHandler {// 管理用户的加入和退出...private final UserManager userManager;private final ObjectMapper objectMapper = new ObjectMapper();// 用户连接成功@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {// 获取用户ID和房间IDString userId = getParameterByName(session.getUri(), "userId");String roomId = getParameterByName(session.getUri(), "roomId");if (userId != null && roomId != null) {// 保存用户会话userManager.addUser(userId, session);log.info("用户 {} 连接成功,房间:{}", userId, roomId);// 获取房间中的所有用户Set<String> roomUsers = userManager.getRoomUsers(roomId);// 通知房间内所有用户(包括新加入的用户)for (String uid : roomUsers) {WebSocketSession userSession = userManager.getUser(uid);if (userSession != null && userSession.isOpen()) {MessageOut messageOut = new MessageOut();messageOut.setType("join");messageOut.setData(new ArrayList<>(roomUsers));String message = objectMapper.writeValueAsString(messageOut);userSession.sendMessage(new TextMessage(message));log.info("向用户 {} 发送房间更新消息", uid);}}}}// 接收到客户端消息,解析消息内容进行分发@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {// 转换并分发消息log.info("收到消息");}// 处理断开的连接@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {String userId = getParameterByName(session.getUri(), "userId");String roomId = getParameterByName(session.getUri(), "roomId");if (userId != null && roomId != null) {// 从房间和会话管理中移除用户userManager.removeUser(userId);userManager.leaveRoom(roomId, userId);// 获取更新后的房间用户列表Set<String> remainingUsers = userManager.getRoomUsers(roomId);// 通知房间内的其他用户for (String uid : remainingUsers) {WebSocketSession userSession = userManager.getUser(uid);if (userSession != null && userSession.isOpen()) {MessageOut messageOut = new MessageOut();messageOut.setType("join");messageOut.setData(new ArrayList<>(remainingUsers));String message = objectMapper.writeValueAsString(messageOut);userSession.sendMessage(new TextMessage(message));log.info("向用户 {} 发送用户离开更新消息", uid);}}log.info("用户 {} 断开连接,房间:{}", userId, roomId);}}// 辅助方法:从URI中获取参数值private String getParameterByName(URI uri, String paramName) {String query = uri.getQuery();if (query != null) {String[] pairs = query.split("&");for (String pair : pairs) {String[] keyValue = pair.split("=");if (keyValue.length == 2 && keyValue[0].equals(paramName)) {return keyValue[1];}}}return null;}
}

WebSocket配置类

package com.mh.config;import com.mh.common.RtcWebSocketHandler;
import lombok.RequiredArgsConstructor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;/*** Date:2024/11/14* author:zmh* description: WebSocket配置类**/@Configuration
@EnableWebSocket
@RequiredArgsConstructor
public class WebSocketConfig implements WebSocketConfigurer {private final RtcWebSocketHandler rtcWebSocketHandler;@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(rtcWebSocketHandler, "/rtc").setAllowedOrigins("*");}
}

webRtc相关接口

package com.mh.controller;import com.mh.dto.bo.UserManager;
import com.mh.dto.vo.MessageReceive;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.Map;/*** Date:2024/11/15* author:zmh* description: rtc 相关接口**/@RestController
@Slf4j
@CrossOrigin
@RequiredArgsConstructor
@RequestMapping("/rtcs")
public class RtcController {private final UserManager userManager;/*** 给指定用户发送执行类型消息* @param messageReceive 消息参数接收Vo* @return ·*/@PostMapping("/sendMessage")public Boolean sendMessage(@RequestBody MessageReceive messageReceive){userManager.sendMessage(messageReceive);return true;}@PostMapping("/createRoom")public ResponseEntity<?> createRoom(@RequestBody Map<String, String> params) {String roomId = params.get("roomId");String userId = params.get("userId");// 在 UserManager 中实现房间创建逻辑boolean success = userManager.createRoom(roomId, userId);Map<String, Object> response = new HashMap<>();response.put("success", success);return ResponseEntity.ok(response);}@PostMapping("/joinRoom")public ResponseEntity<?> joinRoom(@RequestBody Map<String, String> params) {String roomId = params.get("roomId");String userId = params.get("userId");// 在 UserManager 中实现加入房间逻辑boolean success = userManager.joinRoom(roomId, userId);Map<String, Object> response = new HashMap<>();response.put("success", success);return ResponseEntity.ok(response);}
}

用户管理器单例对象

package com.mh.dto.bo;import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.mh.dto.vo.MessageOut;
import com.mh.dto.vo.MessageReceive;
import java.util.stream.Collectors;
import lombok.Data;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;import java.io.IOException;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Set;
import java.util.HashSet;
import java.util.concurrent.ConcurrentHashMap;/*** Date:2024/11/14* author:zmh* description: 用户管理器单例对象**/@Data
@Component
@Slf4j
public class UserManager {// 管理连接用户信息private final HashMap<String, WebSocketSession> userMap = new HashMap<>();// 添加房间管理的Mapprivate final Map<String, Set<String>> roomUsers = new ConcurrentHashMap<>();// 加入用户public void addUser(String userId, WebSocketSession session) {userMap.put(userId, session);log.info("用户 {} 加入", userId);}// 移除用户public void removeUser(String userId) {userMap.remove(userId);log.info("用户 {} 退出", userId);}// 获取用户public WebSocketSession getUser(String userId) {return userMap.get(userId);}// 获取所有用户ID构造成list返回public List<String> getAllUserId() {return userMap.keySet().stream().collect(Collectors.toList());}// 通知用户加入-广播消息public void sendMessageAllUser() throws IOException {// 获取所有连接用户ID列表List<String> allUserId = getAllUserId();for (String userId : userMap.keySet()) {WebSocketSession session = userMap.get(userId);MessageOut messageOut = new MessageOut("join", allUserId);String messageText = new ObjectMapper().writeValueAsString(messageOut);// 广播消息session.sendMessage(new TextMessage(messageText));}}/*** 创建房间* @param roomId 房间ID* @param userId 用户ID* @return 创建结果*/public boolean createRoom(String roomId, String userId) {if (roomUsers.containsKey(roomId)) {log.warn("房间 {} 已存在", roomId);return false;}Set<String> users = new HashSet<>();users.add(userId);roomUsers.put(roomId, users);log.info("用户 {} 创建了房间 {}", userId, roomId);return true;}/*** 加入房间* @param roomId 房间ID* @param userId 用户ID* @return 加入结果*/public boolean joinRoom(String roomId, String userId) {Set<String> users = roomUsers.computeIfAbsent(roomId, k -> new HashSet<>());if (users.size() >= 2) {log.warn("房间 {} 已满", roomId);return false;}users.add(userId);log.info("用户 {} 加入房间 {}", userId, roomId);return true;}/*** 离开房间* @param roomId 房间ID* @param userId 用户ID*/public void leaveRoom(String roomId, String userId) {Set<String> users = roomUsers.get(roomId);if (users != null) {users.remove(userId);if (users.isEmpty()) {roomUsers.remove(roomId);log.info("房间 {} 已清空并删除", roomId);}log.info("用户 {} 离开了房间 {}", userId, roomId);}}/*** 获取房间用户* @param roomId 房间ID* @return 用户集合*/public Set<String> getRoomUsers(String roomId) {return roomUsers.getOrDefault(roomId, new HashSet<>());}// 修改现有的 sendMessage 方法,考虑房间信息public void sendMessage(MessageReceive messageReceive) {String userId = messageReceive.getUserId();String type = messageReceive.getType();String data = messageReceive.getData();WebSocketSession session = userMap.get(userId);if (session != null && session.isOpen()) {try {MessageOut messageOut = new MessageOut();messageOut.setType(type);messageOut.setData(data);String message = new ObjectMapper().writeValueAsString(messageOut);session.sendMessage(new TextMessage(message));log.info("消息发送成功: type={}, to={}", type, userId);} catch (Exception e) {log.error("消息发送失败", e);}}}
}

消息输出前端Vo对象

package com.mh.dto.vo;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;/*** Date:2024/11/15* author:zmh* description: 消息输出前端Vo对象**/@Data
@AllArgsConstructor
@NoArgsConstructor
public class MessageOut {/*** 消息类型【join, offer, answer, candidate, leave】*/private String type;/*** 消息内容 前端stringFiy序列化后字符串*/private Object data;
}

消息接收Vo对象

package com.mh.dto.vo;import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;/*** Date:2024/11/15* author:zmh* description: 消息接收Vo对象**/@Data
@AllArgsConstructor
@NoArgsConstructor
public class MessageReceive {/*** 用户ID,用于获取用户Session*/private String userId;/*** 消息类型【join, offer, answer, candidate, leave】*/private String type;/*** 消息内容 前端stringFiy序列化后字符串*/private String data;
}

结语

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/17724.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nginx播放视频(auth_request鉴权)

学习链接 Nginx通过auth_request结合Springboot实现静态文件下载鉴权 nginx搭建直播推流服务&推流拉流鉴权 步骤 1、安装nginx 这里nginx的版本是nginx-1.24.0 ./configure --with-http_ssl_module --with-stream --with-stream_ssl_module --with-http_auth_req…

【论文笔记】ZeroGS:扩展Spann3R+GS+pose估计

spann3r是利用dust3r做了增量式的点云重建&#xff0c;这里zeroGS在前者的基础上&#xff0c;进行了增量式的GS重建以及进行了pose的联合优化&#xff0c;这是一篇dust3r与GS结合的具有启发意义的工作。 abstract NeRF和3DGS是重建和渲染逼真图像的流行技术。然而&#xff0c;…

Webpack相关优化总结

在使用webpack时提供了各种配置&#xff0c;这里结合在业务中常用的配置汇总一下可以进行的一系列的webpack优化 缩小文件搜索范围 其原理是在构建时&#xff0c;会以用户配置的Entry为开始依次递归遍历每个Module&#xff0c;在遍历每个Module时会调用相应合适的Loader对原模…

【操作系统】操作系统结构

内核 什么是内核&#xff1f; 内核作为应用程序连接硬件设备的桥梁&#xff0c;使得应用程序只需关心与内核交互&#xff0c;不用关心硬件细节。 内核有哪些能力呢&#xff1f; 内核是怎么工作的&#xff1f; Linux 的设计 MultiTask SMP ELF ELF 的意思是可执行文件链接格式…

【无线感知会议系列-22 】Vivisecting Mobility Management in 5G Cellular Networks

这篇是发表在SIGCOMM上的一篇paper 研究方向国内一些移动应用APP厂商&#xff1a;比如抖音,腾讯可以借鉴一下&#xff0c;和终端 厂商联合开发&#xff0c;提高其QOE。 摘要 随着5G技术对多种无线电频段和不同部署模式&#xff08;例如独立组网&#xff08;SA&#xff09;与…

【RAG落地利器】Weaviate、Milvus、Qdrant 和 Chroma 向量数据库对比

什么是向量数据库? 向量数据库是一种将数据存储为高维向量的数据库&#xff0c;高维向量是特征或属性的数学表示。每个向量都有一定数量的维度&#xff0c;根据数据的复杂性和粒度&#xff0c;可以从数十到数千不等。 向量通常是通过对原始数据(如文本、图像、音频、视频等)…

算法18(力扣136)只出现一次的数字

1、问题 给你一个 非空 整数数组 nums&#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题&#xff0c;且该算法只使用常量额外空间。 2、示例 &#xff08;1&…

【鸿蒙开发】第三十章 应用稳定性-检测、分析、优化、运维汇总

目录​​​​​​​ 1 概述 2 使用Asan检测内存错误 2.1 背景 2.2 原理概述 2.3 使用约束 2.4 配置参数 2.4.1 在app.json5中配置环境变量 2.4.2 在Run/Debug Configurations中配置环境变量 2.5 Asan使能 方式一 方式二 运行ASan 2.6 ASan异常检测类型 heap-buf…

20250214在ubuntu20.04下使用obs studio录制外挂的1080p的USB摄像头【下载安装】

20250214在ubuntu20.04下使用obs studio录制外挂的1080p的USB摄像头 2025/2/14 9:10 缘起&#xff1a;笔记本电脑在ubuntu20.04下使用Guvcview录制自带的摄像头&#xff0c;各种问题。 1、降帧率。WIN10/11自带的相机应用可以满速30fps&#xff0c;马上重启到ubuntu20.04&#…

phpipam1.7安装部署

0软件说明 phpipam是一个开源Web IP地址管理应用程序&#xff08;IPAM&#xff09; phpipam官网&#xff1a;https://www.phpipam.net/ 1安装环境 操作系统&#xff1a;Rocky Linux9.5x86_64 phpipam版本&#xff1a;1.7 php版本&#xff1a;8.0.30 数据库版本&#xff1a…

「vue3-element-admin」Vue3 + TypeScript 项目整合 Animate.css 动画效果实战指南

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall ︱vue3-element-admin︱youlai-boot︱vue-uniapp-template &#x1f33a; 仓库主页&#xff1a; GitCode︱ Gitee ︱ Github &#x1f496; 欢迎点赞 &#x1f44d; 收藏 ⭐评论 …

LabVIEW用户界面(UI)和用户体验(UX)设计

作为一名 LabVIEW 开发者&#xff0c;满足功能需求、保障使用便捷与灵活只是基础要求。在如今这个用户体验至上的时代&#xff0c;为 LabVIEW 应用程序设计直观且具有美学感的界面&#xff0c;同样是不容忽视的关键任务。一个优秀的界面设计&#xff0c;不仅能提升用户对程序的…

AWTK-WEB 快速入门(4) - JS Http 应用程序

XMLHttpRequest 改变了 Web 应用程序与服务器交换数据的方式&#xff0c;fetch 是 XMLHttpRequest 继任者&#xff0c;具有更简洁的语法和更好的 Promise 集成。本文介绍一下如何使用 JS 语言开发 AWTK-WEB 应用程序&#xff0c;并用 fetch 访问远程数据。 用 AWTK Designer 新…

餐饮油烟在线监测仪,守护蓝天的隐形卫士

在城市化的快速发展中&#xff0c;餐饮业作为人们日常生活不可或缺的一部分&#xff0c;带来了便捷与美味的同时&#xff0c;也产生了大量餐饮油烟污染问题。据研究表明&#xff0c;长期暴露于高浓度油烟环境中不仅影响人体健康&#xff0c;还对空气质量造成严重破坏。为了有效…

从Sora到有言:3D视频生成技术的突破与应用

近年来&#xff0c;AIGC领域飞速发展&#xff0c;这个词也越来越高频地出现在了大家的生活中。AIGC 能完成的任务也越来越多&#xff0c;大模型的能力飞速增长 —— 从Deepseek生成文字&#xff0c;到StableDiffusion生成图像&#xff0c;再到Sora可以生成视频。 而现在&#x…

xiao单栏/网格布局typecho主题模板源码

源码介绍 xiao单栏/网格布局typecho主题模板源码 一款基于 bootstrap5.3.3 开发的 typecho 单栏主题 效果预览 源码获取 xiao单栏/网格布局typecho主题模板源码

如何运用边缘计算控制器提升智能工厂的竞争力?

制造业正经历一场深刻的变革。其中&#xff0c;边缘计算作为一项关键技术&#xff0c;在提升生产效率、降低成本以及实现智能制造方面发挥着至关重要的作用。本文将探讨边缘计算在智能工厂中的应用场景及其带来的价值。 边缘计算简介 边缘计算是一种分布式计算范式&#xff0…

今日学习总结

复习了dfs的相关内容&#xff0c;完成了一道dfs相关的题目。 P2371挑战算周长 #include <stdio.h> // 定义一个二维字符数组 map 用于存储地图信息&#xff0c;大小为 25x25 char map[25][25]; // 定义一个常量二维数组 d 作为方向增量数组&#xff0c;用于表示 8 个不同…

SpringMVC学习使用

一、SpringMVC简单理解 1.1 Spring与Web环境集成 1.1.1 ApplicationContext应用上下文获取方式 应用上下文对象是通过new ClasspathXmlApplicationContext(spring配置文件) 方式获取的&#xff0c;但是每次从容器中获得Bean时都要编写new ClasspathXmlApplicationContext(sp…

HCIA项目实践---OSPF的知识和原理总结

9.5 OSPF 9.5.1 从哪些角度评判一个动态路由协议的好坏&#xff1f; &#xff08;1&#xff09;选路佳&#xff08;是否会出环&#xff09; OSPF 协议采用链路状态算法&#xff0c;通过收集网络拓扑信息来计算最短路径&#xff0c;从根本上避免了路由环路的产生。 &#xff08…