websocket+WebRTC实现视频通话

原创 已于 2025-11-26 12:08:05 修改 · 184 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#websocket #webrtc #音视频

于 2025-11-26 11:15:15 首次发布

wssocket.js，用于创建websocket，发送到后端信令服务器，并接收信令服务器转发过来的消息。

let closeCallBack = null;
let isConnect = false; //连接标识 避免重复连接
let rec = null;
let lastConnectTime = new Date(); // 最后一次连接时间
let socketTask = null;

// 生成随机ID
function generateUserId() {
	return Math.floor(Math.random() * 9000 + 1000).toString();
}

let connect = (wsurl, token) => {
	if (isConnect) {
		return;
	}
	lastConnectTime = new Date();
	socketTask = uni.connectSocket({
		url: wsurl,
		protocols: [token],
		success: (res) => {
			console.log("websocket连接成功");
		},
		fail: (e) => {
			console.log(e);
			console.log("websocket连接失败，10s后重连");
			setTimeout(() => {
				connect();
			}, 10000)
		}
	});

	socketTask.onOpen((res) => {
		isConnect = true;
		console.log('WebSocket 连接已建立');
	})

	socketTask.onMessage((res) => {
		console.log('收到 WebSocket 消息:', event.data);
		const message = JSON.parse(event.data);
		handleSignalingMessage(message);
	})

	socketTask.onClose((res) => {
		console.log('WebSocket 连接已关闭，3秒后重试');
		reconnect(wsurl, token)
	})

	socketTask.onError((e) => {
		console.log("ws错误:", e)
		close();
		isConnect = false;
		closeCallBack && closeCallBack({
			code: 1006
		});
	})
}

function handleSignalingMessage(message) {
	console.log('收到信令消息:', message);
	switch (message.type) {
		case 'call-invitation':
			console.log('收到通话邀请 from:', message.from);
			uni.navigateTo({
				url: "/subpages/videocallrev/videocallrev?currentCallId=" + message.from
			})
			break;
		case 'call-accepted':
			console.log('对方同意通话邀请 from:', message.from);
			uni.navigateTo({
				url: `/subpages/videocall/videocallh5?currentCallId=${message.from}&isCaller=true`
			})
			break;
		case 'call-rejected':
			console.log('对方拒绝通话邀请from:', message.from);
			handleCallRejected(message.from);
			break;
		case 'offer':
			uni.$emit('handleOffer', {
				fromId: message.from,
				data: message.data
			})
			break;
		case 'answer':
			uni.$emit('handleAnswer', {
				fromId: message.from,
				data: message.data
			})
			break;
		case 'ice':
			uni.$emit('handleIceCandidate', {
				fromId: message.from,
				data: message.data
			})
			break;
		case 'call-ended':
			uni.$emit('handleCallEnded', {
				fromId: message.from
			})
			break;
	}
}

//定义重连函数
let reconnect = (wsurl, accessToken) => {
	console.log("尝试重新连接");
	if (isConnect) {
		return;
	}
	// 延迟10秒重连  避免过多次过频繁请求重连
	let timeDiff = new Date().getTime() - lastConnectTime.getTime()
	let delay = timeDiff < 10000 ? 10000 - timeDiff : 0;
	rec && clearTimeout(rec);
	rec = setTimeout(function() {
		connect(wsurl, accessToken);
	}, delay);
};

//设置关闭连接
let close = (code) => {
	if (!isConnect) {
		return;
	}
	socketTask.close({
		code: code,
		complete: (res) => {
			console.log("关闭websocket连接");
			isConnect = false;
		},
		fail: (e) => {
			console.log("关闭websocket连接失败", e);
		}
	});
};

let sendMessage = (message) => {
	socketTask.send({
		data: JSON.stringify(message)
	})
}

// 将方法暴露出去
export {
	connect,
	reconnect,
	close,
	sendMessage
}

SignalingWebSocket.java，接收前端websocket连接，接收websocket的send方法传递的数据，解析数据后转发给接收方。

