-comunicate-demo
This commit is contained in:
x2Skyz
553
comunicate-demo/index.html
Normal file
553
comunicate-demo/index.html
Normal file
@@ -0,0 +1,553 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>TTC Communication Client</title>
|
||||||
|
|
||||||
|
<!-- Tailwind CSS -->
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
|
||||||
|
<!-- Socket.io Client -->
|
||||||
|
<script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>
|
||||||
|
|
||||||
|
<!-- Icons -->
|
||||||
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
tailwind.config = {
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
colors: {
|
||||||
|
primary: '#4F46E5', // Indigo 600
|
||||||
|
secondary: '#10B981', // Emerald 500
|
||||||
|
danger: '#EF4444', // Red 500
|
||||||
|
dark: '#1F2937' // Gray 800
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
/* Custom Scrollbar */
|
||||||
|
::-webkit-scrollbar { width: 8px; }
|
||||||
|
::-webkit-scrollbar-track { background: #f1f1f1; }
|
||||||
|
::-webkit-scrollbar-thumb { background: #888; border-radius: 4px; }
|
||||||
|
::-webkit-scrollbar-thumb:hover { background: #555; }
|
||||||
|
|
||||||
|
.video-container {
|
||||||
|
transform: scaleX(-1); /* Mirror effect for self view */
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body class="bg-gray-100 min-h-screen text-gray-800 font-sans">
|
||||||
|
|
||||||
|
<!-- Navbar -->
|
||||||
|
<nav class="bg-white shadow-sm border-b border-gray-200 px-6 py-4 flex justify-between items-center">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="bg-primary text-white p-2 rounded-lg">
|
||||||
|
<i class="fa-solid fa-network-wired"></i>
|
||||||
|
</div>
|
||||||
|
<h1 class="font-bold text-xl text-gray-700">TTC Microservice <span class="text-xs font-normal bg-gray-200 px-2 py-0.5 rounded text-gray-500">Demo Client</span></h1>
|
||||||
|
</div>
|
||||||
|
<div id="connectionStatus" class="flex items-center gap-2 text-sm text-red-500 font-medium">
|
||||||
|
<div class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div>
|
||||||
|
Disconnected
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container mx-auto p-6 max-w-6xl grid grid-cols-1 lg:grid-cols-12 gap-6">
|
||||||
|
|
||||||
|
<!-- LEFT PANEL: Config & Notify -->
|
||||||
|
<div class="lg:col-span-4 space-y-6">
|
||||||
|
|
||||||
|
<!-- 1. Authentication -->
|
||||||
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
|
||||||
|
<h2 class="text-lg font-bold mb-4 flex items-center gap-2 text-gray-700">
|
||||||
|
<i class="fa-solid fa-key text-primary"></i> Authentication
|
||||||
|
</h2>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div>
|
||||||
|
<label class="text-xs font-semibold text-gray-500 uppercase">Server URL</label>
|
||||||
|
<!-- [FIX] เปลี่ยนค่าเริ่มต้นให้ว่างไว้ เดี๋ยว Script จะเติมให้เองตาม Context -->
|
||||||
|
<input type="text" id="serverUrl"
|
||||||
|
class="w-full mt-1 p-2 bg-gray-50 border border-gray-300 rounded focus:ring-2 focus:ring-primary focus:outline-none transition-all"
|
||||||
|
placeholder="Auto-detected..." value=" https://entrepreneur-faced-browsing-gateway.trycloudflare.com">
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label class="text-xs font-semibold text-gray-500 uppercase">JWT Token</label>
|
||||||
|
<textarea id="jwtToken" rows="2" class="w-full mt-1 p-2 bg-gray-50 border border-gray-300 rounded focus:ring-2 focus:ring-primary focus:outline-none text-xs font-mono" placeholder="Paste your Bearer token here..."></textarea>
|
||||||
|
</div>
|
||||||
|
<button id="btnConnect" class="w-full bg-primary hover:bg-indigo-700 text-white font-medium py-2 rounded transition-colors shadow-sm flex justify-center items-center gap-2">
|
||||||
|
<i class="fa-solid fa-link"></i> Connect Socket
|
||||||
|
</button>
|
||||||
|
<div id="userInfoDisplay" class="hidden mt-2 p-2 bg-indigo-50 text-indigo-700 text-xs rounded border border-indigo-100">
|
||||||
|
<!-- User info will show here -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 2. Notification System -->
|
||||||
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 flex flex-col h-[500px]">
|
||||||
|
<h2 class="text-lg font-bold mb-4 flex items-center gap-2 text-gray-700">
|
||||||
|
<i class="fa-solid fa-bell text-secondary"></i> Notification
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<!-- Notify Form -->
|
||||||
|
<div class="space-y-3 mb-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
|
||||||
|
<input type="text" id="notifyTargetId" class="w-full p-2 text-sm border border-gray-300 rounded" placeholder="Target User ID (seq)">
|
||||||
|
<input type="text" id="notifyTitle" class="w-full p-2 text-sm border border-gray-300 rounded" placeholder="Topic / Title">
|
||||||
|
<input type="text" id="notifyMessage" class="w-full p-2 text-sm border border-gray-300 rounded" placeholder="Message body...">
|
||||||
|
<button id="btnSendNotify" class="w-full bg-secondary hover:bg-emerald-600 text-white text-sm font-medium py-2 rounded transition-colors">
|
||||||
|
Send Realtime Notify
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Notify Logs -->
|
||||||
|
<div class="flex-1 overflow-y-auto space-y-2 pr-1" id="notifyLogs">
|
||||||
|
<div class="text-center text-gray-400 text-xs mt-10">No notifications yet</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- RIGHT PANEL: VoIP -->
|
||||||
|
<div class="lg:col-span-8">
|
||||||
|
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 h-full flex flex-col">
|
||||||
|
<h2 class="text-lg font-bold mb-4 flex items-center gap-2 text-gray-700 border-b pb-3">
|
||||||
|
<i class="fa-solid fa-video text-pink-500"></i> Video Conference / VoIP
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<!-- Control Bar -->
|
||||||
|
<div class="flex flex-wrap gap-3 mb-4 items-end bg-gray-50 p-3 rounded-lg">
|
||||||
|
<div class="flex-1">
|
||||||
|
<label class="text-xs font-semibold text-gray-500 uppercase">Call To (User ID)</label>
|
||||||
|
<div class="flex gap-2 mt-1">
|
||||||
|
<input type="text" id="callTargetId" class="flex-1 p-2 border border-gray-300 rounded focus:ring-2 focus:ring-pink-500 focus:outline-none" placeholder="User ID...">
|
||||||
|
<button id="btnCall" class="bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded shadow-sm flex items-center gap-2 transition-colors">
|
||||||
|
<i class="fa-solid fa-phone"></i> Call
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button id="btnHangup" class="hidden bg-red-500 hover:bg-red-600 text-white px-6 py-2 rounded shadow-sm flex items-center gap-2 transition-colors">
|
||||||
|
<i class="fa-solid fa-phone-slash"></i> Hangup
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Incoming Call Alert (Modal-ish) -->
|
||||||
|
<div id="incomingCallAlert" class="hidden mb-4 bg-yellow-50 border border-yellow-200 rounded-lg p-4 flex justify-between items-center shadow-sm animate-bounce">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<div class="bg-yellow-100 p-2 rounded-full text-yellow-600">
|
||||||
|
<i class="fa-solid fa-phone-volume fa-lg"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="font-bold text-gray-800">Incoming Call...</h3>
|
||||||
|
<p class="text-sm text-gray-500">From User: <span id="callerNameDisplay" class="font-mono text-black">Unknown</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<button id="btnAccept" class="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded shadow text-sm font-bold">
|
||||||
|
Accept
|
||||||
|
</button>
|
||||||
|
<button id="btnReject" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded shadow text-sm font-bold">
|
||||||
|
Reject
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Video Area -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 flex-1 min-h-[400px]">
|
||||||
|
<!-- Local -->
|
||||||
|
<div class="relative bg-gray-900 rounded-xl overflow-hidden shadow-inner group">
|
||||||
|
<video id="localVideo" autoplay playsinline muted class="w-full h-full object-cover video-container opacity-50"></video>
|
||||||
|
<div class="absolute bottom-4 left-4 text-white text-xs bg-black/50 px-2 py-1 rounded backdrop-blur-sm">
|
||||||
|
You (Local)
|
||||||
|
</div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center text-gray-500 group-hover:hidden" id="localPlaceholder">
|
||||||
|
<div class="text-center">
|
||||||
|
<i class="fa-solid fa-camera-slash fa-2x mb-2"></i>
|
||||||
|
<p class="text-xs">Camera Off</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Remote -->
|
||||||
|
<div class="relative bg-gray-900 rounded-xl overflow-hidden shadow-inner">
|
||||||
|
<video id="remoteVideo" autoplay playsinline class="w-full h-full object-cover"></video>
|
||||||
|
<div class="absolute bottom-4 left-4 text-white text-xs bg-black/50 px-2 py-1 rounded backdrop-blur-sm">
|
||||||
|
Remote User
|
||||||
|
</div>
|
||||||
|
<div class="absolute inset-0 flex items-center justify-center text-gray-600" id="remotePlaceholder">
|
||||||
|
<div class="text-center">
|
||||||
|
<i class="fa-solid fa-user-slash fa-2x mb-2"></i>
|
||||||
|
<p class="text-xs">Waiting for connection...</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- MAIN SCRIPT -->
|
||||||
|
<script type="module">
|
||||||
|
/** * TTC Client Logic
|
||||||
|
* Implements Socket.io & WebRTC Standard
|
||||||
|
*/
|
||||||
|
|
||||||
|
// --- State ---
|
||||||
|
let socket = null;
|
||||||
|
let myStream = null;
|
||||||
|
let peerConnection = null;
|
||||||
|
let incomingSignal = null; // Store offer temporarily
|
||||||
|
let activeCallUser = null;
|
||||||
|
let myUserId = null;
|
||||||
|
|
||||||
|
// --- Config ---
|
||||||
|
const rtcConfig = {
|
||||||
|
iceServers: [
|
||||||
|
{ urls: 'stun:stun.l.google.com:19302' },
|
||||||
|
// { urls: 'stun:global.stun.twilio.com:3478' }
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
// --- DOM Elements ---
|
||||||
|
const els = {
|
||||||
|
serverUrl: document.getElementById('serverUrl'),
|
||||||
|
jwtToken: document.getElementById('jwtToken'),
|
||||||
|
btnConnect: document.getElementById('btnConnect'),
|
||||||
|
status: document.getElementById('connectionStatus'),
|
||||||
|
userInfo: document.getElementById('userInfoDisplay'),
|
||||||
|
|
||||||
|
// Notify
|
||||||
|
notifyTarget: document.getElementById('notifyTargetId'),
|
||||||
|
notifyTitle: document.getElementById('notifyTitle'),
|
||||||
|
notifyMsg: document.getElementById('notifyMessage'),
|
||||||
|
btnSendNotify: document.getElementById('btnSendNotify'),
|
||||||
|
notifyLogs: document.getElementById('notifyLogs'),
|
||||||
|
|
||||||
|
// VoIP
|
||||||
|
callTarget: document.getElementById('callTargetId'),
|
||||||
|
btnCall: document.getElementById('btnCall'),
|
||||||
|
btnHangup: document.getElementById('btnHangup'),
|
||||||
|
incomingAlert: document.getElementById('incomingCallAlert'),
|
||||||
|
callerName: document.getElementById('callerNameDisplay'),
|
||||||
|
btnAccept: document.getElementById('btnAccept'),
|
||||||
|
btnReject: document.getElementById('btnReject'),
|
||||||
|
|
||||||
|
localVideo: document.getElementById('localVideo'),
|
||||||
|
remoteVideo: document.getElementById('remoteVideo'),
|
||||||
|
localPlace: document.getElementById('localPlaceholder'),
|
||||||
|
remotePlace: document.getElementById('remotePlaceholder'),
|
||||||
|
};
|
||||||
|
|
||||||
|
// [FIX] Auto-populate Server URL to avoid Mixed Content Error
|
||||||
|
// ถ้าเข้าผ่าน https (ngrok) มันจะใช้ https ตามอัตโนมัติ
|
||||||
|
// window.onload = () => {
|
||||||
|
// els.serverUrl.value = window.location.origin;
|
||||||
|
// };
|
||||||
|
|
||||||
|
// --- 1. Connection Logic ---
|
||||||
|
els.btnConnect.addEventListener('click', () => {
|
||||||
|
const url = els.serverUrl.value;
|
||||||
|
const token = els.jwtToken.value.trim();
|
||||||
|
|
||||||
|
//if (!token) return alert('Please enter a JWT Token');
|
||||||
|
|
||||||
|
// [FIX] Initialize Socket with Secure Options
|
||||||
|
// window.location.origin จะแก้ปัญหา Mixed Content เพราะมันจะใช้ protocol เดียวกับหน้าเว็บ
|
||||||
|
socket = io(url, {
|
||||||
|
auth: { token: token },
|
||||||
|
transports: ['websocket', 'polling'], // เพิ่ม polling เพื่อความชัวร์ในบาง network
|
||||||
|
secure: true, // Force secure connection
|
||||||
|
rejectUnauthorized: false // ยอมรับ Self-signed cert กรณีเทส local
|
||||||
|
});
|
||||||
|
|
||||||
|
// Handle Connection Events
|
||||||
|
socket.on('connect', () => {
|
||||||
|
updateStatus(true);
|
||||||
|
console.log('✅ Connected:', socket.id);
|
||||||
|
// Decode token roughly to show ID (Optional)
|
||||||
|
try {
|
||||||
|
const payload = JSON.parse(atob(token.split('.')[1]));
|
||||||
|
myUserId = payload.id;
|
||||||
|
els.userInfo.innerHTML = `Signed in as: <b>${payload.usrnam}</b> (ID: ${payload.id})`;
|
||||||
|
els.userInfo.classList.remove('hidden');
|
||||||
|
} catch(e) {}
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('disconnect', () => {
|
||||||
|
updateStatus(false);
|
||||||
|
console.log('❌ Disconnected');
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('connect_error', (err) => {
|
||||||
|
updateStatus(false);
|
||||||
|
console.error('Socket Error:', err);
|
||||||
|
alert('Connection Failed: ' + err.message + '\n(Check Mixed Content/CORS in Console)');
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- Register Listeners ---
|
||||||
|
setupNotificationListeners();
|
||||||
|
setupVoIPListeners();
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateStatus(isConnected) {
|
||||||
|
if(isConnected) {
|
||||||
|
els.status.innerHTML = `<div class="w-2 h-2 rounded-full bg-green-500"></div> Connected`;
|
||||||
|
els.status.className = "flex items-center gap-2 text-sm text-green-600 font-bold";
|
||||||
|
els.btnConnect.disabled = true;
|
||||||
|
els.btnConnect.innerText = "Connected";
|
||||||
|
els.btnConnect.classList.add('bg-gray-400', 'cursor-not-allowed');
|
||||||
|
} else {
|
||||||
|
els.status.innerHTML = `<div class="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div> Disconnected`;
|
||||||
|
els.status.className = "flex items-center gap-2 text-sm text-red-500 font-medium";
|
||||||
|
els.btnConnect.disabled = false;
|
||||||
|
els.btnConnect.innerText = "Connect Socket";
|
||||||
|
els.btnConnect.classList.remove('bg-gray-400', 'cursor-not-allowed');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 2. Notification Logic ---
|
||||||
|
function setupNotificationListeners() {
|
||||||
|
// Sending
|
||||||
|
els.btnSendNotify.addEventListener('click', () => {
|
||||||
|
if(!socket) return alert("Not connected");
|
||||||
|
|
||||||
|
const data = {
|
||||||
|
targetUserId: els.notifyTarget.value,
|
||||||
|
title: els.notifyTitle.value,
|
||||||
|
message: els.notifyMsg.value,
|
||||||
|
type: 'info'
|
||||||
|
};
|
||||||
|
|
||||||
|
socket.emit('send_notification', data);
|
||||||
|
addNotifyLog('outgoing', `To ${data.targetUserId}: ${data.title}`);
|
||||||
|
els.notifyMsg.value = '';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Receiving
|
||||||
|
socket.on('receive_notification', (data) => {
|
||||||
|
addNotifyLog('incoming', `From ${data.from}: ${data.title} - ${data.message}`);
|
||||||
|
// Play sound if needed
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function addNotifyLog(type, text) {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
const time = new Date().toLocaleTimeString('th-TH', { hour: '2-digit', minute:'2-digit'});
|
||||||
|
|
||||||
|
if(type === 'incoming') {
|
||||||
|
div.className = "bg-white border-l-4 border-secondary p-3 rounded shadow-sm text-sm";
|
||||||
|
div.innerHTML = `<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Incoming</span> <span>${time}</span></div>
|
||||||
|
<div class="text-gray-700">${text}</div>`;
|
||||||
|
} else {
|
||||||
|
div.className = "bg-gray-50 border-l-4 border-gray-300 p-3 rounded text-sm";
|
||||||
|
div.innerHTML = `<div class="flex justify-between text-xs text-gray-400 mb-1"><span>Sent</span> <span>${time}</span></div>
|
||||||
|
<div class="text-gray-600">${text}</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
els.notifyLogs.prepend(div);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- 3. VoIP / WebRTC Logic ---
|
||||||
|
async function getLocalStream() {
|
||||||
|
try {
|
||||||
|
// [FIX] ใช้ constraints แบบง่าย เพื่อลดโอกาสเกิด OverconstrainedError
|
||||||
|
const stream = await navigator.mediaDevices.getUserMedia({
|
||||||
|
video: true,
|
||||||
|
audio: { echoCancellation: true, noiseSuppression: true }
|
||||||
|
});
|
||||||
|
myStream = stream;
|
||||||
|
els.localVideo.srcObject = stream;
|
||||||
|
els.localVideo.classList.remove('opacity-50');
|
||||||
|
els.localPlace.classList.add('hidden');
|
||||||
|
return stream;
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Media Error:", err);
|
||||||
|
|
||||||
|
let msg = "Cannot access Camera/Microphone.";
|
||||||
|
if(location.protocol !== 'https:' && location.hostname !== 'localhost') {
|
||||||
|
msg += " (Browser requires HTTPS or Localhost)";
|
||||||
|
} else {
|
||||||
|
msg += " " + err.message;
|
||||||
|
}
|
||||||
|
|
||||||
|
alert(msg);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createPeerConnection(targetId) {
|
||||||
|
const pc = new RTCPeerConnection(rtcConfig);
|
||||||
|
|
||||||
|
// Add local tracks
|
||||||
|
if(myStream) {
|
||||||
|
myStream.getTracks().forEach(track => pc.addTrack(track, myStream));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Handle ICE Candidates
|
||||||
|
pc.onicecandidate = (event) => {
|
||||||
|
if (event.candidate) {
|
||||||
|
socket.emit('send_ice_candidate', {
|
||||||
|
targetUserId: targetId,
|
||||||
|
candidate: event.candidate
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Handle Remote Stream
|
||||||
|
pc.ontrack = (event) => {
|
||||||
|
const [remoteStream] = event.streams;
|
||||||
|
els.remoteVideo.srcObject = remoteStream;
|
||||||
|
els.remotePlace.classList.add('hidden');
|
||||||
|
};
|
||||||
|
|
||||||
|
// Connection State Changes
|
||||||
|
pc.onconnectionstatechange = () => {
|
||||||
|
console.log("Peer State:", pc.connectionState);
|
||||||
|
if(pc.connectionState === 'disconnected' || pc.connectionState === 'failed') {
|
||||||
|
hangupUI();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return pc;
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupVoIPListeners() {
|
||||||
|
|
||||||
|
// --- A. Caller Logic ---
|
||||||
|
els.btnCall.addEventListener('click', async () => {
|
||||||
|
const target = els.callTarget.value;
|
||||||
|
if(!target || !socket) return;
|
||||||
|
|
||||||
|
activeCallUser = target;
|
||||||
|
|
||||||
|
// 1. Get Media
|
||||||
|
const stream = await getLocalStream();
|
||||||
|
if (!stream) return; // Exit if media failed
|
||||||
|
|
||||||
|
// 2. Create PC
|
||||||
|
peerConnection = createPeerConnection(target);
|
||||||
|
|
||||||
|
// 3. Create Offer
|
||||||
|
const offer = await peerConnection.createOffer();
|
||||||
|
await peerConnection.setLocalDescription(offer);
|
||||||
|
|
||||||
|
// 4. Send Signal
|
||||||
|
socket.emit('call_user', {
|
||||||
|
userToCall: target,
|
||||||
|
signalData: offer
|
||||||
|
});
|
||||||
|
|
||||||
|
uiCallingState();
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- B. Callee Logic (Incoming) ---
|
||||||
|
socket.on('call_incoming', (data) => {
|
||||||
|
incomingSignal = data.signal;
|
||||||
|
activeCallUser = data.from; // Store who is calling
|
||||||
|
els.callerName.innerText = `ID: ${data.from}`;
|
||||||
|
|
||||||
|
els.incomingAlert.classList.remove('hidden');
|
||||||
|
});
|
||||||
|
|
||||||
|
els.btnAccept.addEventListener('click', async () => {
|
||||||
|
els.incomingAlert.classList.add('hidden');
|
||||||
|
|
||||||
|
// 1. Get Media
|
||||||
|
const stream = await getLocalStream();
|
||||||
|
if (!stream) return;
|
||||||
|
|
||||||
|
// 2. Create PC
|
||||||
|
peerConnection = createPeerConnection(activeCallUser);
|
||||||
|
|
||||||
|
// 3. Set Remote Desc (Offer)
|
||||||
|
await peerConnection.setRemoteDescription(incomingSignal);
|
||||||
|
|
||||||
|
// 4. Create Answer
|
||||||
|
const answer = await peerConnection.createAnswer();
|
||||||
|
await peerConnection.setLocalDescription(answer);
|
||||||
|
|
||||||
|
// 5. Send Answer
|
||||||
|
socket.emit('answer_call', {
|
||||||
|
to: activeCallUser,
|
||||||
|
signal: answer
|
||||||
|
});
|
||||||
|
|
||||||
|
uiConnectedState();
|
||||||
|
});
|
||||||
|
|
||||||
|
els.btnReject.addEventListener('click', () => {
|
||||||
|
els.incomingAlert.classList.add('hidden');
|
||||||
|
// Optional: Send reject signal
|
||||||
|
hangupUI();
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- C. Connection Establishment ---
|
||||||
|
socket.on('call_accepted', async (data) => {
|
||||||
|
// Caller receives Answer
|
||||||
|
await peerConnection.setRemoteDescription(data.signal);
|
||||||
|
uiConnectedState();
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('receive_ice_candidate', async (data) => {
|
||||||
|
if(peerConnection) {
|
||||||
|
try {
|
||||||
|
await peerConnection.addIceCandidate(data.candidate);
|
||||||
|
} catch(e) {
|
||||||
|
console.warn("ICE Error", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- D. Hangup ---
|
||||||
|
els.btnHangup.addEventListener('click', () => {
|
||||||
|
socket.emit('end_call', { targetUserId: activeCallUser });
|
||||||
|
hangupUI();
|
||||||
|
});
|
||||||
|
|
||||||
|
socket.on('call_ended', () => {
|
||||||
|
alert("Call Ended by remote user");
|
||||||
|
hangupUI();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- UI Helpers ---
|
||||||
|
function uiCallingState() {
|
||||||
|
els.btnCall.disabled = true;
|
||||||
|
els.btnCall.innerHTML = `<i class="fa-solid fa-spinner fa-spin"></i> Calling...`;
|
||||||
|
els.btnHangup.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
function uiConnectedState() {
|
||||||
|
els.btnCall.classList.add('hidden');
|
||||||
|
els.btnHangup.classList.remove('hidden');
|
||||||
|
els.incomingAlert.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
function hangupUI() {
|
||||||
|
if(peerConnection) peerConnection.close();
|
||||||
|
if(myStream) myStream.getTracks().forEach(t => t.stop());
|
||||||
|
|
||||||
|
peerConnection = null;
|
||||||
|
myStream = null;
|
||||||
|
activeCallUser = null;
|
||||||
|
incomingSignal = null;
|
||||||
|
|
||||||
|
els.localVideo.srcObject = null;
|
||||||
|
els.remoteVideo.srcObject = null;
|
||||||
|
els.localPlace.classList.remove('hidden');
|
||||||
|
els.remotePlace.classList.remove('hidden');
|
||||||
|
|
||||||
|
els.btnCall.disabled = false;
|
||||||
|
els.btnCall.classList.remove('hidden');
|
||||||
|
els.btnCall.innerHTML = `<i class="fa-solid fa-phone"></i> Call`;
|
||||||
|
els.btnHangup.classList.add('hidden');
|
||||||
|
els.incomingAlert.classList.add('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
26
comunicate-demo/index.js
Normal file
26
comunicate-demo/index.js
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
// 1. สร้างไฟล์นี้ในโฟลเดอร์เดียวกับ index.html
|
||||||
|
// 2. รันคำสั่ง: npm install express (ถ้ายังไม่มี)
|
||||||
|
// 3. สตาร์ทเซิร์ฟเวอร์: node server_frontend.js
|
||||||
|
|
||||||
|
const express = require('express');
|
||||||
|
const path = require('path');
|
||||||
|
const app = express();
|
||||||
|
const PORT = 80; // พอร์ตสำหรับหน้าเว็บ (แยกกับ API 1011)
|
||||||
|
|
||||||
|
// ให้บริการไฟล์ Static ในโฟลเดอร์ปัจจุบัน
|
||||||
|
app.use(express.static(path.join(__dirname)));
|
||||||
|
|
||||||
|
// Route หลักส่ง index.html
|
||||||
|
app.get('/', (req, res) => {
|
||||||
|
res.sendFile(path.join(__dirname, 'index.html'));
|
||||||
|
});
|
||||||
|
|
||||||
|
// สั่งให้ Listen ทุก IP ในเครื่อง (0.0.0.0)
|
||||||
|
app.listen(PORT, '0.0.0.0', () => {
|
||||||
|
console.log('---------------------------------------------------');
|
||||||
|
console.log(`🚀 Frontend Server running!`);
|
||||||
|
console.log(`🏠 Local: http://localhost:${PORT}`);
|
||||||
|
console.log(`📡 Network: http://<YOUR_IP_ADDRESS>:${PORT}`);
|
||||||
|
console.log('---------------------------------------------------');
|
||||||
|
console.log('To find your IP: Run "ipconfig" (Windows) or "ifconfig" (Mac/Linux)');
|
||||||
|
});
|
||||||
17
comunicate-demo/package.json
Normal file
17
comunicate-demo/package.json
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"name": "comunicate-demo",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"keywords": [],
|
||||||
|
"author": "",
|
||||||
|
"license": "ISC",
|
||||||
|
"type": "commonjs",
|
||||||
|
"dependencies": {
|
||||||
|
"express": "^5.1.0",
|
||||||
|
"path": "^0.12.7"
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user