ভিডিও এবং অডিও স্ট্রিম হ্যান্ডলিং

WebRTC (Web Real-Time Communication) প্রযুক্তি ব্যবহার করে আপনি ওয়েব ব্রাউজার বা অ্যাপ্লিকেশন থেকে রিয়েল-টাইম অডিও এবং ভিডিও স্ট্রিমিং করতে পারেন। এটি পিয়ার-টু-পিয়ার (P2P) যোগাযোগের মাধ্যমে অডিও এবং ভিডিও স্ট্রিম হ্যান্ডলিংয়ের জন্য অত্যন্ত কার্যকর। এই প্রক্রিয়া WebRTC এর getUserMedia, RTCPeerConnection, এবং MediaStream API ব্যবহার করে সম্পন্ন করা হয়।

১. getUserMedia API দিয়ে ভিডিও ও অডিও স্ট্রিম সংগ্রহ

প্রথমে getUserMedia() API ব্যবহার করে ব্যবহারকারীর ক্যামেরা এবং মাইক্রোফোন থেকে স্ট্রিম সংগ্রহ করা হয়। এই API ব্যবহার করে আপনি ক্লায়েন্ট সাইডে ভিডিও এবং অডিও স্ট্রিম পেতে পারবেন।

ভিডিও এবং অডিও স্ট্রিম সংগ্রহের কোড

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then((stream) => {
    // স্ট্রিমটিকে ভিডিও এলিমেন্টে ডিসপ্লে করুন
    const video = document.querySelector('video');
    video.srcObject = stream;
  })
  .catch((error) => {
    console.error('Error accessing media devices:', error);
  });

এই কোডটি getUserMedia() ব্যবহার করে ব্যবহারকারীর ক্যামেরা এবং মাইক্রোফোন থেকে মিডিয়া স্ট্রিম সংগ্রহ করবে। সফল হলে, ভিডিও স্ট্রিমটি ওয়েব পেজে প্রদর্শন করবে।

• { video: true, audio: true } দিয়ে আপনি ভিডিও এবং অডিও উভয়ই অ্যাক্সেস করছেন।
• স্ট্রিম সংগ্রহের পরে, সেটি একটি <video> ট্যাগের srcObject হিসেবে সেট করা হয়েছে, যাতে ব্যবহারকারী স্ট্রিমটি দেখতে পারে।

২. RTCPeerConnection এবং স্ট্রিম পরিচালনা

RTCPeerConnection ব্যবহার করে পিয়ার-টু-পিয়ার (P2P) সংযোগ তৈরি করা হয় এবং addTrack() বা addStream() মেথড ব্যবহার করে স্ট্রিম একে অপরের মধ্যে শেয়ার করা হয়।

পিয়ার-টু-পিয়ার সংযোগ তৈরি ও স্ট্রিম শেয়ার করা

// স্ট্রিম যোগ করার জন্য RTCPeerConnection তৈরি
const peerConnection = new RTCPeerConnection();

// মিডিয়া স্ট্রিম সংগ্রহের পর সেটি পিয়ার কনেকশনে যোগ করুন
navigator.mediaDevices.getUserMedia({ video: true, audio: true })
  .then((stream) => {
    // পিয়ার কনেকশনে মিডিয়া স্ট্রিম যোগ করুন
    stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));

    // স্ট্রিমটিকে ভিডিও এলিমেন্টে ডিসপ্লে করুন
    const video = document.querySelector('video');
    video.srcObject = stream;
  })
  .catch((error) => {
    console.error('Error accessing media devices:', error);
  });

এই কোডে:

• RTCPeerConnection তৈরি করা হয়েছে এবং মিডিয়া স্ট্রিম পিয়ার কনেকশনে যোগ করা হয়েছে।
• addTrack() মেথড ব্যবহার করে স্ট্রিমের প্রতিটি ট্র্যাক (ভিডিও এবং অডিও) কনেকশনে যুক্ত করা হয়েছে।

৩. স্ট্রিম রিসিভ এবং ভিডিও ডিসপ্লে

এখন, অন্য পিয়ার (ক্লায়েন্ট) থেকে ভিডিও বা অডিও স্ট্রিম গ্রহণ করতে হবে। যখন পিয়ার-টু-পিয়ার সংযোগ তৈরি হয়ে যাবে, তখন সেই স্ট্রিমটি পাস করে ভিডিও এলিমেন্টে প্রদর্শন করা হয়।

স্ট্রিম রিসিভ করা

peerConnection.ontrack = (event) => {
  const remoteStream = event.streams[0];
  const video = document.querySelector('#remoteVideo');
  video.srcObject = remoteStream;
};

এখানে:

• ontrack ইভেন্টের মাধ্যমে আপনি অন্য পিয়ার থেকে আসা স্ট্রিমটি গ্রহণ করতে পারেন।
• event.streams[0] স্ট্রিমের প্রথম (এবং একমাত্র) ভ্যালু হিসেবে রিমোট স্ট্রিম পাওয়া যাবে।

৪. ভিডিও কনফারেন্সিং বা গ্রুপ কলের জন্য স্ট্রিম হ্যান্ডলিং

যখন একাধিক পিয়ার একে অপরের সাথে সংযুক্ত থাকে (যেমন ভিডিও কনফারেন্সিং), তখন প্রত্যেকটি পিয়ার তার নিজস্ব ভিডিও এবং অডিও স্ট্রিম একে অপরকে শেয়ার করে। এ ক্ষেত্রে, প্রতিটি পিয়ারকে নিজস্ব ভিডিও স্ট্রিম এবং রিমোট পিয়ারদের স্ট্রিম দেখানোর ব্যবস্থা করতে হবে।

একাধিক পিয়ার থেকে স্ট্রিম প্রদর্শন

// সমস্ত পিয়ার কনেকশন তৈরি এবং স্ট্রিম শেয়ার করা
let peerConnections = [];

function createConnection(peerId) {
  const peerConnection = new RTCPeerConnection();

  // পিয়ার স্ট্রিম সংগ্রহ
  navigator.mediaDevices.getUserMedia({ video: true, audio: true })
    .then((stream) => {
      stream.getTracks().forEach(track => peerConnection.addTrack(track, stream));

      // রিমোট স্ট্রিম দেখানোর জন্য ভিডিও এলিমেন্ট তৈরি
      const video = document.createElement('video');
      document.body.appendChild(video);
      video.srcObject = stream;
    });

  peerConnection.ontrack = (event) => {
    // রিমোট স্ট্রিম দেখানোর জন্য ভিডিও এলিমেন্ট তৈরি
    const remoteStream = event.streams[0];
    const video = document.createElement('video');
    document.body.appendChild(video);
    video.srcObject = remoteStream;
  };

  peerConnections.push(peerConnection);
}

এই কোডে:

• একাধিক পিয়ার কনেকশন তৈরি করা হচ্ছে এবং প্রত্যেক পিয়ারের স্ট্রিম শেয়ার করা হচ্ছে।
• ontrack ইভেন্টের মাধ্যমে অন্য পিয়ারদের স্ট্রিম গ্রহণ করা হচ্ছে এবং ভিডিও এলিমেন্টে প্রদর্শন করা হচ্ছে।

৫. স্ট্রিম সমন্বয় এবং কন্ট্রোল

WebRTC স্ট্রিম হ্যান্ডলিংয়ে কিছু অতিরিক্ত কার্যকরী ফিচার রয়েছে, যেমন স্ট্রিম মিউট করা বা ভলিউম কন্ট্রোল করা। এটি ব্যবহারকারীদের অডিও এবং ভিডিও স্ট্রিম কন্ট্রোল করতে সহায়তা করে।

অডিও বা ভিডিও মিউট করা

// ভিডিও মিউট করা
stream.getVideoTracks()[0].enabled = false;

// অডিও মিউট করা
stream.getAudioTracks()[0].enabled = false;

এখানে:

• getVideoTracks() এবং getAudioTracks() ব্যবহার করে স্ট্রিমের ভিডিও এবং অডিও ট্র্যাকগুলো পেতে পারবেন।
• enabled = false সেট করে ভিডিও বা অডিও মিউট করা যায়।

সারাংশ

WebRTC প্রযুক্তি ভিডিও এবং অডিও স্ট্রিম হ্যান্ডলিংয়ের জন্য শক্তিশালী এবং নমনীয় API সরবরাহ করে। getUserMedia() ব্যবহার করে স্ট্রিম সংগ্রহ করা হয়, RTCPeerConnection এর মাধ্যমে পিয়ার-টু-পিয়ার সংযোগ তৈরি করা হয়, এবং ontrack ইভেন্টের মাধ্যমে রিমোট স্ট্রিম গ্রহণ করা হয়। আপনি স্ট্রিম মিউট বা ভলিউম কন্ট্রোল করতে সক্ষম, এবং একাধিক পিয়ার থেকে স্ট্রিম একত্রিত করে ভিডিও কনফারেন্সিং বা গ্রুপ কল অ্যাপ্লিকেশন তৈরি করতে পারেন। WebRTC ভিডিও এবং অডিও স্ট্রিম হ্যান্ডলিং খুবই দক্ষ এবং ওয়েব অ্যাপ্লিকেশনগুলিতে রিয়েল-টাইম কমিউনিকেশন সক্ষম করে।