package org.jeecg.modules.webrtc;

import com.alibaba.fastjson.JSON;
import jakarta.websocket.*;
import jakarta.websocket.server.PathParam;
import jakarta.websocket.server.ServerEndpoint;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.locks.ReentrantLock;

@Slf4j
@Component
@ServerEndpoint("/signaling/{userId}")
public class SignalingWebSocket {

    // 存储所有在线用户的WebSocket会话
    private static final ConcurrentHashMap<String, Session> users = new ConcurrentHashMap<>();

    // 存储用户ID和名称的映射
    private static final ConcurrentHashMap<String, String> userNames = new ConcurrentHashMap<>();

    // 添加消息发送锁
    private static final ConcurrentHashMap<Session, ReentrantLock> sessionLocks = new ConcurrentHashMap<>();

    private String userId;


    @OnOpen
    public void onOpen(Session session, @PathParam(value = "userId") String userId) {
        users.put(userId,session);
        sessionLocks.put(session, new ReentrantLock());
        log.info("新的WebSocket连接: {}", session.getId());
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        try {
            WebRTCMessage webRTCMessage = JSON.parseObject(message, WebRTCMessage.class);
            log.info("收到消息 from: {}, to: {}, type: {}",
                    webRTCMessage.getFrom(),
                    webRTCMessage.getTo(),
                    webRTCMessage.getType());

            switch (webRTCMessage.getType()) {
                case "join":
                    handleJoin(webRTCMessage, session);
                    break;
                case "chat":
                    log.info("转发聊天消息: {} -> {}", webRTCMessage.getFrom(), webRTCMessage.getTo());
                    forwardMessage(webRTCMessage);
                    break;
                case "whiteboard":
                    log.info("转发白板数据: {} -> {}, action: {}",
                            webRTCMessage.getFrom(),
                            webRTCMessage.getTo(),
                            webRTCMessage.getAction());
                    forwardMessage(webRTCMessage);
                    break;
                case "call-invitation":
                case "call-accepted":
                case "call-rejected":
                case "offer":
                case "answer":
                case "ice":
                case "call-ended":
                    forwardMessage(webRTCMessage);
                    break;
                case "leave":
                    handleLeave(webRTCMessage);
                    break;
                default:
                    log.warn("未知的消息类型: {}", webRTCMessage.getType());
            }
        } catch (Exception e) {
            log.error("处理消息时发生错误: {}", message, e);
        }
    }

    @OnClose
    public void onClose(Session session) {
        if (userId != null) {
            users.remove(userId);
            userNames.remove(userId);
            // 通知其他用户该用户已离开
            broadcastUserList();
        }
        sessionLocks.remove(session);
        log.info("WebSocket连接关闭: {}", session.getId());
    }

    @OnError
    public void onError(Session session, Throwable error) {
        log.error("WebSocket错误", error);
    }

    private void handleJoin(WebRTCMessage message, Session session) {
        userId = message.getFrom();
        users.put(userId, session);
        userNames.put(userId, message.getName());

        log.info("用户加入: {}, 当前在线用户: {}", userId, userNames.keySet());

        // 发送当前在线用户列表给新用户
        sendUserList(session);
        // 广播新用户加入消息给其他用户
        broadcastUserList();
    }

    private void handleLeave(WebRTCMessage message) {
        String leavingUserId = message.getFrom();
        Session session = users.get(leavingUserId);
        if (session != null) {
            users.remove(leavingUserId);
            userNames.remove(leavingUserId);
            broadcastUserList();
        }
    }

    private void forwardMessage(WebRTCMessage message) {
        Session targetSession = users.get(message.getTo());
        if (targetSession != null && targetSession.isOpen()) {
            log.info("正在转发消息 type: {} from: {} to: {}",
                    message.getType(),
                    message.getFrom(),
                    message.getTo());
            sendMessageToSession(targetSession, message);
        } else {
            log.warn("目标用户不在线或会话已关闭: {}", message.getTo());
        }
    }

