WebSocket এর মাধ্যমে Signaling ইমপ্লিমেন্ট করা

Signaling Mechanism এবং Signaling সার্ভার - ওয়েবআরটিসি (WebRTC) - Web Development

294

WebRTC (Web Real-Time Communication) পিয়ার-টু-পিয়ার (P2P) যোগাযোগের জন্য ব্যবহৃত একটি প্রযুক্তি, যা ব্রাউজার থেকে ব্রাউজারে অডিও, ভিডিও এবং ডেটা শেয়ারিং সুবিধা প্রদান করে। WebRTC এর একটি গুরুত্বপূর্ণ অংশ হল signaling, যা পিয়ারগুলির মধ্যে সংযোগ স্থাপনের জন্য প্রয়োজনীয় তথ্য এক্সচেঞ্জের প্রক্রিয়া। তবে, WebRTC নিজে signaling এর জন্য কোনো নির্দিষ্ট প্রোটোকল নির্ধারণ করে না। এটি একটি অ্যাপ্লিকেশন লেভেল প্রক্রিয়া, এবং বিভিন্ন প্রযুক্তি দিয়ে signaling ইমপ্লেমেন্ট করা যায়।

একটি সাধারণ ও জনপ্রিয় পদ্ধতি হল WebSocket ব্যবহার করে signaling ইমপ্লেমেন্ট করা, কারণ WebSocket একটি ডুয়াল-ডিরেকশনাল কমিউনিকেশন চ্যানেল তৈরি করে যা রিয়েল-টাইম ডেটা এক্সচেঞ্জের জন্য উপযুক্ত।

এই টিউটোরিয়ালে WebSocket এর মাধ্যমে WebRTC signaling ইমপ্লেমেন্ট করার প্রক্রিয়া বিস্তারিতভাবে দেখানো হবে।


১. WebSocket সার্ভার তৈরি করা

WebSocket সার্ভারটি ক্লায়েন্টদের মধ্যে signaling তথ্য এক্সচেঞ্জ করতে ব্যবহৃত হবে। Node.js ব্যবহার করে WebSocket সার্ভার তৈরি করা সহজ। আমরা ws লাইব্রেরি ব্যবহার করবো যা WebSocket সার্ভার ও ক্লায়েন্টের জন্য সহজভাবে কাজ করতে পারে।

১.১. Node.js প্রজেক্ট সেটআপ

  1. প্রথমে একটি নতুন Node.js প্রজেক্ট তৈরি করুন:

    mkdir webrtc-signaling
    cd webrtc-signaling
    npm init -y
    
  2. প্রয়োজনীয় প্যাকেজ ইনস্টল করুন:

    npm install ws express
    
  3. এরপর একটি server.js ফাইল তৈরি করুন এবং এর মধ্যে নিচের কোড লিখুন:
const WebSocket = require('ws');
const express = require('express');
const app = express();
const http = require('http').Server(app);
const wss = new WebSocket.Server({ server: http });

