root/video_socket-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
stary
2026-04-29 15:18:30 +08:00
commit e47eee39ed
111 changed files with 44168 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
client/public/onebyone/connect/connect.html Normal file
View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VideoCall - 连接界面</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="../css/style.css">
</head>
<body class="h-screen w-screen flex flex-col text-white bg-grid relative">
<!-- 用户设置区域 -->
<div class="absolute top-4 right-4 z-10">
<button id="userSettingsBtn" class="flex items-center gap-2 glass px-3 py-2 rounded-full hover:bg-white/10 transition-colors">
<img id="userAvatar" src="/images/p1.png" class="w-8 h-8 rounded-full object-cover">
<span id="userName" class="text-sm font-medium">我</span>
<i class="fas fa-chevron-down text-xs text-gray-400"></i>
</button>
<!-- 设置菜单 -->
<div id="settingsMenu" class="hidden absolute top-full right-0 mt-2 glass rounded-xl shadow-lg w-48 z-20">
<div class="p-4 border-b border-white/10">
<h3 class="text-sm font-medium mb-2">个人设置</h3>
<div class="space-y-3">
<div>
<label class="block text-xs text-gray-400 mb-1">昵称</label>
<input type="text" id="nicknameInput" class="w-full bg-transparent border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="输入昵称">
</div>
<div>
<label class="block text-xs text-gray-400 mb-1">头像</label>
<div class="flex items-center gap-3">
<img id="avatarPreview" src="/images/p1.png" class="w-10 h-10 rounded-full object-cover">
<input type="file" id="avatarInput" accept="image/*" class="hidden" onchange="handleAvatarUpload(event)">
<button onclick="document.getElementById('avatarInput').click()" class="text-xs text-indigo-400 hover:text-indigo-300 transition-colors">更换头像</button>
</div>
</div>
<div>
<label class="block text-xs text-gray-400 mb-1">用户ID</label>
<div class="flex items-center gap-2">
<input type="text" id="userIdInput" class="w-full bg-transparent border border-white/20 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500" readonly>
<button onclick="copyUserId()" class="text-xs text-indigo-400 hover:text-indigo-300 transition-colors">复制</button>
</div>
</div>
</div>
</div>
<div class="p-2">
<button onclick="saveSettings()" class="w-full px-4 py-2 text-sm text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors">保存设置</button>
</div>
</div>
</div>
<!--
============================================================
初始连接界面
============================================================
-->
<div class="h-full w-full flex items-center justify-center bg-black/90">
<div class="text-center max-w-md px-8">
<div class="w-24 h-24 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-8 shadow-lg">
<i class="fas fa-video text-white text-4xl"></i>
</div>
<h1 class="text-3xl font-bold text-white mb-2">VideoCall</h1>
<p class="text-gray-400 mb-8">一对一视频通话</p>
<div class="space-y-4 mb-8">
<div class="glass rounded-xl p-4">
<label class="block text-sm font-medium text-gray-300 mb-2">连接ID</label>
<input type="text"
id="connectionIdInput"
placeholder="输入连接ID"
class="w-full bg-transparent border border-white/20 rounded-lg px-4 py-3 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"
autocomplete="off">
</div>
<p class="text-xs text-gray-500">
连接ID是用于建立点对点通话的唯一标识，由发起方生成并分享给接收方。
</p>
</div>
<div class="flex flex-col sm:flex-row gap-4 justify-center mb-6">
<button id="connectBtn" class="flex-1 px-6 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-xl transition-colors flex items-center justify-center gap-2">
<i class="fas fa-phone"></i>
<span>加入通话</span>
</button>
<button id="createCallBtn" class="flex-1 px-6 py-3 glass hover:bg-white/10 rounded-xl transition-colors flex items-center justify-center gap-2">
<i class="fas fa-plus"></i>
<span>创建通话</span>
</button>
</div>
<!-- 浏览全部ID按钮 -->
<button id="browseIdsBtn" class="w-full px-6 py-3 glass hover:bg-white/10 rounded-xl transition-colors flex items-center justify-center gap-2 mb-4">
<i class="fas fa-list"></i>
<span>浏览全部ID</span>
</button>
<!-- 连接ID列表 -->
<div id="connectionIdsList" class="glass rounded-xl p-4 mb-6 hidden">
<h3 class="text-sm font-medium text-gray-300 mb-2">可用的连接ID</h3>
<div id="idsContainer" class="max-h-40 overflow-y-auto space-y-2">
<!-- 连接ID将在这里动态生成 -->
</div>
</div>
</div>
</div>
<!-- 通知组件 -->
<div id="notification" class="fixed top-20 left-1/2 transform -translate-x-1/2 glass px-6 py-3 rounded-full flex items-center gap-3 opacity-0 pointer-events-none transition-all duration-300 z-50 translate-y-[-20px]">
<i class="fas fa-info-circle text-indigo-400"></i>
<span class="text-sm" id="notificationText">通知内容</span>
</div>
<!-- 引入模块化JavaScript文件 -->
<script type="module" src="connect.js"></script>
</body>
</html>