    private void sendUserList(Session session) {
        WebRTCMessage message = new WebRTCMessage();
        message.setType("users");
        message.setData(userNames);
        sendMessageToSession(session, message);
    }

    private void broadcastUserList() {
        WebRTCMessage message = new WebRTCMessage();
        message.setType("users");
        message.setData(userNames);

        users.values().forEach(session -> {
            sendMessageToSession(session, message);
        });
    }

    private void sendMessageToSession(Session session, WebRTCMessage message) {
        if (session == null || !session.isOpen()) {
            return;
        }

        ReentrantLock lock = sessionLocks.get(session);
        if (lock != null) {
            lock.lock();
            try {
                String messageJson = JSON.toJSONString(message);
                session.getBasicRemote().sendText(messageJson);
            } catch (IOException e) {
                log.error("发送消息失败", e);
            } finally {
                lock.unlock();
            }
        }
    }
}

sendvideocall.vue，呼叫方发起视频通话邀请。

<template>
	<view class="content">
		<image :src="getFile(friendInfo.headImage)" style="height: 100vh;" mode="heightFix"></image>
		<view class="ftbg">
			<view style="margin-top: 280rpx;">
				<u-avatar :src="getFile(friendInfo.headImage)" size="100" style="margin: 10rpx;"
					mode="square"></u-avatar>
			</view>
			<view style="margin-top: 10rpx;color: white;font-size: 28rpx;">
				{{ friendInfo.nickName }}
			</view>
			<view style="margin-top: 130rpx;color: white;">
				正在等待对方回应...
			</view>
		</view>

		<view
			style="position: fixed;bottom: 100rpx;left: 0rpx;width: 100%;display: flex;justify-content: center;align-items: center;">
			<image @click="cancel" src="/static/images/icon_guad.png"
				style="width: 120rpx;height: 120rpx;border-radius: 60rpx;" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
	} from 'vuex';

	export default {
		data() {
			return {
				id: '',
				mid: '',
				friend: "",
				currentCallId: '',
				userId: "",
			}
		},
		computed: {
			...mapGetters(['findFriend']),
			friendInfo() {
				return this.findFriend(this.currentCallId);
			},
		},
		onBackPress(options) {
			if (options.from && options.from == 'backbutton') {
				return true
			}
			return false
		},
		onLoad({
			currentCallId
		}) {
			this.currentCallId = currentCallId
			this.userId = this.$store.state.userInfo.id
			this.sendCallInvitation()
		},
		methods: {
			sendCallInvitation() {
				console.log('发送通话邀请给:', this.currentCallId);
				this.$socket.sendMessage({
					type: 'call-invitation',
					from: this.userId,
					to: this.currentCallId,
				});
			},

			cancel: async function() {
				this.$socket.sendMessage({
					type: 'call-ended',
					from: this.userId,
					to: this.currentCallId
				});
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to bottom, #666, #222);
	}

	.ftbg {
		width: 100%;
		height: 100vh;
		top: 0rpx;
		left: 0rpx;
		background: #00000099;
		backdrop-filter: blur(20px);
		position: fixed;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>

videocallrev.vue，接收方收到通话邀请后跳转的页面，在此页面可以同意或拒绝通话。

<template>
	<view class="content">
		<image :src="getFile(friendInfo.headImage)" style="height: 100vh;" mode="heightFix"></image>
		<view class="ftbg">
			<view style="margin-top: 280rpx;">
				<u-avatar :src="getFile(friendInfo.headImage)" size="100" style="margin: 10rpx;"
					mode="square"></u-avatar>
			</view>
			<view style="margin-top: 10rpx;color: white;font-size: 28rpx;">
				{{friendInfo.nickName}}
			</view>
			<view style="margin-top: 130rpx;color: white;">
				邀请你视频通话
			</view>
		</view>

		<view
			style="position: fixed;bottom: 100rpx;left: 0rpx;width: 100%;display: flex;justify-content: center;align-items: center;">
			<image @click="cancel" src="/static/images/icon_guad.png"
				style="width: 120rpx;height: 120rpx;border-radius: 60rpx;" mode=""></image>
			<image @click="agree" src="/static/images/icon_hup.png"
				style="width: 120rpx;height: 120rpx;border-radius: 60rpx;margin-left: 240rpx;" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';
 
	export default {
		data() {
			return {
				currentCallId: '',
				mid: '',
				message: ''
			}
		},
		computed: {
			...mapGetters(['findFriend']),
			friendInfo() {
				return this.findFriend(this.currentCallId);
			},
		},
		onBackPress(options) {
			if (options.from && options.from == 'backbutton') {
				return true
			}
			return false
		},
		onLoad({
			currentCallId
		}) {
			this.currentCallId = currentCallId
		},
		methods: {
			cancel: async function() {
				const ret = await this.$u.put(`chat/chat/videocall/refuse/${this.mid}`)
				pub("stopmusic", {})
				this.$store.commit(`common/setStatus`, "normal")
				uni.navigateBack()
			},
			agree: async function() {
				// #ifdef APP
				uni.redirectTo({
					url: `/subpages/videocall/videocall?currentCallId=${this.currentCallId}&&isCaller=false`
				})
				// #endif
				// #ifdef H5
				uni.redirectTo({
					url: `/subpages/videocall/videocallh5?currentCallId=${this.currentCallId}&&isCaller=false`
				})
				// #endif
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: linear-gradient(to bottom, #666, #222);
	}

	.ftbg {
		width: 100%;
		height: 100vh;
		top: 0rpx;
		left: 0rpx;
		background: #00000099;
		backdrop-filter: blur(20px);
		position: fixed;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>

videocallh5.vue，接收方同意通话邀请后，呼叫方和接收方都跳转的页面。

<template>
	<view class="content">
		<view style="" class="topvg">
			<view style="width: 100%;display: flex;justify-content: space-between;padding: 50rpx;">
				<view style="display: flex;align-items: center;">
					<view @click="changecamera" class="btnitem" style="">
						<image src="/static/images/qqhsxt.png" style="width: 60rpx;" mode="widthFix"></image>
					</view>
					<view @click="showself = !showself" class="btnitem" style="margin-left: 20rpx;">
						<image src="/static/images/sshow.png" style="width: 60rpx;" mode="widthFix"></image>
					</view>
					<view v-if="!uservddata.audio" class="btnitem" style="margin-left: 20rpx;">
						<image src="/static/images/dfab.png" style="width: 60rpx;" mode="widthFix"></image>
					</view>
				</view>
				<view style="font-size: 28rpx;color: #bec7df;">

				</view>
				<view style="width: 60rpx;">

				</view>
			</view>
		</view>
		<view v-show="showself"
			style="width: 240rpx;height: 400rpx; position: fixed;right: 40rpx;top: 130rpx;z-index: 101;border-radius: 16rpx;">
			<bgyx-video-item :uid="$store.state.userInfo.id" :name="$store.state.userInfo.realname" radius="16rpx"
				:id="`bgyx_video_1`" :src="myvddata.stream" status="play" :video="myvddata.video"
				:audio="myvddata.audio" :muted="true" />
		</view>
		<view style="width: 100%;display: flex;flex-wrap: wrap;flex: 1;overflow-y: hidden;">
			<bgyx-video-item :uid="id" :name="name" :id="`bgyx_video_0`" :src="uservddata.stream" status="play"
				:video="uservddata.video" :audio="uservddata.audio" />
		</view>

		<view style="" class="btmvg">
			<view style="display: flex;width: 100%;align-items: center;justify-content: center;margin-bottom: 60rpx;">
				<view @click="changeaudio(false)" v-if="myvddata.audio" class="btnitem" style="">
					<image src="/static/images/mmic.png" style="width: 60rpx;" mode="widthFix"></image>
				</view>
				<view @click="changeaudio(true)" v-if="!myvddata.audio" class="btnitem" style="background: #ff5e5e66;">
					<image src="/static/images/mmic.png" style="width: 60rpx;" mode="widthFix"></image>
				</view>

				<view @click="exit" class="btnitem"
					style="margin-left: 80rpx;background: #ff5e5e;width: 140rpx;height: 140rpx;">
					<image src="/static/images/hhdown.png" style="width: 70rpx;" mode="widthFix"></image>
				</view>

				<view @click="changevideo(false)" v-if="myvddata.video" class="btnitem" style="margin-left: 80rpx;">
					<image src="/static/images/ccamera.png" style="width: 60rpx;" mode="widthFix"></image>
				</view>
				<view @click="changevideo(true)" v-if="!myvddata.video" class="btnitem"
					style="margin-left: 80rpx;background: #ff5e5e66;">
					<image src="/static/images/ccamera.png" style="width: 60rpx;" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex';

	import BgyxVideoItem from '@/subpages/components/im/bgyx-video-item.vue'

	export default {
		components: {
			BgyxVideoItem
		},
		data() {
			return {
				id: '',
				name: '',
				src: '',
				showself: true,
				myvddata: '',
				uservddata: '',
				audio: true,
				video: true,
				isCaller: false,
				userId: "",
				currentCallId: "",
				peerConnection: null,
				configuration: {
					iceServers: [{
						urls: [
							'stun:stun.l.google.com:19302',
							'stun:stun1.l.google.com:19302'
						]
					}],
					iceTransportPolicy: 'all',
					bundlePolicy: 'max-bundle',
					rtcpMuxPolicy: 'require',
					iceCandidatePoolSize: 0
				}
			}
		},
		computed: {
			...mapGetters(['findFriend']),
			friendInfo() {
				return this.findFriend(this.currentCallId);
			},
		},
		onBackPress(options) {
			if (options.from && options.from == 'backbutton') {
				return true
			}
			return false
		},
		onLoad({
			currentCallId,
			isCaller
		}) {
			this.currentCallId = currentCallId
			this.userId = this.$store.state.userInfo.id
			this.isCaller = JSON.parse(isCaller)
			this.name = this.friendInfo.nickName
			if (this.isCaller) { //呼叫者
				this.publishStream({
					video: true,
					audio: true,
					videoType: 'face'
				})
			} else { //被呼叫者
				this.$socket.sendMessage({
					type: 'call-accepted',
					from: this.userId,
					to: this.currentCallId
				});
			}

			//被呼叫者接收offer
			uni.$on('handleOffer', (data) => {
				this.handleOffer(data.fromId, data.data)
			})

			//呼叫者接收被呼叫者创建的应答
			uni.$on('handleAnswer', (data) => {
				this.handleAnswer(data.fromId, data.data)
			})

			//双方交换ice
			uni.$on('handleIceCandidate', (data) => {
				this.handleIceCandidate(data.fromId, data.data)
			})

			uni.$on('handleCallEnded', (data) => {
				this.handleCallEnded(data.fromId)
			})
		},
		methods: {
			exit() {
				this.$socket.sendMessage({
					type: "call-ended",
					from: this.userId,
					to: this.currentCallId,
				})
				uni.navigateBack()
			},

			handleCallEnded(fromId) {
				console.log("对方结束了通话 from:", fromId)
				if (fromId == this.currentCallId) {
					uni.showToast({
						title: "对方结束了通话",
						icon: "none"
					})
				}
			},

			// 添加处理 answer 的函数
			async handleAnswer(fromId, answer) {
				console.log('收到应答 from:', fromId);
				const pc = this.peerConnection;
				if (pc) {
					await pc.setRemoteDescription(new RTCSessionDescription(answer));
				}
			},

			// 添加处理 ICE candidate 的函数
			async handleIceCandidate(fromId, candidate) {
				console.log('收到candidate from:', fromId);
				const pc = this.peerConnection;
				if (pc) {
					await pc.addIceCandidate(new RTCIceCandidate(candidate));
				}
			},
			// 修改 handleOffer 函数
			async handleOffer(fromId, offer) {
				console.log('收到offer from:', fromId);
				const pc = new RTCPeerConnection(this.configuration);
				this.peerConnection = pc
				const localStream = await this.getStreamLoc({
					audio: true,
					video: true,
				})
				localStream.getTracks().forEach(function(track) {
					pc.addTrack(track);
				});

				pc.onicecandidate = async (event) => {
					if (event.candidate) { // 移除 host 限制
						console.log('handleOffer发送 ICE 候选者:', event.candidate);
						this.$socket.sendMessage({
							type: 'ice',
							from: this.userId,
							to: fromId,
							data: event.candidate
						});
					}
				};

				let remoteStream = new MediaStream();
				pc.ontrack = function(event) {
					remoteStream.addTrack(event.track);
				};

				console.log('设置远程offer描述:', offer);
				await pc.setRemoteDescription(new RTCSessionDescription(offer));

				const answer = await pc.createAnswer();
				console.log('创建answer:', answer);

				await pc.setLocalDescription(answer);

				const mydata = {
					id: this.userId,
					pc,
					stream: localStream,
					audio: true,
					video: true,
				};
				this.myvddata = mydata

				const vdata = {
					id: this.currentCallId,
					pc,
					stream: remoteStream,
					audio: true,
					video: true,
				};
				this.uservddata = vdata

				this.$socket.sendMessage({
					type: 'answer',
					from: this.userId,
					to: fromId,
					data: answer
				});
			},

			async publishStream(options) {
				const pc = new RTCPeerConnection(this.configuration);
				this.peerConnection = pc
				const localStream = await this.getStreamLoc({
					audio: true,
					video: true,
				})
				localStream.getTracks().forEach(function(track) {
					pc.addTrack(track);
				});

				let remoteStream = new MediaStream();
				pc.ontrack = function(event) {
					remoteStream.addTrack(event.track);
				};

				let offer = await pc.createOffer();
				await pc.setLocalDescription(offer);
				console.log('创建offer:', offer);

				pc.onicecandidate = async (event) => {
					if (event.candidate) { // 移除 host 限制
						console.log('publishStream发送 ICE 候选者:', event.candidate);
						this.$socket.sendMessage({
							type: 'ice',
							from: this.userId,
							to: this.currentCallId,
							data: event.candidate
						});
					}
				};

				const myvdata = {
					id: this.userId,
					pc,
					stream: localStream,
					audio: true,
					video: true,
				};

				this.myvddata = myvdata

				const uvdata = {
					id: this.currentCallId,
					pc,
					stream: remoteStream,
					audio: true,
					video: true,
				};

				this.uservddata = uvdata

				this.$socket.sendMessage({
					type: 'offer',
					from: this.userId,
					to: this.currentCallId,
					data: offer
				});
			},

			getStreamLoc: async function(constraints) {
				if (navigator.mediaDevices.getUserMedia) {
					console.log('最新的标准API', navigator.mediaDevices.getUserMedia);
					const rs = await navigator.mediaDevices.getUserMedia(constraints)
					return rs
				} else if (navigator.webkitGetUserMedia) {
					console.log('webkit核心浏览器');
					const rs = await navigator.webkitGetUserMedia(constraints)
					return rs
				} else if (navigator.mozGetUserMedia) {
					console.log('firfox浏览器');
					const rs = await navigator.mozGetUserMedia(constraints);
					return rs
				} else if (navigator.getUserMedia) {
					console.log('旧版API');
					const rs = await navigator.getUserMedia(constraints);
					return rs
				} else {
					const rs = await navigator.mediaDevices.getUserMedia(constraints)
					return rs
				}
			},
		}
	}
</script>


<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
		justify-content: space-between;
		overflow-y: hidden;
	}

	.btmvg {
		width: 100%;
		display: flex;
		height: 40%;
		background: linear-gradient(to bottom, #33333300, #111111);
		position: fixed;
		left: 0rpx;
		bottom: 0rpx;
		color: white;
		align-items: flex-end;
	}

	.topvg {
		width: 100%;
		display: flex;
		height: 40%;
		background: linear-gradient(to bottom, #111111, #33333300);
		position: fixed;
		left: 0rpx;
		top: 0rpx;
		color: white;
		align-items: flex-start;
		z-index: 99;
	}

	.btnitem {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 160rpx;
		background: #cfcfcf55;
	}
</style>

效果展示：

一对一视频邀请：

一对一视频通话：

websocket+webRtc后端实现视频通话
ran0021的博客
03-17 1416
‌是一种实时通信技术，允许网络应用或站点在不借助中间媒介的情况下，建立浏览器之间的点对点（Peer-to-Peer）连接，实现视频流、音频流或其他任意数据的传输。：首先，在应用程序中使用WebSocket建立双向通信的连接。：在实际应用中，通常需要一个信令服务器来处理建立和管理WebRTC连接过程中的信令交换。：当WebSocket连接建立后，双方可以使用WebRTC来建立音视频通话的连接。：一旦建立了WebRTC连接，双方就可以通过PeerConnection来传输音视频数据流。
【亲测免费】 Java Spring Boot + Vue + WebSocket + WebRTC 实现视频通话
gitblog_09785的博客
09-06 1014
Java Spring Boot + Vue + WebSocket + WebRTC 实现视频通话 【下载地址】JavaSpringBootVueWebSocketWebRTC实现视频通话 本项目是一个基于Java的Spring Boot框架，结合Vue.js前端框架，利用WebSocket和WebRTC技术实现的视频...
记vue websocket+webRTC实现1v1视频通话
Kilie_z的博客
05-21 584
websocket+webRTC
SpringBoot+WebSocket+WebRTC实现视频通话
gitblog_09758的博客
10-15 1109
SpringBoot+WebSocket+WebRTC实现视频通话 去发现同类优质开源项目:https://gitcode.com/ 项目简介 本项目基于SpringBoot、WebSocket和WebRTC技术，实现了一个简单的视频通话功能。代码中的一些逻辑关系没有进行详细处理，主要是为了展示如何通过这些技术实现视频通话的基本功能。 功能描述 视频通话：用户可以通过浏览器进行实时视频通话。 W...
一小时教你用SpringBoot+WebSocket+WebRTC实现视频通话
热门推荐
坚持不懈的大白的博客
06-23 1万+
网上关于webrtc的文档(文章)和视频也挺多的，但是用SpringBoot结合WebRTC的却屈指可数，前一段时间小编我学习了一下WebRTC的相关知识，于是用SpringBoot+WebRTC实现了一个多人的线上自习室(有画面，但是没有声音的那种，开启声音也挺简单，在js代码里设置一下即可[运行结果在最后的总结里])。最近CSDN有活动，正好把前一段时间学习的知识运用起来(下述代码只是实现了，但是其中的逻辑是存在一定问题的，所以如果读者用下述代码，切记需要改动改动哈！)。既然是WebRTC，为什么又和W
WebSocket+WebRTC的点对点视频音频通信
Dein_Vater的博客
03-25 461
最近在学习视频音频流，于是从最简单的WebRTC开始，从github上获取了一个很少代码的demo，只实现最基本的视频音频通话。打开index.html在网页中，分别点击两个链接，然后点击发送方按钮，实现视频通信。工具：VSCode，需要插件open in browser ,node.js。2，选择虚拟机的可移动设备->Quanta HP HD Camera->连接。1，选择虚拟机设置中的USB控制器，USB兼容性选USB 3.1。node index.js启动端口。虚拟机：Ubuntu20.04。
springboot+websocket+webRTC在chrome上实现web视频通话
zhlzdjdj的博客
01-30 4150
websocket初略认识 websocket与http协议的区别与联系 1.http是无状态连接，服务器无法确定来自同一客户端的请求是同一个人发出的，且只能客户端主动访问服务端，websocket能够实现服务端主动访问客户端 2. http协议需要经过三次握手，websocket只需要一次 websocket基本实现 前端代码 var userid = Math.round(Math.random() * 1000) var socketUrl = "ws://127.0.0.1:8080/msgServ
Vue中webSocket+webRtc实现多人会议，webRtc实现
Amiel_Tian的博客
01-26 3323
已经搭建好`websocket`双端通信（可以先模拟），用于实时交换双方信息。交换的信息也就是所谓的信令。实现`webRtc`进行多人会议，屏幕共享、摄像头共享。
Spring Boot WebSocket + WebRTC 实现点对点视频通话功能Demo
MR.骑士道
02-11 8837
Spring Boot WebSocket + WenRTC 实现点对点视频通话功能Demo
基于websocket+webrtc实现音视频通话demo，下载即可用
03-02
基于Java WebSocket 做信令服务器，使用webrtc浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。从而实现音视频通话。下载启动 输入http://localhost 就可使用
java版本使用springboot vue websocket webrtc实现视频通话
02-22
在视频通话中，WebSocket至关重要，因为它可以实现实时的音视频数据传输，确保视频通话的流畅性。 4. **WebRTC**：WebRTC（Web Real-Time Communication）是浏览器之间的实时通信技术，无需插件或额外的软件即可...
FreeSWITCH Record
qq_27890899的博客
08-13 1817
FreeSWITCH学习记录，从部署到配置，从Java后端到H5前端，旨在实现一套企业级融合通信系统。
批量视频数据或高质量图片数据下载
最新发布
qq_43035475的博客
11-24 178
【代码】批量视频数据或高质量图片数据下载。
视频融合平台EasyCVR远程监控技术在沙尘暴交通监控中的应用
AI与流媒体视频技术
11-24 320
此外，灵活的部署方式和跨终端覆盖能力进一步提升了管理效率。
超越 VTM-RA！快手双向智能视频编码器BRHVC亮相NeurIPS2025
kuaishoutech的博客
11-24 457
快手音视频技术团队提出了全新的双向智能视频编码方法 —— BRHVC。该方法不仅在压缩性能上显著超越业内最先进的端到端智能视频编码方案，也成功超越最新标准的 VTM-RA 编码。 文章亮点： 从低时延模式到双向模式的扩展 创新的双向智能视频编码框架
2025年9月GESPC++三级真题解析（含视频）
weixin_46127956的博客
11-21 822
例如，2025 年 9 月 1 日是星期一，在输出九月的日历时，1 号的个位 1 就需要与星期一 MON 的最后一个字母 N 对齐。小 A 想知道，对于给定的数组 a，需要多少次操作才能使得 a 中的整数全部变成 0。你能帮他计算出答案吗？，int的最大值是2147483647，反转后就是7463847412，7要改为1否则int存储不了，即为1463847412。一行，一个正整数 m，表示需要按照格式输出 2025 年 m 月的日历。一行，一个正整数，表示 a 中整数全部变成 0 所需要的操作次数。
【音频】在Windows下使用VS2022编译PJSIP
郭老二
11-22 108
2）github。
【Python脚本系列】PyAudio+librosa+dtw库录制、识别音频并实现点击（四）
2401_82756020的博客
11-24 213
2.本例中的程序会识别系统所有音量，所以如果想单独识别某个应用的音量，可以把“系统音量的输出设备变为cable input(VB-Audio Virtual Cable)”的操作变为打开音量合成器，找到某个应用，然后把该应用的音量输出设备变为cable input(VB-Audio Virtual Cable)，如此其他应用的音量不会被识别到。1."A.wav", "B.wav", "C.wav"提前录制好的音频得放在脚本同一目录下。：将实时音频 MFCC 与模板音频 MFCC 做相似度匹配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值