// ওয়েবসকেট সার্ভারে কানেকশন হলে
wss.on('connection', (ws) => {
  console.log('A client connected');

  // যখন কোনো মেসেজ আসবে
  ws.on('message', (message) => {
    console.log('Received message: ', message);

    // সকল ক্লায়েন্টকে সেই মেসেজ পাঠানো
    wss.clients.forEach((client) => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  // ক্লায়েন্ট ডিসকানেক্ট হলে
  ws.on('close', () => {
    console.log('A client disconnected');
  });
});

// Express সার্ভার চালু করা
http.listen(8080, () => {
  console.log('Server running at http://localhost:8080');
});

এখানে, আমরা WebSocket সার্ভার তৈরি করেছি যা ক্লায়েন্টদের মধ্যে মেসেজ পাঠাবে এবং গ্রহণ করবে। সার্ভারটি ৮০৮০ পোর্টে চলবে।

১.২. সার্ভার চালু করা

এখন সার্ভার চালু করতে:

node server.js

এটি ws://localhost:8080 এর মাধ্যমে ক্লায়েন্টদের জন্য WebSocket কানেকশন ওপেন করবে।


২. WebRTC ক্লায়েন্ট সাইড

WebRTC ক্লায়েন্ট সাইডে, আমাদের একটি WebSocket কানেকশন তৈরি করতে হবে সার্ভারের সাথে যোগাযোগ করার জন্য এবং signaling বার্তা পাঠানোর জন্য। এটি করতে, নিচের কোড ব্যবহার করা যেতে পারে:

২.১. 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 Signaling with WebSocket</title>
</head>
<body>
    <h2>WebRTC Signaling with WebSocket</h2>
    <video id="localVideo" autoplay></video>
    <video id="remoteVideo" autoplay></video>
    <script src="script.js"></script>
</body>
</html>

২.২. JavaScript (signaling) কোড

এখন একটি script.js ফাইল তৈরি করুন এবং সেখানে WebSocket এবং WebRTC signaling কোড যোগ করুন:

// WebSocket সার্ভারের সাথে কানেকশন
const socket = new WebSocket('ws://localhost:8080');

// পিয়ার কানেকশন তৈরি
const peerConnection = new RTCPeerConnection();

// মিডিয়া স্ট্রিম সংযোগ
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');

// getUserMedia() ব্যবহার করে ভিডিও এবং অডিও স্ট্রিম সংগ্রহ
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then((stream) => {
    localVideo.srcObject = stream;

    // স্ট্রিম পিয়ার কানেকশনে যোগ করা
    stream.getTracks().forEach((track) => peerConnection.addTrack(track, stream));
  })
  .catch((error) => {
    console.error('Error accessing media devices.', error);
  });

// WebSocket এ মেসেজ পাঠানো
function sendMessage(message) {
  socket.send(JSON.stringify(message));
}

// WebSocket এর মাধ্যমে সিগনালিং মেসেজ রিসিভ
socket.onmessage = (event) => {
  const message = JSON.parse(event.data);

  if (message.offer) {
    // যদি offer মেসেজ আসে
    handleOffer(message.offer);
  } else if (message.answer) {
    // যদি answer মেসেজ আসে
    handleAnswer(message.answer);
  } else if (message.iceCandidate) {
    // যদি ICE candidate আসে
    handleNewICECandidate(message.iceCandidate);
  }
};

// পিয়ার কানেকশন সেটআপ করা
peerConnection.onicecandidate = (event) => {
  if (event.candidate) {
    sendMessage({ iceCandidate: event.candidate });
  }
};

peerConnection.ontrack = (event) => {
  remoteVideo.srcObject = event.streams[0];
};

// পিয়ার অফার তৈরি করা
function createOffer() {
  peerConnection.createOffer()
    .then((offer) => {
      return peerConnection.setLocalDescription(offer);
    })
    .then(() => {
      sendMessage({ 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(() => {
      sendMessage({ answer: peerConnection.localDescription });
    })
    .catch((error) => {
      console.error('Error handling offer:', error);
    });
}

// পিয়ার অ্যাংসার সেট করা
function handleAnswer(answer) {
  peerConnection.setRemoteDescription(new RTCSessionDescription(answer))
    .catch((error) => {
      console.error('Error setting remote description:', error);
    });
}

// নতুন ICE candidate রিসিভ করা
function handleNewICECandidate(candidate) {
  peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
    .catch((error) => {
      console.error('Error adding received ICE candidate:', error);
    });
}

এই কোডটি WebSocket এর মাধ্যমে signaling বার্তা পাঠায় এবং গ্রহণ করে। এর মধ্যে রয়েছে:

  1. getUserMedia: এটি ব্যবহারকারী থেকে মিডিয়া স্ট্রিম (অডিও এবং ভিডিও) সংগ্রহ করে।
  2. RTCPeerConnection: WebRTC এর পিয়ার-টু-পিয়ার কানেকশন তৈরি করে।
  3. WebSocket: signaling বার্তা সার্ভারে পাঠানো এবং গ্রহণ করা হয়।

২.৩. ক্লায়েন্ট এবং সার্ভার কানেকশন

WebSocket এবং WebRTC এর মাধ্যমে signaling শুরু করার জন্য, ক্লায়েন্টকে সার্ভারের সাথে কানেক্ট করতে হবে এবং পরবর্তী সময়ে offer, answer, এবং ICE candidate ইত্যাদি বার্তা আদান-প্রদান করতে হবে।


সারাংশ

WebRTC এর signaling অংশটি WebSocket এর মাধ্যমে সহজেই ইমপ্লেমেন্ট করা যায়। WebSocket একটি ডুয়াল-ডিরেকশনাল চ্যানেল সরবরাহ করে, যার মাধ্যমে পিয়ারগুলির মধ্যে offer, answer, এবং ICE candidate এর মতো সিগনালিং বার্তা দ্রুত এবং সুরক্ষিতভাবে আদান-প্রদান করা যায়। এই প্রক্রিয়া ক্লায়েন্ট সাইডে WebRTC API এবং WebSocket ব্যবহার করে সম্পন্ন করা হয়।

Content added By
Promotion

Are you sure to start over?

Loading...