এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

WebRTC এর সাথে রিয়েল টাইম যোগাযোগ

1. ভূমিকা

WebRTC হল একটি ওপেন সোর্স প্রজেক্ট যা ওয়েব এবং নেটিভ অ্যাপে অডিও, ভিডিও এবং ডেটার রিয়েলটাইম যোগাযোগ সক্ষম করে।

WebRTC-এর একাধিক JavaScript API আছে — ডেমো দেখতে লিঙ্কে ক্লিক করুন।

getUserMedia() : অডিও এবং ভিডিও ক্যাপচার করুন।
MediaRecorder : অডিও এবং ভিডিও রেকর্ড করুন।
RTCPeerConnection : ব্যবহারকারীদের মধ্যে অডিও এবং ভিডিও স্ট্রিম করুন।
RTCDataChannel : ব্যবহারকারীদের মধ্যে ডেটা স্ট্রিম করুন।

আমি কোথায় WebRTC ব্যবহার করতে পারি?

ফায়ারফক্স, অপেরা এবং ডেস্কটপ এবং অ্যান্ড্রয়েডে ক্রোমে। WebRTC iOS এবং Android-এ নেটিভ অ্যাপের জন্যও উপলব্ধ।

সংকেত কি?

WebRTC ব্রাউজারগুলির মধ্যে স্ট্রিমিং ডেটা যোগাযোগের জন্য RTCPeerConnection ব্যবহার করে, তবে যোগাযোগের সমন্বয় করতে এবং নিয়ন্ত্রণ বার্তা পাঠানোর জন্য একটি পদ্ধতির প্রয়োজন, একটি প্রক্রিয়া যা সিগন্যালিং নামে পরিচিত। সিগন্যালিং পদ্ধতি এবং প্রোটোকল WebRTC দ্বারা নির্দিষ্ট করা হয় না। এই কোডল্যাবে আপনি বার্তা পাঠানোর জন্য Socket.IO ব্যবহার করবেন, তবে অনেক বিকল্প রয়েছে।

STUN এবং টার্ন কি?

WebRTC পিয়ার-টু-পিয়ার কাজ করার জন্য ডিজাইন করা হয়েছে, যাতে ব্যবহারকারীরা সম্ভাব্য সর্বাধিক সরাসরি রুটে সংযোগ করতে পারেন। যাইহোক, WebRTC বাস্তব-বিশ্বের নেটওয়ার্কিং-এর সাথে মানিয়ে নিতে তৈরি করা হয়েছে: ক্লায়েন্ট অ্যাপ্লিকেশনগুলিকে NAT গেটওয়ে এবং ফায়ারওয়ালগুলি অতিক্রম করতে হবে এবং সরাসরি সংযোগ ব্যর্থ হলে পিয়ার টু পিয়ার নেটওয়ার্কিং এর ফলব্যাক প্রয়োজন। এই প্রক্রিয়ার অংশ হিসাবে, WebRTC APIগুলি আপনার কম্পিউটারের IP ঠিকানা পেতে STUN সার্ভার ব্যবহার করে এবং পিয়ার-টু-পিয়ার যোগাযোগ ব্যর্থ হলে রিলে সার্ভার হিসাবে কাজ করার জন্য সার্ভারগুলিকে টার্ন করে৷ ( বাস্তব জগতে WebRTC আরও বিস্তারিতভাবে ব্যাখ্যা করে।)

WebRTC নিরাপদ?

সমস্ত WebRTC উপাদানগুলির জন্য এনক্রিপশন বাধ্যতামূলক, এবং এর JavaScript APIগুলি শুধুমাত্র সুরক্ষিত উত্স (HTTPS বা লোকালহোস্ট) থেকে ব্যবহার করা যেতে পারে৷ সিগন্যালিং মেকানিজম WebRTC স্ট্যান্ডার্ড দ্বারা সংজ্ঞায়িত করা হয় না, তাই নিরাপদ প্রোটোকল ব্যবহার করার বিষয়টি আপনার উপর নির্ভর করে।

2. ওভারভিউ

ভিডিও পেতে একটি অ্যাপ তৈরি করুন এবং আপনার ওয়েবক্যাম দিয়ে স্ন্যাপশট নিন এবং WebRTC এর মাধ্যমে পিয়ার-টু-পিয়ার শেয়ার করুন। পথ ধরে আপনি শিখবেন কিভাবে মূল WebRTC API ব্যবহার করতে হয় এবং Node.js ব্যবহার করে একটি মেসেজিং সার্ভার সেট আপ করতে হয়।

আপনি কি শিখবেন

আপনার ওয়েবক্যাম থেকে ভিডিও পান
RTCPeerConnection দিয়ে ভিডিও স্ট্রিম করুন
RTCDataChannel দিয়ে ডেটা স্ট্রিম করুন
বার্তা বিনিময় করতে একটি সংকেত পরিষেবা সেট আপ করুন৷
পিয়ার কানেকশন এবং সিগন্যালিং একত্রিত করুন
একটি ফটো তুলুন এবং একটি ডেটা চ্যানেলের মাধ্যমে শেয়ার করুন৷

আপনি কি প্রয়োজন হবে

Chrome 47 বা তার বেশি
ক্রোমের জন্য ওয়েব সার্ভার , অথবা আপনার নিজের পছন্দের ওয়েব সার্ভার ব্যবহার করুন।
নমুনা কোড
একজন টেক্সট এডিটর
HTML, CSS এবং JavaScript এর প্রাথমিক জ্ঞান

3. নমুনা কোড পান

কোডটি ডাউনলোড করুন

আপনি যদি গিটের সাথে পরিচিত হন তবে আপনি ক্লোন করে গিটহাব থেকে এই কোডল্যাবের কোডটি ডাউনলোড করতে পারেন:

git clone https://github.com/googlecodelabs/webrtc-web

বিকল্পভাবে, কোডের একটি .zip ফাইল ডাউনলোড করতে নিম্নলিখিত বোতামে ক্লিক করুন:

ডাউনলোড করা জিপ ফাইলটি খুলুন। এটি একটি প্রোজেক্ট ফোল্ডার ( অ্যাডাপ্টিভ-ওয়েব-মিডিয়া ) আনপ্যাক করবে যাতে এই কোডল্যাবের প্রতিটি ধাপের জন্য একটি ফোল্ডার রয়েছে, সাথে আপনার প্রয়োজনীয় সমস্ত সংস্থান রয়েছে।

আপনি কাজ নামের ডিরেক্টরিতে আপনার সমস্ত কোডিং কাজ করবেন।

ধাপ-এনন ফোল্ডারে এই কোডল্যাবের প্রতিটি ধাপের জন্য একটি সমাপ্ত সংস্করণ রয়েছে। তারা রেফারেন্স জন্য আছে.

ওয়েব সার্ভার ইনস্টল করুন এবং যাচাই করুন

আপনি আপনার নিজস্ব ওয়েব সার্ভার ব্যবহার করার জন্য বিনামূল্যে, এই কোডল্যাবটি Chrome ওয়েব সার্ভারের সাথে ভালভাবে কাজ করার জন্য ডিজাইন করা হয়েছে৷ আপনি যদি এখনও সেই অ্যাপটি ইনস্টল না করে থাকেন, তাহলে আপনি Chrome ওয়েব স্টোর থেকে এটি ইনস্টল করতে পারেন।

ক্রোম অ্যাপের জন্য ওয়েব সার্ভার ইনস্টল করার পরে, বুকমার্ক বার, একটি নতুন ট্যাব পৃষ্ঠা বা অ্যাপ লঞ্চার থেকে Chrome অ্যাপস শর্টকাটে ক্লিক করুন:

ওয়েব সার্ভার আইকনে ক্লিক করুন:

এর পরে, আপনি এই ডায়ালগটি দেখতে পাবেন, যা আপনাকে আপনার স্থানীয় ওয়েব সার্ভার কনফিগার করতে দেয়:

স্ক্রীন শট 2016-02-18 11.48.14 AM.png

CHOOSE FOLDER বোতামে ক্লিক করুন এবং আপনার তৈরি করা কাজের ফোল্ডারটি নির্বাচন করুন। এটি আপনাকে ওয়েব সার্ভার URL(গুলি) বিভাগে ওয়েব সার্ভার ডায়ালগে হাইলাইট করা URL-এর মাধ্যমে Chrome-এ আপনার প্রগতিশীল কাজ দেখতে সক্ষম করবে৷

বিকল্পগুলির অধীনে, নীচে দেখানো হিসাবে স্বয়ংক্রিয়ভাবে index.html দেখান এর পাশের বাক্সটি চেক করুন:

স্ক্রীন শট 2016-02-18 11.56.30 AM.png

তারপরে ওয়েব সার্ভার লেবেলযুক্ত টগলটি স্লাইড করে সার্ভারটিকে থামুন এবং পুনরায় চালু করুন: বাম দিকে STARTED এবং তারপরে ডানদিকে ফিরে যান৷

স্ক্রীন শট 2016-02-18 12.22.18 PM.png

