WebRTC (Web Real-Time Communication) পিয়ার-টু-পিয়ার (P2P) যোগাযোগে ব্যবহৃত হলেও, পিয়ারদের মধ্যে সংযোগ স্থাপন এবং মিডিয়া ট্রান্সফার শুরু করার আগে কিছু অতিরিক্ত তথ্য বিনিময়ের প্রয়োজন হয়, যার জন্য signaling প্রক্রিয়া ব্যবহার করা হয়। WebRTC এর signaling প্রক্রিয়াটি মূলত দুটি পিয়ার (যারা ব্রাউজার বা ডিভাইস হতে পারে) একে অপরের সাথে যোগাযোগ স্থাপন করার জন্য একটি মধ্যস্থতা হিসেবে কাজ করে।
এখানে, WebRTC অ্যাপ্লিকেশন তৈরির জন্য WebSocket ব্যবহারের মাধ্যমে signaling সার্ভার ডিজাইন এবং বাস্তবায়ন করা হবে। WebSocket ব্যবহার করা হয় কারণ এটি একটি দুই-দিক্ সংযোগ (bi-directional connection) তৈরি করে, যা রিয়েল-টাইম, দ্রুত এবং কার্যকরী যোগাযোগ নিশ্চিত করে।
Signaling সার্ভারের ভূমিকা
WebRTC signaling সার্ভার মূলত নিম্নলিখিত কাজগুলি সম্পাদন করে:
- Session signaling: দুইটি পিয়ার একে অপরকে সনাক্ত করে এবং একটি কনফিগারেশন তৈরি করে (যেমন, offer/answer model, ICE candidates, etc.)।
- ICE candidate exchange: NAT traversal এর জন্য ICE candidates শেয়ার করে।
- Peer connection setup: পিয়ারদের মধ্যে RTCPeerConnection অবস্থা পরিচালনা করা।
Signaling সার্ভারটি WebRTC এর অংশ নয়, কিন্তু এটি প্রয়োজনীয় তথ্য আদান-প্রদান করে থাকে এবং পিয়ার-টু-পিয়ার সংযোগ তৈরি করতে সহায়তা করে।
WebRTC Signaling সার্ভার ডিজাইন
WebRTC signaling সার্ভার ডিজাইন করার জন্য আমরা WebSocket সার্ভার ব্যবহার করবো। WebSocket একটি প্রোটোকল যা ক্লায়েন্ট এবং সার্ভারের মধ্যে একটি স্থায়ী সংযোগ তৈরি করে, যেখানে দুই পক্ষই একে অপরকে ডেটা পাঠাতে পারে। এর মাধ্যমে আমরা signaling তথ্য, যেমন offer, answer এবং ICE candidates একে অপরের মধ্যে পাঠাতে পারব।
প্রয়োজনীয় উপকরণ:
- Node.js (JavaScript রানটাইম)
- WebSocket প্যাকেজ (যেমন
ws) - Express (অপশনাল, API বা HTTP সার্ভিসের জন্য)
- JavaScript (ক্লায়েন্ট সাইড কোডিংয়ের জন্য)
১. সার্ভার সাইড (Node.js + WebSocket)
প্রথমে WebSocket সার্ভার তৈরি করতে হবে যা signaling কাজগুলো পরিচালনা করবে। Node.js এর জন্য জনপ্রিয় WebSocket লাইব্রেরি হল ws। এটি খুবই সোজা এবং কার্যকরী।
১.১. WebSocket সার্ভার তৈরি
Node.js প্রজেক্ট তৈরি করুন: প্রথমে একটি Node.js প্রজেক্ট তৈরি করুন এবং প্রয়োজনীয় প্যাকেজ ইনস্টল করুন:
mkdir webrtc-signaling cd webrtc-signaling npm init -y npm install ws expressWebSocket সার্ভার কোড:
server.jsফাইল তৈরি করুন এবং নিম্নলিখিত কোড লিখুন:const WebSocket = require('ws'); const express = require('express'); const http = require('http'); const app = express(); const server = http.createServer(app); const wss = new WebSocket.Server({ server }); wss.on('connection', (ws) => { console.log('New client connected'); // Incoming message handling ws.on('message', (message) => { console.log('Received: %s', message); // Broadcast the message to all clients except the sender wss.clients.forEach((client) => { if (client !== ws && client.readyState === WebSocket.OPEN) { client.send(message); } }); }); // Handle client disconnection ws.on('close', () => { console.log('Client disconnected'); }); }); server.listen(3000, () => { console.log('Signaling server is running on http://localhost:3000'); });
এই কোডে:
- WebSocket.Server একটি সার্ভার তৈরি করেছে যা ক্লায়েন্টের সাথে যোগাযোগ করার জন্য অপেক্ষা করছে।
- যখন কোনো ক্লায়েন্ট সংযোগ স্থাপন করে, তখন
connectionইভেন্ট ট্রিগার হয় এবং একটি নতুনws(WebSocket) অবজেক্ট তৈরি হয়। - message ইভেন্টের মাধ্যমে সার্ভার ক্লায়েন্ট থেকে পাঠানো বার্তা গ্রহণ করে এবং সেটি অন্য ক্লায়েন্টদের কাছে পাঠায় (broadcast)।
- close ইভেন্ট ট্রিগার হলে ক্লায়েন্ট ডিসকানেক্ট হয়।
১.২. সার্ভার চালু করা
আপনি এই সার্ভারটি চালু করতে নিচের কমান্ডটি ব্যবহার করতে পারেন:
node server.js
এটি signaling সার্ভারটি http://localhost:3000 এ চালু করবে।
২. ক্লায়েন্ট সাইড (HTML + JavaScript)
এখন ক্লায়েন্ট সাইড তৈরি করতে হবে যাতে WebRTC API ব্যবহার করে signaling সার্ভারের সাথে যোগাযোগ করা যায়। এখানে WebSocket এর মাধ্যমে signaling তথ্য যেমন offer, answer এবং ICE candidates শেয়ার করা হবে।
২.১. HTML পেজ তৈরি
index.html নামে একটি HTML ফাইল তৈরি করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebRTC Signaling</title>
</head>
<body>
<h1>WebRTC Signaling Example</h1>
<button id="startBtn">Start Call</button>
<video id="localVideo" autoplay></video>
<video id="remoteVideo" autoplay></video>
<script src="app.js"></script>
</body>
</html>
২.২. JavaScript কোড (app.js)
app.js ফাইল তৈরি করুন যেখানে আমরা WebSocket এবং WebRTC কনফিগারেশন সেটআপ করবো:
// WebSocket connection to signaling server
const socket = new WebSocket('ws://localhost:3000');
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
let localStream;
let peerConnection;
let isCaller = false;
// Get user's media (camera and microphone)
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then((stream) => {
localStream = stream;
localVideo.srcObject = stream;
})
.catch((err) => console.error('Error accessing media devices:', err));
// WebSocket message handling
socket.onmessage = (message) => {
const data = JSON.parse(message.data);
if (data.offer) {
handleOffer(data.offer);
} else if (data.answer) {
handleAnswer(data.answer);
} else if (data.iceCandidate) {
handleNewICECandidate(data.iceCandidate);
}
};
// Start call
document.getElementById('startBtn').onclick = () => {
isCaller = true;
createPeerConnection();
socket.send(JSON.stringify({ offer: true }));
};
// Create a peer connection and send an offer
function createPeerConnection() {
peerConnection = new RTCPeerConnection();
localStream.getTracks().forEach((track) => peerConnection.addTrack(track, localStream));
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
socket.send(JSON.stringify({ iceCandidate: event.candidate }));
}
};
peerConnection.ontrack = (event) => {
remoteVideo.srcObject = event.streams[0];
};
peerConnection.createOffer()
.then((offer) => {
return peerConnection.setLocalDescription(offer);
})
.then(() => {
socket.send(JSON.stringify({ offer: peerConnection.localDescription }));
});
}
// Handle incoming offer
function handleOffer(offer) {
createPeerConnection();
peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
peerConnection.createAnswer()
.then((answer) => {
return peerConnection.setLocalDescription(answer);
})
.then(() => {
socket.send(JSON.stringify({ answer: peerConnection.localDescription }));
});
}
// Handle incoming answer
function handleAnswer(answer) {
peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
}
// Handle incoming ICE candidates
function handleNewICECandidate(candidate) {
peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
}
২.৩. ক্লায়েন্ট চালানো
এখন, আপনি index.html ফাইলটি ব্রাউজারে খুললে, WebRTC signaling সার্ভারটি ব্যবহার করে পিয়ার-টু-পিয়ার যোগাযোগ শুরু করতে পারবেন।
সারাংশ
WebRTC signaling সার্ভার ডিজাইন করতে, WebSocket ব্যবহার করা হয় যা দুইটি পিয়ারের মধ্যে সেশন ইনফরমেশন (offer, answer, ICE candidates) আদান-প্রদান করে। এই সার্ভারটি Node.js এর সাথে ws লাইব্রেরি ব্যবহার করে তৈরি করা হয়। ক্লায়েন্ট সাইডে WebRTC API
ব্যবহার করে, ভিডিও স্ট্রিম এবং সিগনালিং তথ্য পাঠানো এবং গ্রহণ করা হয়। WebSocket সার্ভার ক্লায়েন্টদের মধ্যে যোগাযোগ স্থাপন এবং P2P সংযোগ প্রতিষ্ঠা করার জন্য প্রয়োজনীয় সমস্ত তথ্য পাঠায়।
Read more