এখন আমরা WebRTC ব্যবহার করে একটি সহজ পিয়ার-টু-পিয়ার (P2P) ভিডিও কলিং অ্যাপ্লিকেশন তৈরি করার প্রক্রিয়া আলোচনা করব। এই প্রজেক্টের মাধ্যমে আপনি শিখবেন কিভাবে ওয়েব ব্রাউজারে দুটি ইউজারের মধ্যে ভিডিও কল তৈরি করা যায়।
প্রয়োজনীয় উপকরণ
- Node.js এবং npm: সার্ভার এবং প্যাকেজ ম্যানেজমেন্টের জন্য।
- WebRTC API: পিয়ার-টু-পিয়ার কমিউনিকেশনের জন্য।
- ওয়েব ব্রাউজার: Chrome বা Firefox ব্যবহৃত হবে।
- কোড এডিটর: যেমন Visual Studio Code বা Sublime Text।
১. প্রথম WebRTC প্রজেক্ট তৈরি করা
১.১. প্রজেক্ট ফোল্ডার তৈরি করা
প্রথমে, আপনার প্রজেক্টের জন্য একটি ফোল্ডার তৈরি করুন:
mkdir webrtc-video-call
cd webrtc-video-call
১.২. একটি বেসিক Node.js সার্ভার তৈরি করা
এখন, Node.js ব্যবহার করে একটি বেসিক সার্ভার তৈরি করব যা WebRTC ক্লায়েন্টগুলিকে signaling সহায়তা প্রদান করবে।
- প্রথমে,
npm init -yকমান্ড দিয়ে একটিpackage.jsonফাইল তৈরি করুন। expressএবংwsপ্যাকেজ ইনস্টল করুন:
npm install express ws
- একটি নতুন ফাইল তৈরি করুন
server.jsনামে এবং এতে নিচের কোড লিখুন:
const express = require('express');
const WebSocket = require('ws');
const http = require('http');
const app = express();
const server = http.createServer(app);
const wss = new WebSocket.Server({ server });
app.use(express.static('public')); // ক্লায়েন্ট সাইড ফাইল সার্ভ করার জন্য
wss.on('connection', (ws) => {
console.log('New client connected');
ws.on('message', (message) => {
// যখন একটি মেসেজ পাওয়া যাবে, সেটি সকল ক্লায়েন্টে পাঠানো হবে
wss.clients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
server.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
এই কোডটি একটি WebSocket সার্ভার তৈরি করে, যা express এর মাধ্যমে ক্লায়েন্ট সাইড ফাইল সার্ভ করবে এবং WebSocket এর মাধ্যমে signaling সিস্টেম পরিচালনা করবে।
১.৩. ক্লায়েন্ট সাইড তৈরি করা
- public নামক একটি ফোল্ডার তৈরি করুন এবং তার মধ্যে একটি
index.htmlফাইল তৈরি করুন। index.htmlফাইলটি খুলে নিচের কোড লিখুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WebRTC Video Call</title>
</head>
<body>
<h2>WebRTC Video Call</h2>
<video id="localVideo" autoplay muted></video>
<video id="remoteVideo" autoplay></video>
<button id="startCall">Start Call</button>
<script>
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
const startCallButton = document.getElementById('startCall');
let localStream;
let remoteStream;
let peerConnection;
const signalingServer = new WebSocket('ws://localhost:3000');
// STUN সার্ভারের URL
const iceServers = {
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
};
signalingServer.onmessage = (message) => {
const data = JSON.parse(message.data);
switch (data.type) {
case 'offer':
handleOffer(data.offer);
break;
case 'answer':
handleAnswer(data.answer);
break;
case 'candidate':
handleCandidate(data.candidate);
break;
}
};
startCallButton.addEventListener('click', startCall);
async function startCall() {
// মিডিয়া ডিভাইস থেকে স্ট্রিম নেয়া
try {
localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
localVideo.srcObject = localStream;
createPeerConnection();
callPeer();
} catch (error) {
console.error('Error accessing media devices.', error);
}
}
function createPeerConnection() {
peerConnection = new RTCPeerConnection(iceServers);
peerConnection.addStream(localStream);
peerConnection.onaddstream = (event) => {
remoteVideo.srcObject = event.stream;
};
peerConnection.onicecandidate = (event) => {
if (event.candidate) {
signalingServer.send(JSON.stringify({
type: 'candidate',
candidate: event.candidate
}));
}
};
}
function callPeer() {
peerConnection.createOffer()
.then((offer) => {
return peerConnection.setLocalDescription(offer);
})
.then(() => {
signalingServer.send(JSON.stringify({
type: 'offer',
offer: peerConnection.localDescription
}));
})
.catch((error) => {
console.error('Error creating offer.', error);
});
}
function handleOffer(offer) {
peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
.then(() => {
return peerConnection.createAnswer();
})
.then((answer) => {
return peerConnection.setLocalDescription(answer);
})
.then(() => {
signalingServer.send(JSON.stringify({
type: 'answer',
answer: peerConnection.localDescription
}));
})
.catch((error) => {
console.error('Error handling offer.', error);
});
}
function handleAnswer(answer) {
peerConnection.setRemoteDescription(new RTCSessionDescription(answer))
.catch((error) => {
console.error('Error handling answer.', error);
});
}
function handleCandidate(candidate) {
peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
.catch((error) => {
console.error('Error adding ice candidate.', error);
});
}
</script>
</body>
</html>
এটি একটি সিম্পল HTML পৃষ্ঠা, যেখানে দুটি ভিডিও এলিমেন্ট থাকবে—একটি লোকাল ভিডিও এবং অন্যটি রিমোট ভিডিও। ইউজার যখন "Start Call" বাটনে ক্লিক করবে, তখন তাদের ক্যামেরা এবং মাইক্রোফোন থেকে মিডিয়া স্ট্রিম গ্রহণ করা হবে এবং পিয়ার-টু-পিয়ার ভিডিও কলিং শুরু হবে।
১.৪. সার্ভার চালু করা
এখন সব ফাইল তৈরি হয়ে গেলে, Node.js সার্ভার চালু করুন:
node server.js
এটি সার্ভার চালু করবে এবং আপনার প্রজেক্টটি http://localhost:3000 ঠিকানায় দেখতে পারবেন।
সারাংশ
এখন আপনার প্রথম WebRTC প্রজেক্ট তৈরি করা সম্পন্ন হয়েছে, যা দুটি ব্রাউজারের মধ্যে পিয়ার-টু-পিয়ার ভিডিও কল স্থাপন করতে সক্ষম। এই প্রজেক্টে আমরা একটি Node.js সার্ভার ব্যবহার করেছি যা WebSocket এর মাধ্যমে signaling মেসেজ আদান প্রদান করে এবং WebRTC API ব্যবহার করে ব্রাউজারগুলির মধ্যে ভিডিও কল স্থাপন করেছে।
এই প্রকল্পের মাধ্যমে আপনি WebRTC, signaling, এবং পিয়ার-টু-পিয়ার কানেকশন কিভাবে কাজ করে তা শিখতে পারবেন।