এখন হাইলাইট করা ওয়েব সার্ভার URL-এ ক্লিক করে আপনার ওয়েব ব্রাউজারে আপনার কাজের সাইটে যান। আপনার এমন একটি পৃষ্ঠা দেখা উচিত যা work/index.html এর সাথে মিলে যায়:

স্পষ্টতই, এই অ্যাপটি এখনও আকর্ষণীয় কিছু করছে না — এখন পর্যন্ত, এটি একটি ন্যূনতম কঙ্কাল যা আমরা আপনার ওয়েব সার্ভার সঠিকভাবে কাজ করছে তা নিশ্চিত করতে ব্যবহার করছি। আপনি পরবর্তী ধাপে কার্যকারিতা এবং লেআউট বৈশিষ্ট্য যোগ করবেন।

4. আপনার ওয়েবক্যাম থেকে ভিডিও স্ট্রিম করুন

আপনি কি শিখবেন

এই ধাপে আপনি কীভাবে করবেন তা জানতে পারবেন:

আপনার ওয়েবক্যাম থেকে একটি ভিডিও স্ট্রিম পান।
স্ট্রিম প্লেব্যাক ম্যানিপুলেট করুন।
ভিডিও ম্যানিপুলেট করতে CSS এবং SVG ব্যবহার করুন।

এই ধাপের একটি সম্পূর্ণ সংস্করণ ধাপ-01 ফোল্ডারে রয়েছে।

HTML এর একটি ড্যাশ...

আপনার কাজের ডিরেক্টরিতে index.html এ একটি video উপাদান এবং একটি script উপাদান যোগ করুন:

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <video autoplay playsinline></video>

  <script src="js/main.js"></script>

</body>

</html>

...এবং জাভাস্ক্রিপ্টের এক চিমটি

আপনার js ফোল্ডারে main.js এ নিম্নলিখিত যোগ করুন:

'use strict';

// On this codelab, you will be streaming only video (video: true).
const mediaStreamConstraints = {
  video: true,
};

// Video element where stream will be placed.
const localVideo = document.querySelector('video');

// Local stream that will be reproduced on the video.
let localStream;

// Handles success by adding the MediaStream to the video element.
function gotLocalMediaStream(mediaStream) {
  localStream = mediaStream;
  localVideo.srcObject = mediaStream;
}

// Handles error by logging a message to the console with the error message.
function handleLocalMediaStreamError(error) {
  console.log('navigator.getUserMedia error: ', error);
}

// Initializes media stream.
navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
  .then(gotLocalMediaStream).catch(handleLocalMediaStreamError);

চেষ্টা করে দেখুন

আপনার ব্রাউজারে index.html খুলুন এবং আপনি এরকম কিছু দেখতে পাবেন (অবশ্যই আপনার ওয়েবক্যাম থেকে ভিউ বৈশিষ্ট্যযুক্ত!):

এটা কিভাবে কাজ করে

getUserMedia() কলের পর, ব্রাউজার তাদের ক্যামেরা অ্যাক্সেস করার জন্য ব্যবহারকারীর কাছ থেকে অনুমতির অনুরোধ করে (যদি বর্তমান উৎসের জন্য এই প্রথম ক্যামেরা অ্যাক্সেসের অনুরোধ করা হয়)। সফল হলে, একটি MediaStream ফেরত দেওয়া হয়, যা srcObject বৈশিষ্ট্যের মাধ্যমে একটি মিডিয়া উপাদান দ্বারা ব্যবহার করা যেতে পারে:

navigator.mediaDevices.getUserMedia(mediaStreamConstraints)
  .then(gotLocalMediaStream).catch(handleLocalMediaStreamError);


}

function gotLocalMediaStream(mediaStream) {
  localVideo.srcObject = mediaStream;
}

constraints যুক্তি আপনাকে কোন মিডিয়া পেতে হবে তা নির্দিষ্ট করতে দেয়। এই উদাহরণে, শুধুমাত্র ভিডিও, যেহেতু অডিও ডিফল্টরূপে অক্ষম করা হয়:

const mediaStreamConstraints = {
  video: true,
};

আপনি ভিডিও রেজোলিউশনের মতো অতিরিক্ত প্রয়োজনীয়তার জন্য সীমাবদ্ধতা ব্যবহার করতে পারেন:

const hdConstraints = {
  video: {
    width: {
      min: 1280
    },
    height: {
      min: 720
    }
  }
}

MediaTrackConstraints স্পেসিফিকেশন সমস্ত সম্ভাব্য সীমাবদ্ধতার ধরন তালিকাভুক্ত করে, যদিও সমস্ত বিকল্প সমস্ত ব্রাউজার দ্বারা সমর্থিত নয়। যদি অনুরোধ করা রেজোলিউশনটি বর্তমানে নির্বাচিত ক্যামেরা দ্বারা সমর্থিত না হয়, getUserMedia() একটি OverconstrainedError সহ প্রত্যাখ্যান করা হবে এবং ব্যবহারকারীকে তাদের ক্যামেরা অ্যাক্সেস করার অনুমতি দেওয়ার জন্য অনুরোধ করা হবে না।

getUserMedia() সফল হলে, ওয়েবক্যাম থেকে ভিডিও স্ট্রীম ভিডিও উপাদানের উৎস হিসেবে সেট করা হয়:

function gotLocalMediaStream(mediaStream) {
  localVideo.srcObject = mediaStream;
}

বোনাস পয়েন্ট

getUserMedia() এ পাস করা localStream অবজেক্টটি গ্লোবাল স্কোপে রয়েছে, তাই আপনি ব্রাউজার কনসোল থেকে এটি পরিদর্শন করতে পারেন: কনসোলটি খুলুন, স্ট্রিম টাইপ করুন এবং রিটার্ন টিপুন। (ক্রোমে কনসোলটি দেখতে, আপনি যদি ম্যাকে থাকেন তবে Ctrl-Shift-J, বা Command-Option-J টিপুন।)
localStream.getVideoTracks() কী ফেরত দেয়?
localStream.getVideoTracks()[0].stop() কল করার চেষ্টা করুন।
সীমাবদ্ধতা অবজেক্টটি দেখুন: আপনি এটিকে {audio: true, video: true} এ পরিবর্তন করলে কী হবে?
ভিডিও উপাদান কি আকার? আপনি কিভাবে জাভাস্ক্রিপ্ট থেকে ভিডিওর স্বাভাবিক আকার পেতে পারেন, প্রদর্শন আকারের বিপরীতে? চেক করতে Chrome Dev টুল ব্যবহার করুন।
ভিডিও উপাদানে CSS ফিল্টার যোগ করার চেষ্টা করুন। যেমন:

video {
  filter: blur(4px) invert(1) opacity(0.5);
}

SVG ফিল্টার যোগ করার চেষ্টা করুন। যেমন:

video {
   filter: hue-rotate(180deg) saturate(200%);
 }

আপনি যা শিখেছেন

এই ধাপে আপনি শিখেছেন কিভাবে:

আপনার ওয়েবক্যাম থেকে ভিডিও পান।
মিডিয়া সীমাবদ্ধতা সেট করুন।
ভিডিও উপাদান সঙ্গে জগাখিচুড়ি.

এই ধাপের একটি সম্পূর্ণ সংস্করণ ধাপ-01 ফোল্ডারে রয়েছে।

টিপস

video উপাদানে autoplay বৈশিষ্ট্যটি ভুলবেন না। যে ছাড়া, আপনি শুধুমাত্র একটি একক ফ্রেম দেখতে পাবেন!
getUserMedia() সীমাবদ্ধতার জন্য আরও অনেক বিকল্প রয়েছে। webrtc.github.io/samples/src/content/peerconnection/constraints- এ ডেমোটি দেখুন। আপনি দেখতে পাবেন, সেই সাইটে প্রচুর আকর্ষণীয় WebRTC নমুনা রয়েছে।

সর্বোত্তম অনুশীলন

নিশ্চিত করুন যে আপনার ভিডিও উপাদান তার ধারক ওভারফ্লো না. ভিডিওর জন্য পছন্দের মাপ এবং সর্বোচ্চ মাপ সেট করতে আমরা width এবং max-width যোগ করেছি। ব্রাউজার স্বয়ংক্রিয়ভাবে উচ্চতা গণনা করবে:

video {
  max-width: 100%;
  width: 320px;
}

পরবর্তী আপ

আপনি ভিডিও পেয়েছেন, কিন্তু আপনি কিভাবে এটি স্ট্রিম করবেন? পরবর্তী ধাপে খুঁজে বের করুন!

5. RTCPeerConnection দিয়ে ভিডিও স্ট্রিম করুন

আপনি কি শিখবেন

এই ধাপে আপনি কীভাবে করবেন তা জানতে পারবেন:

WebRTC শিম, adapter.js এর সাথে ব্রাউজারের পার্থক্যগুলিকে বিমূর্ত করুন।
ভিডিও স্ট্রিম করতে RTCPeerConnection API ব্যবহার করুন।
মিডিয়া ক্যাপচার এবং স্ট্রিমিং নিয়ন্ত্রণ করুন।