323
client/public/onebyone/connect/connect.js Normal file
View File

@@ -0,0 +1,323 @@
/**
* 连接界面逻辑
* 处理初始连接、创建通话和加入通话的功能
*/
import { showNotification } from '../utils.js';
const MAX_AVATAR_SIZE = 2 * 1024 * 1024; // 2MB
// 加入通话
function joinCall() {
const connectionId = document.getElementById('connectionIdInput').value.trim();
if (connectionId) {
showNotification(`正在加入通话 (${connectionId})`);
// 保存连接ID到本地存储
localStorage.setItem('connectionId', connectionId);
// 跳转到通话界面
window.location.href = '../index.html';
} else {
showNotification('请输入连接ID', 'error');
}
}
// 创建通话
function createCall() {
showNotification('正在创建通话...');
// 生成随机连接ID
const connectionId = 'conn_' + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
// 保存连接ID到本地存储
localStorage.setItem('connectionId', connectionId);
// 跳转到通话界面
window.location.href = '../index.html';
}
// 获取所有连接ID
async function getAllConnectionIds() {
showNotification('正在获取连接ID列表...');
try {
const response = await fetch('/signaling/connection-ids');
if (!response.ok) {
throw new Error('Failed to fetch connection IDs');
}
const data = await response.json();
displayConnectionIds(data.connectionIds);
} catch (error) {
console.error('Error fetching connection IDs:', error);
showNotification('获取连接ID失败', 'error');
}
}
// 显示连接ID列表
function displayConnectionIds(connectionIds) {
const idsContainer = document.getElementById('idsContainer');
const connectionIdsList = document.getElementById('connectionIdsList');
if (idsContainer) {
// 清空容器
idsContainer.innerHTML = '';
if (connectionIds.length === 0) {
idsContainer.innerHTML = '<p class="text-gray-500 text-sm">暂无可用的连接ID</p>';
} else {
// 为每个连接ID创建一个元素
connectionIds.forEach(id => {
const idElement = document.createElement('div');
idElement.className = 'flex items-center justify-between p-2 bg-white/5 rounded-lg hover:bg-white/10 cursor-pointer transition-colors';
idElement.innerHTML = `
<span class="text-sm">${id}</span>
<button class="text-xs bg-indigo-600 hover:bg-indigo-700 px-2 py-1 rounded" onclick="selectConnectionId('${id}')">选择</button>
`;
idsContainer.appendChild(idElement);
});
}
// 显示连接ID列表
if (connectionIdsList) {
connectionIdsList.classList.remove('hidden');
}
showNotification(`找到 ${connectionIds.length} 个连接ID`);
}
}
// 选择连接ID
function selectConnectionId(id) {
const connectionIdInput = document.getElementById('connectionIdInput');
if (connectionIdInput) {
connectionIdInput.value = id;
showNotification(`已选择连接ID: ${id}`);
}
}
// 绑定事件监听器
function bindEvents() {
// 连接按钮
const connectBtn = document.getElementById('connectBtn');
if (connectBtn) {
connectBtn.addEventListener('click', joinCall);
}
// 创建通话按钮
const createCallBtn = document.getElementById('createCallBtn');
if (createCallBtn) {
createCallBtn.addEventListener('click', createCall);
}
// 浏览全部ID按钮
const browseIdsBtn = document.getElementById('browseIdsBtn');
if (browseIdsBtn) {
browseIdsBtn.addEventListener('click', getAllConnectionIds);
}
// 输入框回车事件
const connectionIdInput = document.getElementById('connectionIdInput');
if (connectionIdInput) {
connectionIdInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
joinCall();
}
});
}
}
// 生成8位的用户ID
function generateUserId() {
// 生成8位随机字符串，包含字母和数字
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
let result = 'user_';
for (let i = 0; i < 8; i++) {
result += chars.charAt(Math.floor(Math.random() * chars.length));
}
return result;
}
// 加载用户设置
function loadUserSettings() {
const defaultAvatar = '/images/p1.png';
const userSettings = localStorage.getItem('userSettings');
if (userSettings) {
try {
const settings = JSON.parse(userSettings);
// 设置用户ID
if (settings.userId) {
document.getElementById('userIdInput').value = settings.userId;
}
// 设置昵称
if (settings.name) {
document.getElementById('nicknameInput').value = settings.name;
document.getElementById('userName').textContent = settings.name;
}
// 设置头像
const avatar = settings.avatar || defaultAvatar;
document.getElementById('userAvatar').src = avatar;
document.getElementById('avatarPreview').src = avatar;
} catch (error) {
console.error('Error loading user settings:', error);
// 加载失败时使用默认头像
const defaultAvatar = '/images/p1.png';
document.getElementById('userAvatar').src = defaultAvatar;
document.getElementById('avatarPreview').src = defaultAvatar;
}
} else {
// 生成新的用户ID
const newUserId = generateUserId();
document.getElementById('userIdInput').value = newUserId;
// 使用默认头像
const defaultAvatar = '/images/p1.png';
document.getElementById('userAvatar').src = defaultAvatar;
document.getElementById('avatarPreview').src = defaultAvatar;
// 保存默认设置
saveSettings();
}
}
// 保存用户设置
function saveSettings() {
const defaultAvatar = '/images/p1.png';
const settings = {
userId: document.getElementById('userIdInput').value,
name: document.getElementById('nicknameInput').value || '我',
avatar: document.getElementById('avatarPreview').src || defaultAvatar
};
localStorage.setItem('userSettings', JSON.stringify(settings));
// 更新界面显示
document.getElementById('userName').textContent = settings.name;
document.getElementById('userAvatar').src = settings.avatar;
showNotification('设置已保存', 'success');
}
// 处理头像上传
function handleAvatarUpload(event) {
const file = event.target.files[0];
if (file) {
// 检查文件类型
if (!file.type.startsWith('image/')) {
showNotification('请选择图片文件', 'error');
return;
}
// 检查文件大小
if (file.size > MAX_AVATAR_SIZE) { // 2MB限制
showNotification('图片大小不能超过2MB', 'error');
return;
}
// 创建FormData对象
const formData = new FormData();
formData.append('avatar', file);
formData.append('userId', document.getElementById('userIdInput').value);
// 显示上传中通知
showNotification('正在上传头像...');
// 上传头像到服务器
fetch('/api/upload/avatar', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('上传失败');
}
return response.json();
})
.then(data => {
if (data.success && data.avatarUrl) {
// 更新预览和本地存储
const avatarUrl = data.avatarUrl;
document.getElementById('avatarPreview').src = avatarUrl;
document.getElementById('userAvatar').src = avatarUrl;
// 保存设置
saveSettings();
showNotification('头像上传成功', 'success');
} else {
throw new Error('上传失败：' + (data.message || '未知错误'));
}
})
.catch(error => {
console.error('Error uploading avatar:', error);
showNotification('头像上传失败，请重试', 'error');
// 上传失败时，使用默认头像
const defaultAvatar = '/images/p1.png';
document.getElementById('avatarPreview').src = defaultAvatar;
});
}
}
// 复制用户ID到剪贴板
function copyUserId() {
const userIdInput = document.getElementById('userIdInput');
userIdInput.select();
document.execCommand('copy');
showNotification('用户ID已复制到剪贴板', 'success');
}
// 切换设置菜单
function toggleSettingsMenu() {
const settingsMenu = document.getElementById('settingsMenu');
settingsMenu.classList.toggle('hidden');
}
// 点击外部关闭设置菜单
document.addEventListener('click', function(event) {
const settingsMenu = document.getElementById('settingsMenu');
const userSettingsBtn = document.getElementById('userSettingsBtn');
if (!settingsMenu.contains(event.target) && !userSettingsBtn.contains(event.target)) {
settingsMenu.classList.add('hidden');
}
});
// 绑定用户设置相关事件
function bindUserSettingsEvents() {
// 设置按钮点击事件
const userSettingsBtn = document.getElementById('userSettingsBtn');
if (userSettingsBtn) {
userSettingsBtn.addEventListener('click', toggleSettingsMenu);
}
}
// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', () => {
bindEvents();
bindUserSettingsEvents();
// 检查本地存储中是否有连接ID
const savedConnectionId = localStorage.getItem('connectionId');
if (savedConnectionId) {
const connectionIdInput = document.getElementById('connectionIdInput');
if (connectionIdInput) {
connectionIdInput.value = savedConnectionId;
}
}
// 加载用户设置
loadUserSettings();
});
// 导出全局函数
window.joinCall = joinCall;
window.createCall = createCall;
window.selectConnectionId = selectConnectionId;
window.saveSettings = saveSettings;
window.handleAvatarUpload = handleAvatarUpload;
window.copyUserId = copyUserId;
window.toggleSettingsMenu = toggleSettingsMenu;