এই ধাপের একটি সম্পূর্ণ সংস্করণ ধাপ-2 ফোল্ডারে রয়েছে।

RTCPeerConnection কি?

RTCPeerConnection ভিডিও এবং অডিও স্ট্রিম করতে এবং ডেটা বিনিময় করতে WebRTC কল করার জন্য একটি API।

এই উদাহরণটি একই পৃষ্ঠায় দুটি RTCPeerConnection অবজেক্টের (পিয়ার হিসাবে পরিচিত) মধ্যে একটি সংযোগ স্থাপন করে।

খুব বেশি ব্যবহারিক ব্যবহার নয়, তবে RTCPeerConnection কীভাবে কাজ করে তা বোঝার জন্য ভাল।

ভিডিও উপাদান এবং নিয়ন্ত্রণ বোতাম যোগ করুন

index.html এ দুটি ভিডিও উপাদান এবং তিনটি বোতাম দিয়ে একক ভিডিও উপাদান প্রতিস্থাপন করুন:

<video id="localVideo" autoplay playsinline></video>
<video id="remoteVideo" autoplay playsinline></video>


<div>
  <button id="startButton">Start</button>
  <button id="callButton">Call</button>
  <button id="hangupButton">Hang Up</button>
</div>

একটি ভিডিও উপাদান getUserMedia() থেকে স্ট্রীম প্রদর্শন করবে এবং অন্যটি RTCPeerconnection-এর মাধ্যমে স্ট্রিম করা একই ভিডিও দেখাবে। (একটি বাস্তব বিশ্বের অ্যাপ্লিকেশনে, একটি ভিডিও উপাদান স্থানীয় স্ট্রিম এবং অন্যটি দূরবর্তী স্ট্রিম প্রদর্শন করবে।)

adapter.js শিম যোগ করুন

main.js লিঙ্কের উপরে adapter.js এর বর্তমান সংস্করণে একটি লিঙ্ক যুক্ত করুন:

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

adapter.js অ্যাপগুলিকে বিশেষ পরিবর্তন এবং উপসর্গের পার্থক্য থেকে দূরে রাখার জন্য একটি শিম। (যদিও প্রকৃতপক্ষে, WebRTC বাস্তবায়নের জন্য ব্যবহৃত মান এবং প্রোটোকলগুলি অত্যন্ত স্থিতিশীল, এবং শুধুমাত্র কয়েকটি উপসর্গযুক্ত নাম রয়েছে।)

এই ধাপে, আমরা adapter.js- এর সাম্প্রতিকতম সংস্করণের সাথে লিঙ্ক করেছি, যা একটি কোডল্যাবের জন্য ঠিক কিন্তু একটি প্রোডাকশন অ্যাপের জন্য সঠিক নাও হতে পারে**।** adapter.js GitHub রেপো নিশ্চিত করার কৌশলগুলি ব্যাখ্যা করে আপনার অ্যাপ সর্বদা সাম্প্রতিক সংস্করণ অ্যাক্সেস করে।

WebRTC ইন্টারপ সম্পর্কে সম্পূর্ণ তথ্যের জন্য, WebRTC এর ইন্টারপ নোটগুলি দেখুন।

Index.html এখন এইরকম হওয়া উচিত:

<!DOCTYPE html>
<html>

<head>
  <title>Realtime communication with WebRTC</title>
  <link rel="stylesheet" href="css/main.css" />
</head>

<body>
  <h1>Realtime communication with WebRTC</h1>

  <video id="localVideo" autoplay playsinline></video>
  <video id="remoteVideo" autoplay playsinline></video>

  <div>
    <button id="startButton">Start</button>
    <button id="callButton">Call</button>
    <button id="hangupButton">Hang Up</button>
  </div>

  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

RTCPeerConnection কোডটি ইনস্টল করুন

step-02 ফোল্ডারের সংস্করণ দিয়ে main.js প্রতিস্থাপন করুন।

কল করুন

index.html খুলুন, আপনার ওয়েবক্যাম থেকে ভিডিও পেতে স্টার্ট বোতামে ক্লিক করুন এবং পিয়ার সংযোগ করতে কল ক্লিক করুন। উভয় ভিডিও উপাদানে আপনার একই ভিডিও (আপনার ওয়েবক্যাম থেকে) দেখতে হবে। WebRTC লগিং দেখতে ব্রাউজার কনসোল দেখুন।

এটা কিভাবে কাজ করে

এই পদক্ষেপটি অনেক কিছু করে...

WebRTC RTCPeerConnection API ব্যবহার করে WebRTC ক্লায়েন্টদের মধ্যে ভিডিও স্ট্রিম করার জন্য একটি সংযোগ সেট আপ করতে, যা পিয়ার নামে পরিচিত।

এই উদাহরণে, দুটি RTCPeerConnection অবজেক্ট একই পৃষ্ঠায় রয়েছে: pc1 এবং pc2 । খুব বেশি ব্যবহারিক ব্যবহার নয়, তবে APIগুলি কীভাবে কাজ করে তা প্রদর্শনের জন্য ভাল।

WebRTC সহকর্মীদের মধ্যে একটি কল সেট আপ করার জন্য তিনটি কাজ জড়িত:

কলের প্রতিটি প্রান্তের জন্য একটি RTCPeerConnection তৈরি করুন এবং প্রতিটি শেষে getUserMedia() থেকে স্থানীয় স্ট্রীম যোগ করুন।
নেটওয়ার্ক তথ্য পান এবং ভাগ করুন: সম্ভাব্য সংযোগের শেষ পয়েন্টগুলি ICE প্রার্থী হিসাবে পরিচিত।
স্থানীয় এবং দূরবর্তী বিবরণ পান এবং ভাগ করুন: SDP ফর্ম্যাটে স্থানীয় মিডিয়া সম্পর্কে মেটাডেটা।

কল্পনা করুন যে এলিস এবং বব একটি ভিডিও চ্যাট সেট আপ করতে RTCPeerConnection ব্যবহার করতে চান৷

প্রথমত, এলিস এবং বব নেটওয়ার্ক তথ্য বিনিময় করে। 'প্রার্থী খোঁজা' অভিব্যক্তিটি আইসিই ফ্রেমওয়ার্ক ব্যবহার করে নেটওয়ার্ক ইন্টারফেস এবং পোর্টগুলি খোঁজার প্রক্রিয়াকে বোঝায়।

অ্যালিস একটি onicecandidate (addEventListener('icecandidate')) হ্যান্ডলার দিয়ে একটি RTCPeerConnection অবজেক্ট তৈরি করে। এটি main.js থেকে নিম্নলিখিত কোডের সাথে মিলে যায়:

let localPeerConnection;

localPeerConnection = new RTCPeerConnection(servers);
localPeerConnection.addEventListener('icecandidate', handleConnection);
localPeerConnection.addEventListener(
    'iceconnectionstatechange', handleConnectionChange);

RTCPeerConnection-এর servers আর্গুমেন্ট এই উদাহরণে ব্যবহার করা হয়নি।

এখানেই আপনি STUN এবং TURN সার্ভার নির্দিষ্ট করতে পারেন।

এই প্রক্রিয়ার অংশ হিসাবে, WebRTC APIগুলি আপনার কম্পিউটারের IP ঠিকানা পেতে STUN সার্ভার ব্যবহার করে এবং পিয়ার-টু-পিয়ার যোগাযোগ ব্যর্থ হলে রিলে সার্ভার হিসাবে কাজ করার জন্য সার্ভারগুলিকে টার্ন করে৷ বাস্তব জগতে WebRTC আরও বিস্তারিতভাবে ব্যাখ্যা করে।

অ্যালিস getUserMedia() কল করে এবং এতে পাস করা স্ট্রিম যোগ করে:

navigator.mediaDevices.getUserMedia(mediaStreamConstraints).
  then(gotLocalMediaStream).
  catch(handleLocalMediaStreamError);

function gotLocalMediaStream(mediaStream) {
  localVideo.srcObject = mediaStream;
  localStream = mediaStream;
  trace('Received local stream.');
  callButton.disabled = false;  // Enable call button.
}

localPeerConnection.addStream(localStream);
trace('Added local stream to localPeerConnection.');

নেটওয়ার্ক প্রার্থীরা উপলব্ধ হলে ধাপ 1 থেকে onicecandidate হ্যান্ডলারকে ডাকা হয়।
এলিস ববকে ক্রমিক প্রার্থীর ডেটা পাঠায়। একটি বাস্তব অ্যাপ্লিকেশনে, এই প্রক্রিয়াটি ( সিগন্যালিং নামে পরিচিত) একটি মেসেজিং পরিষেবার মাধ্যমে সঞ্চালিত হয় - আপনি পরবর্তী ধাপে এটি কীভাবে করবেন তা শিখবেন। অবশ্যই, এই ধাপে, দুটি RTCPeerConnection অবজেক্ট একই পৃষ্ঠায় রয়েছে এবং বাহ্যিক বার্তাপ্রেরণের প্রয়োজন ছাড়াই সরাসরি যোগাযোগ করতে পারে।
যখন বব অ্যালিসের কাছ থেকে একটি প্রার্থীর বার্তা পায়, তখন তিনি দূরবর্তী সমকক্ষ বিবরণে প্রার্থীকে যোগ করতে addIceCandidate() কল করেন:

function handleConnection(event) {
  const peerConnection = event.target;
  const iceCandidate = event.candidate;

  if (iceCandidate) {
    const newIceCandidate = new RTCIceCandidate(iceCandidate);
    const otherPeer = getOtherPeer(peerConnection);

    otherPeer.addIceCandidate(newIceCandidate)
      .then(() => {
        handleConnectionSuccess(peerConnection);
      }).catch((error) => {
        handleConnectionFailure(peerConnection, error);
      });

    trace(`${getPeerName(peerConnection)} ICE candidate:\n` +
          `${event.candidate.candidate}.`);
  }
}

WebRTC সহকর্মীদের স্থানীয় এবং দূরবর্তী অডিও এবং ভিডিও মিডিয়া তথ্য যেমন রেজোলিউশন এবং কোডেক ক্ষমতাগুলি খুঁজে বের করতে এবং বিনিময় করতে হবে। মিডিয়া কনফিগারেশন তথ্য আদান-প্রদানের জন্য সিগন্যালিং এগিয়ে যায় মেটাডেটার ব্লব বিনিময় করে, যা একটি অফার এবং একটি উত্তর হিসাবে পরিচিত, সেশন বর্ণনা প্রোটোকল ফর্ম্যাট ব্যবহার করে, যা SDP নামে পরিচিত:

এলিস RTCPeerConnection createOffer() পদ্ধতি চালায়। প্রত্যাবর্তিত প্রতিশ্রুতি একটি RTCSessionDescription প্রদান করে: অ্যালিসের স্থানীয় অধিবেশনের বিবরণ:

trace('localPeerConnection createOffer start.');
localPeerConnection.createOffer(offerOptions)
  .then(createdOffer).catch(setSessionDescriptionError);

সফল হলে, এলিস setLocalDescription() ব্যবহার করে স্থানীয় বিবরণ সেট করে এবং তারপর তাদের সিগন্যালিং চ্যানেলের মাধ্যমে ববকে এই সেশনের বিবরণ পাঠায়।
বব বর্ণনা সেট করে যে অ্যালিস তাকে setRemoteDescription() ব্যবহার করে দূরবর্তী বিবরণ হিসাবে পাঠিয়েছিল।
বব RTCPeerConnection createAnswer() পদ্ধতি চালায়, এটিকে অ্যালিসের কাছ থেকে পাওয়া দূরবর্তী বিবরণ পাস করে, তাই একটি স্থানীয় অধিবেশন তৈরি করা যেতে পারে যা তার সাথে সামঞ্জস্যপূর্ণ। createAnswer() প্রতিশ্রুতি একটি RTCSessionDescription-এ পাস করে: বব এটিকে স্থানীয় বিবরণ হিসাবে সেট করে এবং এটি অ্যালিসের কাছে পাঠায়।
এলিস যখন ববের সেশনের বিবরণ পায়, তখন সে সেটিকে setRemoteDescription() দিয়ে দূরবর্তী বিবরণ হিসেবে সেট করে।

// Logs offer creation and sets peer connection session descriptions.
function createdOffer(description) {
  trace(`Offer from localPeerConnection:\n${description.sdp}`);

  trace('localPeerConnection setLocalDescription start.');
  localPeerConnection.setLocalDescription(description)
    .then(() => {
      setLocalDescriptionSuccess(localPeerConnection);
    }).catch(setSessionDescriptionError);

  trace('remotePeerConnection setRemoteDescription start.');
  remotePeerConnection.setRemoteDescription(description)
    .then(() => {
      setRemoteDescriptionSuccess(remotePeerConnection);
    }).catch(setSessionDescriptionError);

  trace('remotePeerConnection createAnswer start.');
  remotePeerConnection.createAnswer()
    .then(createdAnswer)
    .catch(setSessionDescriptionError);
}

// Logs answer to offer creation and sets peer connection session descriptions.
function createdAnswer(description) {
  trace(`Answer from remotePeerConnection:\n${description.sdp}.`);

  trace('remotePeerConnection setLocalDescription start.');
  remotePeerConnection.setLocalDescription(description)
    .then(() => {
      setLocalDescriptionSuccess(remotePeerConnection);
    }).catch(setSessionDescriptionError);

  trace('localPeerConnection setRemoteDescription start.');
  localPeerConnection.setRemoteDescription(description)
    .then(() => {
      setRemoteDescriptionSuccess(localPeerConnection);
    }).catch(setSessionDescriptionError);
}

পিং !

বোনাস পয়েন্ট

chrome://webrtc-internals এ একবার দেখুন। এটি WebRTC পরিসংখ্যান এবং ডিবাগিং ডেটা প্রদান করে। (ক্রোম ইউআরএলগুলির একটি সম্পূর্ণ তালিকা chrome://about এ রয়েছে।)
CSS দিয়ে পৃষ্ঠা স্টাইল করুন:

ভিডিওগুলো পাশাপাশি রাখুন।
বড় টেক্সট সহ বোতামগুলিকে একই প্রস্থ করুন।
লেআউট মোবাইলে কাজ করে তা নিশ্চিত করুন।

Chrome Dev Tools কনসোল থেকে, localStream , localPeerConnection এবং remotePeerConnection দেখুন।
কনসোল থেকে, localPeerConnectionpc1.localDescription দেখুন। SDP ফরম্যাট কেমন দেখায়?

আপনি যা শিখেছেন

এই ধাপে আপনি শিখেছেন কিভাবে:

WebRTC শিম, adapter.js এর সাথে ব্রাউজারের পার্থক্যগুলিকে বিমূর্ত করুন।
ভিডিও স্ট্রিম করতে RTCPeerConnection API ব্যবহার করুন।
মিডিয়া ক্যাপচার এবং স্ট্রিমিং নিয়ন্ত্রণ করুন।
একটি WebRTC কল সক্ষম করতে সহকর্মীদের মধ্যে মিডিয়া এবং নেটওয়ার্ক তথ্য ভাগ করুন৷

এই ধাপের একটি সম্পূর্ণ সংস্করণ ধাপ-2 ফোল্ডারে রয়েছে।

টিপস

এই ধাপে অনেক কিছু শেখার আছে! আরও বিশদে RTCPeerConnection ব্যাখ্যা করে এমন অন্যান্য সংস্থানগুলি খুঁজে পেতে, webrtc.org এ দেখুন। এই পৃষ্ঠায় জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের জন্য পরামর্শ রয়েছে — যদি আপনি WebRTC ব্যবহার করতে চান, কিন্তু API গুলিকে বিভ্রান্ত করতে চান না।
adapter.js GitHub রেপো থেকে adapter.js শিম সম্পর্কে আরও জানুন।
বিশ্বের সেরা ভিডিও চ্যাট অ্যাপটি কেমন তা দেখতে চান? AppRTC দেখুন, WebRTC কলের জন্য WebRTC প্রকল্পের ক্যানোনিকাল অ্যাপ: অ্যাপ , কোড । কল সেটআপ সময় 500 ms এর কম।

সর্বোত্তম অনুশীলন

আপনার কোড ভবিষ্যত প্রমাণ করতে, নতুন প্রতিশ্রুতি-ভিত্তিক API ব্যবহার করুন এবং adapter.js ব্যবহার করে তাদের সমর্থন করে না এমন ব্রাউজারগুলির সাথে সামঞ্জস্যতা সক্ষম করুন৷

পরবর্তী আপ

এই ধাপটি দেখায় কিভাবে WebRTC ব্যবহার করে সমবয়সীদের মধ্যে ভিডিও স্ট্রিম করতে হয় — কিন্তু এই কোডল্যাবটি ডেটা সম্পর্কেও!

পরবর্তী ধাপে RTCDataChannel ব্যবহার করে কীভাবে নির্বিচারে ডেটা স্ট্রিম করা যায় তা জানুন।

6. ডেটা বিনিময় করতে RTCDataChannel ব্যবহার করুন

আপনি কি শিখবেন

কিভাবে WebRTC এন্ডপয়েন্ট (সহযোগী) এর মধ্যে ডেটা আদান-প্রদান করতে হয়।

এই ধাপের একটি সম্পূর্ণ সংস্করণ ধাপ-03 ফোল্ডারে রয়েছে।

আপনার HTML আপডেট করুন

এই ধাপের জন্য, আপনি একই পৃষ্ঠায় দুটি textarea উপাদানের মধ্যে পাঠ্য পাঠাতে WebRTC ডেটা চ্যানেল ব্যবহার করবেন। এটি খুব দরকারী নয়, তবে ওয়েবআরটিসি কীভাবে ডেটা শেয়ার করার পাশাপাশি ভিডিও স্ট্রিমিং করতে ব্যবহার করা যেতে পারে তা প্রদর্শন করে।

index.html থেকে ভিডিও এবং বোতাম উপাদানগুলি সরান এবং নিম্নলিখিত HTML দিয়ে প্রতিস্থাপন করুন:

<textarea id="dataChannelSend" disabled
    placeholder="Press Start, enter some text, then press Send."></textarea>
<textarea id="dataChannelReceive" disabled></textarea>

<div id="buttons">
  <button id="startButton">Start</button>
  <button id="sendButton">Send</button>
  <button id="closeButton">Stop</button>
</div>

একটি টেক্সটেরিয়া পাঠ্য প্রবেশের জন্য হবে, অন্যটি সহকর্মীদের মধ্যে প্রবাহিত পাঠ্য হিসাবে প্রদর্শন করবে।

index.html এখন এইরকম হওয়া উচিত:

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <textarea id="dataChannelSend" disabled
    placeholder="Press Start, enter some text, then press Send."></textarea>
  <textarea id="dataChannelReceive" disabled></textarea>

  <div id="buttons">
    <button id="startButton">Start</button>
    <button id="sendButton">Send</button>
    <button id="closeButton">Stop</button>
  </div>

  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>

</body>

</html>

আপনার জাভাস্ক্রিপ্ট আপডেট করুন

step-03/js/main.js এর বিষয়বস্তু দিয়ে main.js প্রতিস্থাপন করুন।

সহকর্মীদের মধ্যে স্ট্রিমিং ডেটা ব্যবহার করে দেখুন: ওপেন index.html , পিয়ার সংযোগ সেট আপ করতে স্টার্ট টিপুন, বাম দিকে textarea কিছু পাঠ্য লিখুন, তারপর WebRTC ডেটা চ্যানেলগুলি ব্যবহার করে পাঠ্য স্থানান্তর করতে পাঠাতে ক্লিক করুন৷

এটা কিভাবে কাজ করে

টেক্সট বার্তা বিনিময় সক্ষম করতে এই কোডটি RTCPeerConnection এবং RTCDataChannel ব্যবহার করে।

এই ধাপের বেশিরভাগ কোড RTCPeerConnection উদাহরণের মতোই।

sendData() এবং createConnection() ফাংশনে বেশিরভাগ নতুন কোড রয়েছে:

function createConnection() {
  dataChannelSend.placeholder = '';
  var servers = null;
  pcConstraint = null;
  dataConstraint = null;
  trace('Using SCTP based data channels');
  // For SCTP, reliable and ordered delivery is true by default.
  // Add localConnection to global scope to make it visible
  // from the browser console.
  window.localConnection = localConnection =
      new RTCPeerConnection(servers, pcConstraint);
  trace('Created local peer connection object localConnection');

  sendChannel = localConnection.createDataChannel('sendDataChannel',
      dataConstraint);
  trace('Created send data channel');

  localConnection.onicecandidate = iceCallback1;
  sendChannel.onopen = onSendChannelStateChange;
  sendChannel.onclose = onSendChannelStateChange;

  // Add remoteConnection to global scope to make it visible
  // from the browser console.
  window.remoteConnection = remoteConnection =
      new RTCPeerConnection(servers, pcConstraint);
  trace('Created remote peer connection object remoteConnection');

  remoteConnection.onicecandidate = iceCallback2;
  remoteConnection.ondatachannel = receiveChannelCallback;

  localConnection.createOffer().then(
    gotDescription1,
    onCreateSessionDescriptionError
  );
  startButton.disabled = true;
  closeButton.disabled = false;
}

function sendData() {
  var data = dataChannelSend.value;
  sendChannel.send(data);
  trace('Sent Data: ' + data);
}

RTCDataChannel-এর সিনট্যাক্স ইচ্ছাকৃতভাবে WebSocket-এর মতো, একটি send() পদ্ধতি এবং একটি message ইভেন্ট সহ।

dataConstraint এর ব্যবহার লক্ষ্য করুন। ডেটা চ্যানেলগুলিকে বিভিন্ন ধরনের ডেটা শেয়ারিং সক্ষম করতে কনফিগার করা যেতে পারে — উদাহরণস্বরূপ, পারফরম্যান্সের চেয়ে নির্ভরযোগ্য বিতরণকে অগ্রাধিকার দেওয়া। আপনি Mozilla Developer Network- এ বিকল্পগুলি সম্পর্কে আরও তথ্য জানতে পারেন৷

বোনাস পয়েন্ট

SCTP এর সাথে, WebRTC ডেটা চ্যানেল দ্বারা ব্যবহৃত প্রোটোকল, নির্ভরযোগ্য এবং অর্ডারকৃত ডেটা বিতরণ ডিফল্টরূপে চালু থাকে। কখন RTCDataChannel-কে ডেটার নির্ভরযোগ্য ডেলিভারি দেওয়ার প্রয়োজন হতে পারে এবং কখন কর্মক্ষমতা আরও গুরুত্বপূর্ণ হতে পারে — এমনকি যদি এর অর্থ কিছু ডেটা হারানো হয়?
পৃষ্ঠার বিন্যাস উন্নত করতে CSS ব্যবহার করুন এবং "dataChannelReceive" পাঠ্যক্ষেত্রে একটি স্থানধারক বৈশিষ্ট্য যোগ করুন।
একটি মোবাইল ডিভাইসে পৃষ্ঠাটি পরীক্ষা করুন।

আপনি যা শিখেছেন

এই ধাপে আপনি শিখেছেন কিভাবে:

দুই WebRTC সহকর্মীদের মধ্যে একটি সংযোগ স্থাপন করুন।
সমবয়সীদের মধ্যে পাঠ্য ডেটা বিনিময় করুন।

এই ধাপের একটি সম্পূর্ণ সংস্করণ ধাপ-03 ফোল্ডারে রয়েছে।

আরও জানুন

WebRTC ডেটা চ্যানেল (কয়েক বছর পুরানো, কিন্তু এখনও পড়ার যোগ্য)
WebRTC-এর ডেটা চ্যানেলের জন্য SCTP কেন নির্বাচিত হয়েছিল?

পরবর্তী আপ

আপনি একই পৃষ্ঠায় সহকর্মীদের মধ্যে ডেটা আদান-প্রদান করতে শিখেছেন, কিন্তু আপনি কীভাবে বিভিন্ন মেশিনের মধ্যে এটি করবেন? প্রথমে, আপনাকে মেটাডেটা বার্তা বিনিময় করতে একটি সংকেত চ্যানেল সেট আপ করতে হবে। পরবর্তী ধাপে কিভাবে খুঁজে বের করুন!

7. বার্তা বিনিময় করতে একটি সংকেত পরিষেবা সেট আপ করুন৷

আপনি কি শিখবেন

এই ধাপে, আপনি কীভাবে করবেন তা খুঁজে পাবেন:

Package.json- এ উল্লেখিত প্রকল্প নির্ভরতা ইনস্টল করতে npm ব্যবহার করুন
একটি Node.js সার্ভার চালান এবং স্ট্যাটিক ফাইল পরিবেশন করতে node-static ব্যবহার করুন।
Socket.IO ব্যবহার করে Node.js-এ একটি মেসেজিং পরিষেবা সেট আপ করুন।
'রুম' তৈরি করতে এবং বার্তা বিনিময় করতে এটি ব্যবহার করুন।

এই ধাপের একটি সম্পূর্ণ সংস্করণ ধাপ-04 ফোল্ডারে রয়েছে।

ধারণা

একটি WebRTC কল সেট আপ এবং বজায় রাখার জন্য, WebRTC ক্লায়েন্টদের (সহযোগীদের) মেটাডেটা বিনিময় করতে হবে:

প্রার্থী (নেটওয়ার্ক) তথ্য।
রেজোলিউশন এবং কোডেকগুলির মতো মিডিয়া সম্পর্কে তথ্য প্রদান করে বার্তাগুলি অফার করুন এবং উত্তর দিন ৷

অন্য কথায়, অডিও, ভিডিও বা ডেটার পিয়ার-টু-পিয়ার স্ট্রিমিং হওয়ার আগে মেটাডেটা বিনিময় প্রয়োজন। এই প্রক্রিয়াটিকে সিগন্যালিং বলা হয়।

পূর্ববর্তী ধাপে, প্রেরক এবং প্রাপক RTCPeerConnection অবজেক্ট একই পৃষ্ঠায় রয়েছে, তাই 'সিগন্যালিং' হল বস্তুর মধ্যে মেটাডেটা পাস করার বিষয়।

একটি বাস্তব বিশ্বের অ্যাপ্লিকেশনে, প্রেরক এবং প্রাপক RTCPeer সংযোগগুলি বিভিন্ন ডিভাইসে ওয়েব পৃষ্ঠাগুলিতে চলে এবং আপনার মেটাডেটা যোগাযোগের জন্য তাদের জন্য একটি উপায় প্রয়োজন৷

এর জন্য, আপনি একটি সিগন্যালিং সার্ভার ব্যবহার করেন: একটি সার্ভার যা WebRTC ক্লায়েন্টদের (সহকর্মী) মধ্যে বার্তা পাঠাতে পারে। প্রকৃত বার্তাগুলি হল সরল পাঠ্য: স্ট্রিংকৃত জাভাস্ক্রিপ্ট অবজেক্ট।

পূর্বশর্ত: Node.js ইনস্টল করুন

এই কোডল্যাবের পরবর্তী ধাপগুলি চালানোর জন্য (ফোল্ডার ধাপ-04 থেকে ধাপ-06 ) আপনাকে Node.js ব্যবহার করে লোকালহোস্টে একটি সার্ভার চালাতে হবে।

আপনি এই লিঙ্ক থেকে বা আপনার পছন্দের প্যাকেজ ম্যানেজারের মাধ্যমে Node.js ডাউনলোড এবং ইনস্টল করতে পারেন।

একবার ইনস্টল হয়ে গেলে, আপনি পরবর্তী ধাপগুলির জন্য প্রয়োজনীয় নির্ভরতাগুলি আমদানি করতে সক্ষম হবেন ( npm install চলমান), সেইসাথে কোডল্যাব চালানোর জন্য একটি ছোট লোকালহোস্ট সার্ভার চালাতে (চলমান node index.js )। এই কমান্ডগুলি পরে নির্দেশিত হবে, যখন তাদের প্রয়োজন হবে।

অ্যাপ সম্পর্কে

WebRTC একটি ক্লায়েন্ট-সাইড জাভাস্ক্রিপ্ট API ব্যবহার করে, কিন্তু বাস্তব-বিশ্ব ব্যবহারের জন্য একটি সিগন্যালিং (মেসেজিং) সার্ভারের পাশাপাশি STUN এবং টার্ন সার্ভারেরও প্রয়োজন। আপনি এখানে আরো জানতে পারেন.

এই ধাপে আপনি বার্তা পাঠানোর জন্য Socket.IO Node.js মডিউল এবং JavaScript লাইব্রেরি ব্যবহার করে একটি সাধারণ Node.js সিগন্যালিং সার্ভার তৈরি করবেন। Node.js এবং Socket.IO এর অভিজ্ঞতা দরকারী হবে, কিন্তু গুরুত্বপূর্ণ নয়; মেসেজিং উপাদান খুব সহজ.

সঠিক সিগন্যালিং সার্ভার নির্বাচন করা হচ্ছে

এই কোডল্যাব একটি সিগন্যালিং সার্ভারের জন্য Socket.IO ব্যবহার করে।

Socket.IO এর ডিজাইন বার্তা আদান-প্রদানের জন্য একটি পরিষেবা তৈরি করাকে সহজ করে তোলে এবং Socket.IO 'রুম' এর অন্তর্নির্মিত ধারণার কারণে WebRTC সিগন্যালিং সম্পর্কে শেখার জন্য উপযুক্ত।

যাইহোক, একটি উত্পাদন পরিষেবার জন্য, আরও ভাল বিকল্প আছে। আপনার পরবর্তী WebRTC প্রকল্পের জন্য কীভাবে একটি সিগন্যালিং প্রোটোকল নির্বাচন করবেন তা দেখুন।

এই উদাহরণে, সার্ভার (Node.js অ্যাপ্লিকেশন) index.js এ প্রয়োগ করা হয় এবং এটিতে (ওয়েব অ্যাপ) চালানো ক্লায়েন্ট index.html এ প্রয়োগ করা হয়।

এই ধাপে Node.js অ্যাপ্লিকেশনটির দুটি কাজ রয়েছে।

প্রথমত, এটি একটি বার্তা রিলে হিসাবে কাজ করে:

socket.on('message', function (message) {
  log('Got message: ', message);
  socket.broadcast.emit('message', message);
});

দ্বিতীয়ত, এটি WebRTC ভিডিও চ্যাট 'রুম' পরিচালনা করে:

if (numClients === 0) {
  socket.join(room);
  socket.emit('created', room, socket.id);
} else if (numClients === 1) {
  socket.join(room);
  socket.emit('joined', room, socket.id);
  io.sockets.in(room).emit('ready');
} else { // max two clients
  socket.emit('full', room);
}

আমাদের সহজ WebRTC অ্যাপ্লিকেশন সর্বাধিক দুইজন সহকর্মীকে একটি রুম ভাগ করার অনুমতি দেবে।

এইচটিএমএল এবং জাভাস্ক্রিপ্ট

index.html আপডেট করুন যাতে এটি এইরকম দেখায়:

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <script src="/socket.io/socket.io.js"></script>
  <script src="js/main.js"></script>
  
</body>

</html>

আপনি এই ধাপে পৃষ্ঠায় কিছু দেখতে পাবেন না: সমস্ত লগিং ব্রাউজার কনসোলে সম্পন্ন হয়। (ক্রোমে কনসোলটি দেখতে, আপনি যদি ম্যাকে থাকেন তবে Ctrl-Shift-J, বা Command-Option-J টিপুন।)

নিম্নলিখিত দিয়ে js/main.js প্রতিস্থাপন করুন:

'use strict';

var isInitiator;

window.room = prompt("Enter room name:");

var socket = io.connect();

if (room !== "") {
  console.log('Message from client: Asking to join room ' + room);
  socket.emit('create or join', room);
}

socket.on('created', function(room, clientId) {
  isInitiator = true;
});

socket.on('full', function(room) {
  console.log('Message from client: Room ' + room + ' is full :^(');
});

socket.on('ipaddr', function(ipaddr) {
  console.log('Message from client: Server IP address is ' + ipaddr);
});

socket.on('joined', function(room, clientId) {
  isInitiator = false;
});

socket.on('log', function(array) {
  console.log.apply(console, array);
});

Node.js এ চালানোর জন্য Socket.IO সেট আপ করুন

HTML ফাইলে, আপনি হয়তো দেখেছেন যে আপনি একটি Socket.IO ফাইল ব্যবহার করছেন:

<script src="/socket.io/socket.io.js"></script>

আপনার কাজের ডিরেক্টরির শীর্ষ স্তরে নিম্নলিখিত বিষয়বস্তু সহ package.json নামে একটি ফাইল তৈরি করুন:

{
  "name": "webrtc-codelab",
  "version": "0.0.1",
  "description": "WebRTC codelab",
  "dependencies": {
    "node-static": "^0.7.10",
    "socket.io": "^1.2.0"
  }
}

এটি একটি অ্যাপ ম্যানিফেস্ট যা নোড প্যাকেজ ম্যানেজার ( npm ) কে কোন প্রকল্প নির্ভরতা ইনস্টল করতে হবে তা বলে।

নির্ভরতা ইনস্টল করতে (যেমন /socket.io/socket.io.js ), আপনার কাজের ডিরেক্টরিতে কমান্ড লাইন টার্মিনাল থেকে নিম্নলিখিতটি চালান:

npm install

আপনি একটি ইনস্টলেশন লগ দেখতে পাবেন যা এইরকম কিছু শেষ করে:

আপনি দেখতে পাচ্ছেন, npm package.json- এ সংজ্ঞায়িত নির্ভরতা ইনস্টল করেছে।

আপনার কাজের ডিরেক্টরির শীর্ষ স্তরে একটি নতুন ফাইল index.js তৈরি করুন ( js ডিরেক্টরিতে নয়) এবং নিম্নলিখিত কোড যোগ করুন:

'use strict';

var os = require('os');
var nodeStatic = require('node-static');
var http = require('http');
var socketIO = require('socket.io');

var fileServer = new(nodeStatic.Server)();
var app = http.createServer(function(req, res) {
  fileServer.serve(req, res);
}).listen(8080);

var io = socketIO.listen(app);
io.sockets.on('connection', function(socket) {

  // convenience function to log server messages on the client
  function log() {
    var array = ['Message from server:'];
    array.push.apply(array, arguments);
    socket.emit('log', array);
  }

  socket.on('message', function(message) {
    log('Client said: ', message);
    // for a real app, would be room-only (not broadcast)
    socket.broadcast.emit('message', message);
  });

  socket.on('create or join', function(room) {
    log('Received request to create or join room ' + room);

    var clientsInRoom = io.sockets.adapter.rooms[room];
    var numClients = clientsInRoom ? Object.keys(clientsInRoom.sockets).length : 0;

    log('Room ' + room + ' now has ' + numClients + ' client(s)');

    if (numClients === 0) {
      socket.join(room);
      log('Client ID ' + socket.id + ' created room ' + room);
      socket.emit('created', room, socket.id);

    } else if (numClients === 1) {
      log('Client ID ' + socket.id + ' joined room ' + room);
      io.sockets.in(room).emit('join', room);
      socket.join(room);
      socket.emit('joined', room, socket.id);
      io.sockets.in(room).emit('ready');
    } else { // max two clients
      socket.emit('full', room);
    }
  });

  socket.on('ipaddr', function() {
    var ifaces = os.networkInterfaces();
    for (var dev in ifaces) {
      ifaces[dev].forEach(function(details) {
        if (details.family === 'IPv4' && details.address !== '127.0.0.1') {
          socket.emit('ipaddr', details.address);
        }
      });
    }
  });

});

কমান্ড লাইন টার্মিনাল থেকে, কাজের ডিরেক্টরিতে নিম্নলিখিত কমান্ডটি চালান:

node index.js

আপনার ব্রাউজার থেকে, localhost:8080 খুলুন।

প্রতিবার আপনি যখন এই URL খুলবেন, আপনাকে একটি রুমের নাম লিখতে অনুরোধ করা হবে। একই রুমে যোগ দিতে, প্রতিবার একই রুমের নাম বেছে নিন, যেমন 'foo'।

একটি নতুন ট্যাব পৃষ্ঠা খুলুন, এবং আবার লোকালহোস্ট:8080 খুলুন। একই রুমের নাম বেছে নিন।

একটি তৃতীয় ট্যাব বা উইন্ডোতে localhost:8080 খুলুন। একই রুমের নাম আবার বেছে নিন।

প্রতিটি ট্যাবে কনসোল চেক করুন: আপনি উপরের জাভাস্ক্রিপ্ট থেকে লগিং দেখতে পাবেন।

বোনাস পয়েন্ট

কি বিকল্প মেসেজিং প্রক্রিয়া সম্ভব হতে পারে? 'বিশুদ্ধ' ওয়েবসকেট ব্যবহার করে আপনি কোন সমস্যার সম্মুখীন হতে পারেন?
এই অ্যাপ্লিকেশন স্কেলিং সঙ্গে জড়িত হতে পারে কি সমস্যা? আপনি কি হাজার হাজার বা লক্ষ লক্ষ একযোগে রুম অনুরোধ পরীক্ষা করার জন্য একটি পদ্ধতি বিকাশ করতে পারেন?
এই অ্যাপটি একটি রুমের নাম পেতে জাভাস্ক্রিপ্ট প্রম্পট ব্যবহার করে। ইউআরএল থেকে রুমের নাম পাওয়ার উপায় বের করুন। উদাহরণস্বরূপ localhost:8080/foo রুমের নাম দেবে foo ।

আপনি যা শিখেছেন

এই ধাপে, আপনি শিখেছেন কিভাবে:

Package.json-এ উল্লেখিত প্রকল্প নির্ভরতা ইনস্টল করতে npm ব্যবহার করুন
সার্ভার স্ট্যাটিক ফাইল একটি Node.js সার্ভার চালান.
Socket.io ব্যবহার করে Node.js-এ একটি মেসেজিং পরিষেবা সেট আপ করুন।
'রুম' তৈরি করতে এবং বার্তা বিনিময় করতে এটি ব্যবহার করুন।

এই ধাপের একটি সম্পূর্ণ সংস্করণ ধাপ-04 ফোল্ডারে রয়েছে।

আরও জানুন

পরবর্তী আপ

দুই ব্যবহারকারীকে পিয়ার সংযোগ করতে সক্ষম করতে কীভাবে সিগন্যালিং ব্যবহার করবেন তা খুঁজে বের করুন।

8. পিয়ার সংযোগ এবং সিগন্যালিং একত্রিত করুন

আপনি কি শিখবেন

এই ধাপে আপনি কীভাবে করবেন তা জানতে পারবেন:

Node.js এ চলমান Socket.IO ব্যবহার করে একটি WebRTC সিগন্যালিং পরিষেবা চালান
সহকর্মীদের মধ্যে WebRTC মেটাডেটা বিনিময় করতে সেই পরিষেবাটি ব্যবহার করুন৷

এই ধাপের একটি সম্পূর্ণ সংস্করণ step-05 ফোল্ডারে রয়েছে।

HTML এবং JavaScript প্রতিস্থাপন করুন

নিম্নলিখিত দিয়ে index.html এর বিষয়বস্তু প্রতিস্থাপন করুন:

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="/css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <div id="videos">
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>
  
</body>

</html>

step-05/js/main.js এর বিষয়বস্তু দিয়ে js/main.js প্রতিস্থাপন করুন।

Node.js সার্ভার চালান

আপনি যদি আপনার কাজের ডিরেক্টরি থেকে এই কোডল্যাবটি অনুসরণ না করেন তবে আপনাকে পদক্ষেপ-05 ফোল্ডার বা আপনার বর্তমান কাজের ফোল্ডারের জন্য নির্ভরতা ইনস্টল করতে হতে পারে। আপনার কাজের ডিরেক্টরি থেকে নিম্নলিখিত কমান্ড চালান:

npm install

একবার ইন্সটল হয়ে গেলে, যদি আপনার Node.js সার্ভার চালু না হয়, তাহলে ওয়ার্ক ডিরেক্টরিতে নিম্নলিখিত কমান্ডটি কল করে এটি শুরু করুন:

node index.js

নিশ্চিত করুন যে আপনি পূর্ববর্তী ধাপ থেকে index.js এর সংস্করণ ব্যবহার করছেন যা Socket.IO প্রয়োগ করে। নোড এবং সকেট আইও সম্পর্কে আরও তথ্যের জন্য, "বার্তা বিনিময় করার জন্য একটি সংকেত পরিষেবা সেট আপ করুন" বিভাগটি পর্যালোচনা করুন।

আপনার ব্রাউজার থেকে, localhost:8080 খুলুন।

লোকালহোস্ট খুলুন: 8080 আবার, একটি নতুন ট্যাব বা উইন্ডোতে। একটি ভিডিও উপাদান getUserMedia() থেকে স্থানীয় স্ট্রীম প্রদর্শন করবে এবং অন্যটি RTCPeerconnection-এর মাধ্যমে প্রবাহিত 'রিমোট' ভিডিও দেখাবে।

ব্রাউজার কনসোলে লগিং দেখুন।

বোনাস পয়েন্ট

এই অ্যাপ্লিকেশন শুধুমাত্র এক থেকে এক ভিডিও চ্যাট সমর্থন করে. একই ভিডিও চ্যাট রুম শেয়ার করার জন্য একাধিক ব্যক্তিকে সক্ষম করতে আপনি কীভাবে ডিজাইন পরিবর্তন করতে পারেন?
উদাহরণে রুম নাম foo হার্ড কোডেড আছে। অন্য রুম নাম সক্রিয় করার সেরা উপায় কি হবে?
ব্যবহারকারীরা কিভাবে রুমের নাম শেয়ার করবেন? রুমের নাম ভাগ করে নেওয়ার বিকল্প তৈরি করার চেষ্টা করুন।
আপনি কিভাবে অ্যাপ্লিকেশন পরিবর্তন করতে পারেন

আপনি যা শিখেছেন

এই ধাপে আপনি শিখেছেন কিভাবে:

Node.js এ চলমান Socket.IO ব্যবহার করে একটি WebRTC সিগন্যালিং পরিষেবা চালান।
সহকর্মীদের মধ্যে WebRTC মেটাডেটা বিনিময় করতে সেই পরিষেবাটি ব্যবহার করুন৷

এই ধাপের একটি সম্পূর্ণ সংস্করণ step-05 ফোল্ডারে রয়েছে।

টিপস

WebRTC পরিসংখ্যান এবং ডিবাগ ডেটা chrome://webrtc-internals থেকে পাওয়া যায়।
test.webrtc.org আপনার স্থানীয় পরিবেশ পরীক্ষা করতে এবং আপনার ক্যামেরা এবং মাইক্রোফোন পরীক্ষা করতে ব্যবহার করা যেতে পারে।
ক্যাশিং নিয়ে আপনার যদি অদ্ভুত সমস্যা থাকে তবে নিম্নলিখিতগুলি চেষ্টা করুন:
Ctrl চেপে ধরে এবং রিলোড বোতামে ক্লিক করে একটি হার্ড রিফ্রেশ করুন
ব্রাউজার রিস্টার্ট করুন
কমান্ড লাইন থেকে npm cache clean চালান।

পরবর্তী আপ

কীভাবে একটি ফটো তুলতে হয়, চিত্রের ডেটা পান এবং দূরবর্তী সমবয়সীদের মধ্যে ভাগ করতে হয় তা খুঁজে বের করুন৷

9. একটি ফটো তুলুন এবং একটি ডেটা চ্যানেলের মাধ্যমে শেয়ার করুন৷

আপনি কি শিখবেন

এই ধাপে আপনি শিখবেন কিভাবে:

একটি ফটো তুলুন এবং ক্যানভাস উপাদান ব্যবহার করে এটি থেকে ডেটা পান।
দূরবর্তী ব্যবহারকারীর সাথে ইমেজ ডেটা বিনিময় করুন।

এই ধাপের একটি সম্পূর্ণ সংস্করণ ধাপ-06 ফোল্ডারে রয়েছে।

এটা কিভাবে কাজ করে

আগে আপনি শিখেছেন কিভাবে RTCDataChannel ব্যবহার করে টেক্সট মেসেজ আদান-প্রদান করতে হয়।

এই পদক্ষেপটি সম্পূর্ণ ফাইলগুলিকে ভাগ করা সম্ভব করে তোলে: এই উদাহরণে, getUserMedia() এর মাধ্যমে তোলা ফটোগুলি।

এই ধাপের মূল অংশগুলি নিম্নরূপ:

একটি ডেটা চ্যানেল স্থাপন করুন। মনে রাখবেন যে আপনি এই ধাপে পিয়ার সংযোগে কোনো মিডিয়া স্ট্রিম যোগ করবেন না।
getUserMedia() দিয়ে ব্যবহারকারীর ওয়েবক্যাম ভিডিও স্ট্রীম ক্যাপচার করুন :

var video = document.getElementById('video');

function grabWebCamVideo() {
  console.log('Getting user media (video) ...');
  navigator.mediaDevices.getUserMedia({
    video: true
  })
  .then(gotStream)
  .catch(function(e) {
    alert('getUserMedia() error: ' + e.name);
  });
}

ব্যবহারকারী যখন স্ন্যাপ বোতামে ক্লিক করেন, ভিডিও স্ট্রিম থেকে একটি স্ন্যাপশট (একটি ভিডিও ফ্রেম) পান এবং এটি একটি canvas উপাদানে প্রদর্শন করুন:

var photo = document.getElementById('photo');
var photoContext = photo.getContext('2d');

function snapPhoto() {
  photoContext.drawImage(video, 0, 0, photo.width, photo.height);
  show(photo, sendBtn);
}

ব্যবহারকারী পাঠান বোতামে ক্লিক করলে, ছবিটিকে বাইটে রূপান্তর করুন এবং একটি ডেটা চ্যানেলের মাধ্যমে পাঠান:

function sendPhoto() {
  // Split data channel message in chunks of this byte length.
  var CHUNK_LEN = 64000;
  var img = photoContext.getImageData(0, 0, photoContextW, photoContextH),
    len = img.data.byteLength,
    n = len / CHUNK_LEN | 0;

  console.log('Sending a total of ' + len + ' byte(s)');
  dataChannel.send(len);

  // split the photo and send in chunks of about 64KB
  for (var i = 0; i < n; i++) {
    var start = i * CHUNK_LEN,
      end = (i + 1) * CHUNK_LEN;
    console.log(start + ' - ' + (end - 1));
    dataChannel.send(img.data.subarray(start, end));
  }

  // send the reminder, if any
  if (len % CHUNK_LEN) {
    console.log('last ' + len % CHUNK_LEN + ' byte(s)');
    dataChannel.send(img.data.subarray(n * CHUNK_LEN));
  }
}

রিসিভিং সাইড ডাটা চ্যানেল মেসেজ বাইটকে একটি ইমেজে রূপান্তর করে এবং ব্যবহারকারীর কাছে ছবিটি প্রদর্শন করে:

function receiveDataChromeFactory() {
  var buf, count;

  return function onmessage(event) {
    if (typeof event.data === 'string') {
      buf = window.buf = new Uint8ClampedArray(parseInt(event.data));
      count = 0;
      console.log('Expecting a total of ' + buf.byteLength + ' bytes');
      return;
    }

    var data = new Uint8ClampedArray(event.data);
    buf.set(data, count);

    count += data.byteLength;
    console.log('count: ' + count);

    if (count === buf.byteLength) {
      // we're done: all data chunks have been received
      console.log('Done. Rendering photo.');
      renderPhoto(buf);
    }
  };
}

function renderPhoto(data) {
  var canvas = document.createElement('canvas');
  canvas.width = photoContextW;
  canvas.height = photoContextH;
  canvas.classList.add('incomingPhoto');
  // trail is the element holding the incoming images
  trail.insertBefore(canvas, trail.firstChild);

  var context = canvas.getContext('2d');
  var img = context.createImageData(photoContextW, photoContextH);
  img.data.set(data);
  context.putImageData(img, 0, 0);
}

কোড পান

ধাপ-06 এর বিষয়বস্তু দিয়ে আপনার কাজের ফোল্ডারের বিষয়বস্তু প্রতিস্থাপন করুন। আপনার index.html ফাইলটি এখন এইরকম দেখতে হবে**:**

<!DOCTYPE html>
<html>

<head>

  <title>Realtime communication with WebRTC</title>

  <link rel="stylesheet" href="/css/main.css" />

</head>

<body>

  <h1>Realtime communication with WebRTC</h1>

  <h2>
    <span>Room URL: </span><span id="url">...</span>
  </h2>

  <div id="videoCanvas">
    <video id="camera" autoplay></video>
    <canvas id="photo"></canvas>
  </div>

  <div id="buttons">
    <button id="snap">Snap</button><span> then </span><button id="send">Send</button>
    <span> or </span>
    <button id="snapAndSend">Snap &amp; Send</button>
  </div>

  <div id="incoming">
    <h2>Incoming photos</h2>
    <div id="trail"></div>
  </div>

  <script src="/socket.io/socket.io.js"></script>
  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="js/main.js"></script>

</body>

</html>

আপনি যদি আপনার কাজের ডিরেক্টরি থেকে এই কোডল্যাবটি অনুসরণ না করেন তবে আপনাকে পদক্ষেপ-06 ফোল্ডার বা আপনার বর্তমান কাজের ফোল্ডারের জন্য নির্ভরতা ইনস্টল করতে হতে পারে। আপনার কাজের ডিরেক্টরি থেকে কেবল নিম্নলিখিত কমান্ডটি চালান:

npm install

একবার ইন্সটল করলে, যদি আপনার Node.js সার্ভার চালু না হয়, তাহলে আপনার কাজের ডিরেক্টরি থেকে নিম্নলিখিত কমান্ডটি কল করে এটি শুরু করুন:

node index.js

নিশ্চিত করুন যে আপনি index.js এর সংস্করণ ব্যবহার করছেন যা Socket.IO প্রয়োগ করে, এবং যদি আপনি পরিবর্তন করেন তবে আপনার Node.js সার্ভার পুনরায় চালু করতে ভুলবেন না। নোড এবং সকেট আইও সম্পর্কে আরও তথ্যের জন্য, "বার্তা বিনিময় করার জন্য একটি সংকেত পরিষেবা সেট আপ করুন" বিভাগটি পর্যালোচনা করুন।

প্রয়োজনে, অ্যাপটিকে আপনার ওয়েবক্যাম ব্যবহার করার অনুমতি দিতে অনুমতি বোতামে ক্লিক করুন।

অ্যাপটি একটি র্যান্ডম রুম আইডি তৈরি করবে এবং সেই আইডিটি URL-এ যোগ করবে। একটি নতুন ব্রাউজার ট্যাব বা উইন্ডোতে ঠিকানা বার থেকে URL খুলুন.

স্ন্যাপ এবং পাঠান বোতামে ক্লিক করুন এবং তারপর পৃষ্ঠার নীচে অন্য ট্যাবে ইনকামিং এলাকাটি দেখুন। অ্যাপটি ট্যাবের মধ্যে ফটো স্থানান্তর করে।

আপনি এই মত কিছু দেখতে হবে:

বোনাস পয়েন্ট

কোন ফাইল টাইপ শেয়ার করা সম্ভব করার জন্য আপনি কিভাবে কোড পরিবর্তন করতে পারেন?

আরও জানুন

মিডিয়াস্ট্রিম ইমেজ ক্যাপচার এপিআই : ফটো তোলা এবং ক্যামেরা নিয়ন্ত্রণ করার জন্য একটি API — শীঘ্রই আপনার কাছাকাছি একটি ব্রাউজারে আসছে!
অডিও এবং ভিডিও রেকর্ড করার জন্য MediaRecorder API: ডেমো , ডকুমেন্টেশন ।

আপনি যা শিখেছেন

ক্যানভাস এলিমেন্ট ব্যবহার করে কীভাবে একটি ছবি তুলতে হয় এবং সেখান থেকে ডেটা পেতে হয়।
দূরবর্তী ব্যবহারকারীর সাথে কীভাবে সেই ডেটা বিনিময় করবেন।

এই ধাপের একটি সম্পূর্ণ সংস্করণ ধাপ-06 ফোল্ডারে রয়েছে।

10. অভিনন্দন

আপনি রিয়েলটাইম ভিডিও স্ট্রিমিং এবং ডেটা বিনিময় করার জন্য একটি অ্যাপ তৈরি করেছেন!

আপনি যা শিখেছেন

এই কোডল্যাবে আপনি শিখেছেন কিভাবে:

আপনার ওয়েবক্যাম থেকে ভিডিও পান।
RTCPeerConnection দিয়ে ভিডিও স্ট্রিম করুন।
RTCDataChannel দিয়ে ডেটা স্ট্রিম করুন।
বার্তা বিনিময় করতে একটি সংকেত পরিষেবা সেট আপ করুন৷
পিয়ার কানেকশন এবং সিগন্যালিং একত্রিত করুন।
একটি ফটো তুলুন এবং একটি ডেটা চ্যানেলের মাধ্যমে শেয়ার করুন৷

পরবর্তী পদক্ষেপ

ক্যানোনিকাল WebRTC চ্যাট অ্যাপ্লিকেশন AppRTC: অ্যাপ , কোডের কোড এবং আর্কিটেকচার দেখুন।
github.com/webrtc/samples থেকে লাইভ ডেমো ব্যবহার করে দেখুন।

আরও জানুন

WebRTC এর সাথে শুরু করার জন্য বিভিন্ন সংস্থান পাওয়া যায় webrtc.org থেকে।