WebRTC দিয়ে শুরু করুন

Sam Dutton

ওয়েবআরটিসি একটি উন্মুক্ত এবং ভারমুক্ত ওয়েবের জন্য দীর্ঘ যুদ্ধের একটি নতুন ফ্রন্ট।

ব্রেন্ডন ইচ, জাভাস্ক্রিপ্টের উদ্ভাবক

প্লাগইন ছাড়াই রিয়েল-টাইম যোগাযোগ

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

এটা চেষ্টা করে দেখতে চান? WebRTC ডেস্কটপ এবং মোবাইলে Google Chrome, Safari, Firefox এবং Opera-এ উপলব্ধ। শুরু করার জন্য একটি ভাল জায়গা হল appr.tc- এ সহজ ভিডিও চ্যাট অ্যাপ:

1. আপনার ব্রাউজারে appr.tc খুলুন।
2. একটি চ্যাট রুমে যোগ দিতে যোগ দিন এ ক্লিক করুন এবং অ্যাপটিকে আপনার ওয়েবক্যাম ব্যবহার করতে দিন।
3. পৃষ্ঠার শেষে প্রদর্শিত URLটি একটি নতুন ট্যাবে বা, একটি ভিন্ন কম্পিউটারে খুলুন।

দ্রুত শুরু

এই নিবন্ধটি পড়ার সময় পাননি বা শুধুমাত্র কোড চান?

• WebRTC এর একটি ওভারভিউ পেতে, নিম্নলিখিত Google I/O ভিডিওটি দেখুন বা এই স্লাইডগুলি দেখুন:
• আপনি getUserMedia API ব্যবহার না করে থাকলে, HTML5 এবং simpl.info getUserMedia- এ ক্যাপচার অডিও এবং ভিডিও দেখুন।
• RTCPeerConnection API সম্পর্কে জানতে, নিম্নলিখিত উদাহরণ এবং 'simpl.info RTCPeerConnection' দেখুন।
• WebRTC কীভাবে সিগন্যালিং, এবং ফায়ারওয়াল এবং NAT ট্রাভার্সালের জন্য সার্ভার ব্যবহার করে তা জানতে, appr.tc থেকে কোড এবং কনসোল লগগুলি দেখুন।
• অপেক্ষা করতে পারছেন না এবং এখনই WebRTC চেষ্টা করতে চান? WebRTC JavaScript API গুলি অনুশীলন করে এমন 20টিরও বেশি ডেমোগুলির মধ্যে কিছু চেষ্টা করুন৷
• আপনার মেশিন এবং WebRTC নিয়ে সমস্যা হচ্ছে? WebRTC ট্রাবলশুটারে যান।

বিকল্পভাবে, সরাসরি WebRTC কোডল্যাবে ঝাঁপ দাও, একটি ধাপে ধাপে নির্দেশিকা যা ব্যাখ্যা করে কিভাবে একটি সাধারণ সিগন্যালিং সার্ভার সহ একটি সম্পূর্ণ ভিডিও চ্যাট অ্যাপ তৈরি করতে হয়।

WebRTC এর একটি খুব সংক্ষিপ্ত ইতিহাস

ওয়েবের জন্য শেষ বড় চ্যালেঞ্জগুলির মধ্যে একটি হল ভয়েস এবং ভিডিওর মাধ্যমে মানুষের যোগাযোগ সক্ষম করা: রিয়েল-টাইম যোগাযোগ বা সংক্ষেপে RTC। আরটিসি একটি ওয়েব অ্যাপে টেক্সট ইনপুটে পাঠ্য প্রবেশের মতো স্বাভাবিক হওয়া উচিত। এটি ব্যতীত, আপনি লোকেদের ইন্টারঅ্যাক্ট করার জন্য নতুন উপায় উদ্ভাবন এবং বিকাশ করার ক্ষমতাতে সীমাবদ্ধ।

ঐতিহাসিকভাবে, আরটিসি কর্পোরেট এবং জটিল, যার জন্য লাইসেন্স করা বা ঘরে তৈরি করা ব্যয়বহুল অডিও এবং ভিডিও প্রযুক্তি প্রয়োজন। বিদ্যমান বিষয়বস্তু, ডেটা এবং পরিষেবাগুলির সাথে RTC প্রযুক্তিকে একীভূত করা কঠিন এবং সময়সাপেক্ষ, বিশেষ করে ওয়েবে।

জিমেইল ভিডিও চ্যাট 2008 সালে জনপ্রিয় হয়ে ওঠে এবং, 2011 সালে, Google Hangouts চালু করে, যা টক ব্যবহার করে (জিমেইলের মতো)। Google জিআইপিএস কিনেছে, এমন একটি কোম্পানি যা RTC-এর জন্য প্রয়োজনীয় অনেক উপাদান তৈরি করেছে, যেমন কোডেক এবং ইকো বাতিলকরণ কৌশল। Google ওপেন সোর্স GIPS দ্বারা তৈরি প্রযুক্তিগুলি এবং শিল্পের ঐক্যমত্য নিশ্চিত করতে ইন্টারনেট ইঞ্জিনিয়ারিং টাস্ক ফোর্স (IETF) এবং ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (W3C) এর প্রাসঙ্গিক মান সংস্থাগুলির সাথে জড়িত। 2011 সালের মে মাসে, এরিকসন WebRTC-এর প্রথম বাস্তবায়ন তৈরি করে।

WebRTC রিয়েল-টাইম, প্লাগইন-মুক্ত ভিডিও, অডিও এবং ডেটা যোগাযোগের জন্য উন্মুক্ত মান প্রয়োগ করেছে। প্রয়োজনীয়তা বাস্তব ছিল:

• অনেক ওয়েব পরিষেবা RTC ব্যবহার করে, কিন্তু ডাউনলোড, নেটিভ অ্যাপ বা প্লাগইন প্রয়োজন। এর মধ্যে রয়েছে স্কাইপ, ফেসবুক এবং হ্যাঙ্গআউট।
• প্লাগইনগুলি ডাউনলোড করা, ইনস্টল করা এবং আপডেট করা জটিল, ত্রুটি প্রবণ এবং বিরক্তিকর৷
• প্লাগইনগুলি স্থাপন করা, ডিবাগ করা, সমস্যা সমাধান করা, পরীক্ষা করা এবং রক্ষণাবেক্ষণ করা কঠিন - এবং জটিল, ব্যয়বহুল প্রযুক্তির সাথে লাইসেন্সিং এবং একীকরণের প্রয়োজন হতে পারে। প্রথম স্থানে প্লাগইন ইনস্টল করার জন্য লোকেদের প্ররোচিত করা প্রায়ই কঠিন!

WebRTC প্রজেক্টের গাইডিং নীতি হল যে এর API গুলি ওপেন সোর্স, মুক্ত, মানসম্মত, ওয়েব ব্রাউজারে তৈরি এবং বিদ্যমান প্রযুক্তির চেয়ে বেশি দক্ষ হওয়া উচিত।

যেখানে আমরা এখন?

WebRTC বিভিন্ন অ্যাপে ব্যবহৃত হয়, যেমন Google Meet। WebRTC এছাড়াও WebKitGTK+ এবং Qt নেটিভ অ্যাপের সাথে একীভূত করা হয়েছে।

WebRTC এই তিনটি API প্রয়োগ করে: - MediaStream ( getUserMedia নামেও পরিচিত) - RTCPeerConnection - RTCDataChannel

এপিআই এই দুটি স্পেসে সংজ্ঞায়িত করা হয়েছে:

• ওয়েবআরটিসি
• getUserMedia

তিনটি APIই ক্রোম, সাফারি, ফায়ারফক্স, এজ এবং অপেরা দ্বারা মোবাইল এবং ডেস্কটপে সমর্থিত।

getUserMedia : ডেমো এবং কোডের জন্য, WebRTC নমুনা দেখুন বা ক্রিস উইলসনের আশ্চর্যজনক উদাহরণগুলি চেষ্টা করুন যা ওয়েব অডিওর জন্য ইনপুট হিসাবে getUserMedia ব্যবহার করে।

RTCPeerConnection : একটি সাধারণ ডেমো এবং একটি সম্পূর্ণ কার্যকরী ভিডিও-চ্যাট অ্যাপের জন্য, যথাক্রমে WebRTC নমুনা পিয়ার কানেকশন এবং appr.tc দেখুন। এই অ্যাপটি অ্যাডাপ্টার.জেএস ব্যবহার করে, একটি জাভাস্ক্রিপ্ট শিম যা Google WebRTC সম্প্রদায়ের সহায়তায় রক্ষণাবেক্ষণ করে, ব্রাউজারের পার্থক্য এবং বিশেষ পরিবর্তনগুলিকে বিমূর্ত করতে।

RTCDataChannel : এটি কার্যকরভাবে দেখতে, ডেটা-চ্যানেলের ডেমোগুলির একটি পরীক্ষা করতে WebRTC নমুনাগুলি দেখুন৷

WebRTC কোডল্যাব দেখায় কিভাবে ভিডিও চ্যাট এবং ফাইল শেয়ার করার জন্য একটি সহজ অ্যাপ তৈরি করতে তিনটি API ব্যবহার করতে হয়।

আপনার প্রথম WebRTC

WebRTC অ্যাপগুলিকে বেশ কিছু কাজ করতে হবে:

• স্ট্রিমিং অডিও, ভিডিও বা অন্যান্য ডেটা পান।
• নেটওয়ার্ক তথ্য পান, যেমন IP ঠিকানা এবং পোর্ট, এবং সংযোগ সক্ষম করতে অন্যান্য WebRTC ক্লায়েন্টদের সাথে বিনিময় করুন ( পিয়ার নামে পরিচিত) এমনকি NATs এবং ফায়ারওয়ালের মাধ্যমেও।
• ত্রুটি রিপোর্ট এবং সেশন শুরু বা বন্ধ করতে সংকেত যোগাযোগ সমন্বয়.
• মিডিয়া এবং ক্লায়েন্ট ক্ষমতা সম্পর্কে তথ্য বিনিময় করুন, যেমন রেজোলিউশন এবং কোডেক।
• স্ট্রিমিং অডিও, ভিডিও বা ডেটা যোগাযোগ করুন।

স্ট্রিমিং ডেটা অর্জন এবং যোগাযোগ করতে, WebRTC নিম্নলিখিত APIগুলি প্রয়োগ করে:

• MediaStream ডেটা স্ট্রিমগুলিতে অ্যাক্সেস পায়, যেমন ব্যবহারকারীর ক্যামেরা এবং মাইক্রোফোন থেকে।
• RTCPeerConnection এনক্রিপশন এবং ব্যান্ডউইথ ব্যবস্থাপনার সুবিধা সহ অডিও বা ভিডিও কলিং সক্ষম করে।
• RTCDataChannel জেনেরিক ডেটার পিয়ার-টু-পিয়ার যোগাযোগ সক্ষম করে।

(পরে WebRTC এর নেটওয়ার্ক এবং সিগন্যালিং দিকগুলির বিশদ আলোচনা রয়েছে।)

MediaStream API ( getUserMedia API নামেও পরিচিত)

MediaStream API মিডিয়ার সিঙ্ক্রোনাইজড স্ট্রীম উপস্থাপন করে। উদাহরণস্বরূপ, ক্যামেরা এবং মাইক্রোফোন ইনপুট থেকে নেওয়া একটি স্ট্রিম ভিডিও এবং অডিও ট্র্যাক সিঙ্ক্রোনাইজ করেছে। ( MediaStreamTrack <track> উপাদানের সাথে বিভ্রান্ত করবেন না, যা সম্পূর্ণ ভিন্ন কিছু।)

সম্ভবত MediaStream API বোঝার সবচেয়ে সহজ উপায় হল এটি বন্যের মধ্যে দেখা:

1. আপনার ব্রাউজারে, WebRTC নমুনা getUserMedia এ নেভিগেট করুন।
2. কনসোল খুলুন।
3. stream ভেরিয়েবল পরিদর্শন করুন, যা বিশ্বব্যাপী পরিসরে রয়েছে।

প্রতিটি MediaStream একটি ইনপুট থাকে, যা getUserMedia() দ্বারা উত্পন্ন একটি MediaStream এবং একটি আউটপুট হতে পারে, যা একটি ভিডিও উপাদান বা একটি RTCPeerConnection এ পাঠানো হতে পারে।

getUserMedia() পদ্ধতি একটি MediaStreamConstraints অবজেক্ট প্যারামিটার নেয় এবং একটি Promise প্রদান করে যা একটি MediaStream অবজেক্টে সমাধান করে।

প্রতিটি MediaStream একটি label থাকে, যেমন 'Xk7EuLhsuHKbnjLWkW4yYGNJJ8ONsgwHBvLQ' । getAudioTracks() এবং getVideoTracks() পদ্ধতিতে MediaStreamTrack s-এর একটি অ্যারে ফেরত দেওয়া হয়।

getUserMedia উদাহরণের জন্য, stream.getAudioTracks() একটি খালি অ্যারে ফেরত দেয় (কারণ সেখানে কোনো অডিও নেই) এবং, একটি কার্যকরী ওয়েবক্যাম সংযুক্ত আছে বলে ধরে নিয়ে, stream.getVideoTracks() ওয়েবক্যাম থেকে স্ট্রীম প্রতিনিধিত্বকারী একটি MediaStreamTrack এর একটি অ্যারে প্রদান করে৷ প্রতিটি MediaStreamTrack এক ধরনের ( 'video' বা 'audio' ), একটি label থাকে ( 'FaceTime HD Camera (Built-in)' এর মতো কিছু), এবং অডিও বা ভিডিওর এক বা একাধিক চ্যানেলের প্রতিনিধিত্ব করে। এই ক্ষেত্রে, শুধুমাত্র একটি ভিডিও ট্র্যাক নেই এবং কোনও অডিও নেই, তবে আরও কিছু ক্ষেত্রে ব্যবহার করার ক্ষেত্রে কল্পনা করা সহজ, যেমন একটি চ্যাট অ্যাপ যা সামনের ক্যামেরা, পিছনের ক্যামেরা, মাইক্রোফোন থেকে স্ট্রিম করে এবং একটি অ্যাপ শেয়ার করে পর্দা

srcObject অ্যাট্রিবিউট সেট করে একটি MediaStream একটি ভিডিও উপাদানের সাথে সংযুক্ত করা যেতে পারে। পূর্বে, URL.createObjectURL() দিয়ে তৈরি একটি অবজেক্ট URL-এ src অ্যাট্রিবিউট সেট করার মাধ্যমে এটি করা হয়েছিল, কিন্তু এটিকে অবমূল্যায়ন করা হয়েছে ।

getUserMedia ওয়েব অডিও API এর জন্য একটি ইনপুট নোড হিসাবেও ব্যবহার করা যেতে পারে:

// Cope with browser differences.
let audioContext;
if (typeof AudioContext === 'function') {
  audioContext = new AudioContext();
} else if (typeof webkitAudioContext === 'function') {
  audioContext = new webkitAudioContext(); // eslint-disable-line new-cap
} else {
  console.log('Sorry! Web Audio not supported.');
}

// Create a filter node.
var filterNode = audioContext.createBiquadFilter();
// See https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html#BiquadFilterNode-section
filterNode.type = 'highpass';
// Cutoff frequency. For highpass, audio is attenuated below this frequency.
filterNode.frequency.value = 10000;

// Create a gain node to change audio volume.
var gainNode = audioContext.createGain();
// Default is 1 (no change). Less than 1 means audio is attenuated
// and vice versa.
gainNode.gain.value = 0.5;

navigator.mediaDevices.getUserMedia({audio: true}, (stream) => {
  // Create an AudioNode from the stream.
  const mediaStreamSource =
    audioContext.createMediaStreamSource(stream);
  mediaStreamSource.connect(filterNode);
  filterNode.connect(gainNode);
  // Connect the gain node to the destination. For example, play the sound.
  gainNode.connect(audioContext.destination);
});

Chromium-ভিত্তিক অ্যাপ্লিকেশান এবং এক্সটেনশনগুলি getUserMedia ও অন্তর্ভুক্ত করতে পারে৷ ম্যানিফেস্টে audioCapture এবং/অথবা videoCapture অনুমতি যোগ করা হলে ইনস্টলেশনের পরে শুধুমাত্র একবার অনুরোধ করা এবং মঞ্জুর করার অনুমতি দেয়। তারপরে, ব্যবহারকারীকে ক্যামেরা বা মাইক্রোফোন অ্যাক্সেসের অনুমতি চাওয়া হয় না।

getUserMedia() এর জন্য শুধুমাত্র একবার অনুমতি দিতে হবে। প্রথমবার, ব্রাউজারের ইনফোবারে একটি মঞ্জুরি বোতাম প্রদর্শিত হয়। getUserMedia() এর জন্য HTTP অ্যাক্সেস 2015 সালের শেষের দিকে ক্রোম দ্বারা বাতিল করা হয়েছিল কারণ এটিকে একটি শক্তিশালী বৈশিষ্ট্য হিসাবে শ্রেণীবদ্ধ করা হয়েছে৷

উদ্দেশ্য হল যেকোন স্ট্রিমিং ডেটা উৎসের জন্য MediaStream সক্ষম করা, শুধুমাত্র একটি ক্যামেরা বা মাইক্রোফোন নয়। এটি সঞ্চিত ডেটা বা নির্বিচারে ডেটা উত্স থেকে স্ট্রিমিং সক্ষম করবে, যেমন সেন্সর বা অন্যান্য ইনপুট।

getUserMedia() সত্যিই অন্যান্য জাভাস্ক্রিপ্ট API এবং লাইব্রেরির সংমিশ্রণে প্রাণবন্ত হয়:

• ওয়েবক্যাম টয় হল একটি ফটোবুথ অ্যাপ যা স্থানীয়ভাবে শেয়ার করা বা সংরক্ষণ করা যায় এমন ফটোতে অদ্ভুত এবং বিস্ময়কর প্রভাব যোগ করতে WebGL ব্যবহার করে।
• ফেসক্যাট হল একটি ফেস-ট্র্যাকিং গেম যা headtrackr.js দিয়ে তৈরি।
• ASCII ক্যামেরা ASCII ছবি তৈরি করতে ক্যানভাস API ব্যবহার করে।

সীমাবদ্ধতা

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

একটি উদাহরণের জন্য, WebRTC নমুনা getUserMedia দেখুন : রেজোলিউশন নির্বাচন করুন ।

একটি অননুমোদিত সীমাবদ্ধতা মান সেট করা একটি DOMException বা একটি OverconstrainedError দেয় যদি, উদাহরণস্বরূপ, অনুরোধ করা একটি রেজোলিউশন উপলব্ধ না হয়। এটি কার্যকরভাবে দেখতে, WebRTC নমুনা getUserMedia দেখুন : একটি ডেমোর জন্য রেজোলিউশন নির্বাচন করুন ।

স্ক্রীন এবং ট্যাব ক্যাপচার

ক্রোম অ্যাপগুলি chrome.tabCapture এবং chrome.desktopCapture API-এর মাধ্যমে একটি একক ব্রাউজার ট্যাব বা সমগ্র ডেস্কটপের একটি লাইভ ভিডিও শেয়ার করাও সম্ভব করে তোলে৷ (একটি ডেমো এবং আরও তথ্যের জন্য, WebRTC-এর সাথে স্ক্রিনশেয়ারিং দেখুন। নিবন্ধটি কয়েক বছরের পুরনো, কিন্তু এটি এখনও আকর্ষণীয়।)

পরীক্ষামূলক chromeMediaSource সীমাবদ্ধতা ব্যবহার করে Chrome-এ MediaStream উৎস হিসেবে স্ক্রিন ক্যাপচার ব্যবহার করাও সম্ভব। মনে রাখবেন যে স্ক্রিন ক্যাপচারের জন্য HTTPS প্রয়োজন এবং এই পোস্টে ব্যাখ্যা করা কমান্ড-লাইন পতাকার মাধ্যমে এটি সক্ষম হওয়ার কারণে শুধুমাত্র বিকাশের জন্য ব্যবহার করা উচিত।

সিগন্যালিং: সেশন কন্ট্রোল, নেটওয়ার্ক এবং মিডিয়া তথ্য

WebRTC ব্রাউজারগুলির মধ্যে স্ট্রিমিং ডেটা যোগাযোগের জন্য RTCPeerConnection ব্যবহার করে (পিয়ার হিসাবেও পরিচিত), তবে যোগাযোগের সমন্বয় করতে এবং নিয়ন্ত্রণ বার্তা পাঠানোর জন্য একটি প্রক্রিয়া প্রয়োজন, একটি প্রক্রিয়া যা সিগন্যালিং নামে পরিচিত। সিগন্যালিং পদ্ধতি এবং প্রোটোকল WebRTC দ্বারা নির্দিষ্ট করা হয় না । সিগন্যালিং RTCPeerConnection API-এর অংশ নয়।

পরিবর্তে, WebRTC অ্যাপ ডেভেলপাররা তাদের পছন্দের মেসেজিং প্রোটোকল যেমন SIP বা XMPP এবং যেকোনো উপযুক্ত ডুপ্লেক্স (টু-ওয়ে) যোগাযোগ চ্যানেল বেছে নিতে পারেন। appr.tc উদাহরণ XHR এবং চ্যানেল এপিআই সিগন্যালিং প্রক্রিয়া হিসাবে ব্যবহার করে। কোডল্যাব একটি নোড সার্ভারে চলমান Socket.io ব্যবহার করে।

সিগন্যালিং তিন ধরনের তথ্য আদান-প্রদানের জন্য ব্যবহৃত হয়:

• অধিবেশন নিয়ন্ত্রণ বার্তা: যোগাযোগ শুরু বা বন্ধ এবং ত্রুটি রিপোর্ট.
• নেটওয়ার্ক কনফিগারেশন: বাইরের বিশ্বের কাছে, আপনার কম্পিউটারের আইপি ঠিকানা এবং পোর্ট কি?
• মিডিয়া ক্ষমতা: আপনার ব্রাউজার এবং এটি যে ব্রাউজারটির সাথে যোগাযোগ করতে চায় তার দ্বারা কোন কোডেক এবং রেজোলিউশনগুলি পরিচালনা করা যেতে পারে?

পিয়ার-টু-পিয়ার স্ট্রিমিং শুরু করার আগে সিগন্যালিংয়ের মাধ্যমে তথ্যের আদান-প্রদান অবশ্যই সফলভাবে সম্পন্ন হয়েছে।

উদাহরণস্বরূপ, কল্পনা করুন অ্যালিস ববের সাথে যোগাযোগ করতে চায়। এখানে W3C WebRTC স্পেক থেকে একটি কোড নমুনা দেওয়া হল, যা সিগন্যালিং প্রক্রিয়াকে কার্যত দেখায়। কোডটি createSignalingChannel() পদ্ধতিতে তৈরি কিছু সিগন্যালিং প্রক্রিয়ার অস্তিত্ব অনুমান করে। এছাড়াও মনে রাখবেন যে Chrome এবং Opera-এ, RTCPeerConnection বর্তমানে উপসর্গযুক্ত।

// handles JSON.stringify/parse
const signaling = new SignalingChannel();
const constraints = {audio: true, video: true};
const configuration = {iceServers: [{urls: 'stun:stun.example.org'}]};
const pc = new RTCPeerConnection(configuration);

// Send any ice candidates to the other peer.
pc.onicecandidate = ({candidate}) => signaling.send({candidate});

// Let the "negotiationneeded" event trigger offer generation.
pc.onnegotiationneeded = async () => {
  try {
    await pc.setLocalDescription(await pc.createOffer());
    // Send the offer to the other peer.
    signaling.send({desc: pc.localDescription});
  } catch (err) {
    console.error(err);
  }
};

// Once remote track media arrives, show it in remote video element.
pc.ontrack = (event) => {
  // Don't set srcObject again if it is already set.
  if (remoteView.srcObject) return;
  remoteView.srcObject = event.streams[0];
};

// Call start() to initiate.
async function start() {
  try {
    // Get local stream, show it in self-view, and add it to be sent.
    const stream =
      await navigator.mediaDevices.getUserMedia(constraints);
    stream.getTracks().forEach((track) =>
      pc.addTrack(track, stream));
    selfView.srcObject = stream;
  } catch (err) {
    console.error(err);
  }
}

signaling.onmessage = async ({desc, candidate}) => {
  try {
    if (desc) {
      // If you get an offer, you need to reply with an answer.
      if (desc.type === 'offer') {
        await pc.setRemoteDescription(desc);
        const stream =
          await navigator.mediaDevices.getUserMedia(constraints);
        stream.getTracks().forEach((track) =>
          pc.addTrack(track, stream));
        await pc.setLocalDescription(await pc.createAnswer());
        signaling.send({desc: pc.localDescription});
      } else if (desc.type === 'answer') {
        await pc.setRemoteDescription(desc);
      } else {
        console.log('Unsupported SDP type.');
      }
    } else if (candidate) {
      await pc.addIceCandidate(candidate);
    }
  } catch (err) {
    console.error(err);
  }
};

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

1. অ্যালিস একটি onicecandidate হ্যান্ডলারের সাহায্যে একটি RTCPeerConnection অবজেক্ট তৈরি করে, যা নেটওয়ার্ক প্রার্থী উপলব্ধ হলে চলে।
2. অ্যালিস যে কোনো সিগন্যালিং চ্যানেল ব্যবহার করছে, যেমন WebSocket বা অন্য কোনো মেকানিজমের মাধ্যমে ববকে ক্রমিক প্রার্থীর ডেটা পাঠায়।
3. যখন বব অ্যালিসের কাছ থেকে একটি প্রার্থীর বার্তা পায়, তখন তিনি প্রার্থীকে রিমোট পিয়ার বিবরণে যোগ করতে addIceCandidate কল করেন।

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

1. এলিস RTCPeerConnection createOffer() পদ্ধতি চালায়। এর থেকে রিটার্ন একটি RTCSessionDescription অ্যালিসের স্থানীয় সেশনের বিবরণ পাস করা হয়।
2. কলব্যাকে, এলিস setLocalDescription() ব্যবহার করে স্থানীয় বিবরণ সেট করে এবং তারপর তাদের সিগন্যালিং চ্যানেলের মাধ্যমে ববকে এই সেশনের বিবরণ পাঠায়। মনে রাখবেন যে RTCPeerConnection প্রার্থীদের সংগ্রহ করা শুরু করবে না যতক্ষণ না setLocalDescription() কল করা হয়। এটি JSEP IETF খসড়াতে কোড করা হয়েছে।
3. বব বর্ণনা সেট করে যে অ্যালিস তাকে setRemoteDescription() ব্যবহার করে দূরবর্তী বিবরণ হিসাবে পাঠিয়েছিল।
4. বব RTCPeerConnection createAnswer() পদ্ধতি চালায়, এটিকে এলিস থেকে পাওয়া দূরবর্তী বিবরণ পাস করে যাতে একটি স্থানীয় অধিবেশন তৈরি করা যায় যা তার সাথে সামঞ্জস্যপূর্ণ। createAnswer() কলব্যাক একটি RTCSessionDescription পাস করা হয়েছে। বব এটিকে স্থানীয় বিবরণ হিসাবে সেট করে এবং এটি অ্যালিসের কাছে পাঠায়।
5. এলিস যখন ববের সেশনের বিবরণ পায়, তখন সে সেটিকে setRemoteDescription সাথে দূরবর্তী বিবরণ হিসাবে সেট করে।
6. পিং !

RTCSessionDescription অবজেক্ট হল ব্লব যা সেশন বর্ণনা প্রোটোকল , SDP এর সাথে সামঞ্জস্যপূর্ণ। সিরিয়ালাইজড, একটি SDP অবজেক্ট এই মত দেখায়:

v=0
o=- 3883943731 1 IN IP4 127.0.0.1
s=
t=0 0
a=group:BUNDLE audio video
m=audio 1 RTP/SAVPF 103 104 0 8 106 105 13 126

// ...

a=ssrc:2223794119 label:H4fjnMzxy3dPIgQ7HxuCTLb4wLLLeRHnFxh810

নেটওয়ার্ক এবং মিডিয়া তথ্যের অধিগ্রহণ এবং বিনিময় একযোগে করা যেতে পারে, তবে সমবয়সীদের মধ্যে অডিও এবং ভিডিও স্ট্রিমিং শুরু করার আগে উভয় প্রক্রিয়া অবশ্যই সম্পন্ন করা উচিত।

পূর্বে বর্ণিত অফার/উত্তর আর্কিটেকচারটিকে জাভাস্ক্রিপ্ট সেশন এস্টাব্লিশমেন্ট প্রোটোকল বা JSEP বলা হয়। (এরিকসনের প্রথম WebRTC বাস্তবায়নের জন্য এরিকসনের ডেমো ভিডিওতে সিগন্যালিং এবং স্ট্রিমিংয়ের প্রক্রিয়া ব্যাখ্যা করে একটি চমৎকার অ্যানিমেশন রয়েছে।)

একবার সিগন্যালিং প্রক্রিয়া সফলভাবে সম্পন্ন হলে, ডেটা সরাসরি পিয়ার টু পিয়ার, কলার এবং কলির মধ্যে স্ট্রিম করা যেতে পারে - অথবা, যদি এটি ব্যর্থ হয়, একটি মধ্যস্থতাকারী রিলে সার্ভারের মাধ্যমে (পরে সে সম্পর্কে আরও)। স্ট্রিমিং হল RTCPeerConnection এর কাজ।

RTCPeerConnection

RTCPeerConnection হল WebRTC উপাদান যা সহকর্মীদের মধ্যে স্ট্রিমিং ডেটার স্থিতিশীল এবং দক্ষ যোগাযোগ পরিচালনা করে।

নিচের একটি WebRTC আর্কিটেকচার ডায়াগ্রাম যা RTCPeerConnection এর ভূমিকা দেখায়। আপনি লক্ষ্য করবেন, সবুজ অংশ জটিল!

জাভাস্ক্রিপ্টের দৃষ্টিকোণ থেকে, এই ডায়াগ্রাম থেকে বোঝার প্রধান জিনিস হল যে RTCPeerConnection ওয়েব ডেভেলপারদের অগণিত জটিলতা থেকে রক্ষা করে যা নীচে লুকিয়ে থাকে। WebRTC দ্বারা ব্যবহৃত কোডেক এবং প্রোটোকলগুলি রিয়েল-টাইম যোগাযোগ সম্ভব করতে প্রচুর পরিমাণে কাজ করে, এমনকি অবিশ্বস্ত নেটওয়ার্কগুলিতেও:

• প্যাকেট-ক্ষতি গোপন
• প্রতিধ্বনি বাতিল
• ব্যান্ডউইথ অভিযোজন
• ডায়নামিক জিটার বাফারিং
• স্বয়ংক্রিয় লাভ নিয়ন্ত্রণ
• শব্দ হ্রাস এবং দমন
• ইমেজ-পরিষ্কার

পূর্ববর্তী W3C কোডটি একটি সংকেত দৃষ্টিকোণ থেকে WebRTC-এর একটি সরলীকৃত উদাহরণ দেখায়। নিচে দুটি কার্যকরী WebRTC অ্যাপের ওয়াকথ্রু রয়েছে। প্রথমটি হল RTCPeerConnection প্রদর্শনের জন্য একটি সহজ উদাহরণ এবং দ্বিতীয়টি হল একটি সম্পূর্ণ কার্যকরী ভিডিও চ্যাট ক্লায়েন্ট।

সার্ভার ছাড়া RTCPeerConnection

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

এই উদাহরণে, pc1 স্থানীয় পিয়ার (কলার) এবং pc2 রিমোট পিয়ার (ক্যালি) প্রতিনিধিত্ব করে।

আহ্বানকারী

1. একটি নতুন RTCPeerConnection তৈরি করুন এবং getUserMedia() থেকে স্ট্রীম যোগ করুন : ```js // সার্ভার একটি ঐচ্ছিক কনফিগারেশন ফাইল। (পরে টার্ন এবং STUN আলোচনা দেখুন।) pc1 = নতুন RTCPeerConnection(সার্ভার); // ... localStream.getTracks().forEach((track) => { pc1.addTrack(track, localStream); });

1. একটি অফার তৈরি করুন এবং এটিকে pc1 এর জন্য স্থানীয় বিবরণ এবং pc2 এর জন্য দূরবর্তী বিবরণ হিসাবে সেট করুন। এটি সিগন্যালিং ব্যবহার না করে সরাসরি কোডে করা যেতে পারে কারণ কলার এবং কলকারী উভয়ই একই পৃষ্ঠায় রয়েছে: js pc1.setLocalDescription(desc).then(() => { onSetLocalSuccess(pc1); }, onSetSessionDescriptionError ); trace('pc2 setRemoteDescription start'); pc2.setRemoteDescription(desc).then(() => { onSetRemoteSuccess(pc2); }, onSetSessionDescriptionError );

যাকে কল করছি

1. pc2 তৈরি করুন এবং, যখন pc1 থেকে স্ট্রিম যোগ করা হয়, এটি একটি ভিডিও উপাদানে প্রদর্শন করুন: js pc2 = new RTCPeerConnection(servers); pc2.ontrack = gotRemoteStream; //... function gotRemoteStream(e){ vid2.srcObject = e.stream; }

RTCPeerConnection API প্লাস সার্ভার

বাস্তব জগতে, WebRTC-এর সার্ভার প্রয়োজন, যতই সহজ, তাই নিম্নলিখিতগুলি ঘটতে পারে:

• ব্যবহারকারীরা একে অপরকে আবিষ্কার করে এবং বাস্তব-বিশ্বের বিবরণ, যেমন নাম বিনিময় করে।
• WebRTC ক্লায়েন্ট অ্যাপস (পিয়ার) নেটওয়ার্ক তথ্য বিনিময় করে।
• সহকর্মীরা মিডিয়া সম্পর্কে ডেটা বিনিময় করে, যেমন ভিডিও ফর্ম্যাট এবং রেজোলিউশন।
• WebRTC ক্লায়েন্ট অ্যাপগুলি NAT গেটওয়ে এবং ফায়ারওয়াল অতিক্রম করে।

অন্য কথায়, WebRTC এর চার ধরনের সার্ভার-সাইড কার্যকারিতা প্রয়োজন:

• ব্যবহারকারীর আবিষ্কার এবং যোগাযোগ
• সংকেত
• NAT/ফায়ারওয়াল ট্রাভার্সাল
• পিয়ার-টু-পিয়ার যোগাযোগ ব্যর্থ হলে রিলে সার্ভার

NAT ট্রাভার্সাল, পিয়ার-টু-পিয়ার নেটওয়ার্কিং এবং ব্যবহারকারীর আবিষ্কার এবং সিগন্যালিংয়ের জন্য একটি সার্ভার অ্যাপ তৈরির প্রয়োজনীয়তা এই নিবন্ধের সুযোগের বাইরে। বলাই যথেষ্ট যে STUN প্রোটোকল এবং এর এক্সটেনশন, টার্ন , আইসিই ফ্রেমওয়ার্ক ব্যবহার করে RTCPeerConnection NAT ট্রাভার্সাল এবং অন্যান্য নেটওয়ার্ক অস্পষ্টতার সাথে মোকাবিলা করতে সক্ষম করতে।

আইসিই হল সমবয়সীদের সাথে সংযোগ করার জন্য একটি কাঠামো, যেমন দুটি ভিডিও চ্যাট ক্লায়েন্ট। প্রাথমিকভাবে, ICE UDP-এর মাধ্যমে সর্বনিম্ন সম্ভাব্য বিলম্বের সাথে সহকর্মীদের সরাসরি সংযোগ করার চেষ্টা করে। এই প্রক্রিয়ায়, STUN সার্ভারগুলির একটি একক কাজ রয়েছে: একটি NAT-এর পিছনে একটি পিয়ারকে তার সর্বজনীন ঠিকানা এবং পোর্ট খুঁজে বের করতে সক্ষম করা৷ (STUN এবং TURN সম্পর্কে আরও তথ্যের জন্য, WebRTC অ্যাপের জন্য প্রয়োজনীয় ব্যাকএন্ড পরিষেবা তৈরি করুন দেখুন।)

UDP ব্যর্থ হলে, ICE TCP চেষ্টা করে। যদি সরাসরি সংযোগ ব্যর্থ হয় - বিশেষ করে এন্টারপ্রাইজ NAT ট্রাভার্সাল এবং ফায়ারওয়ালের কারণে - ICE একটি মধ্যস্থতাকারী (রিলে) টার্ন সার্ভার ব্যবহার করে। অন্য কথায়, ICE প্রথমে UDP-এর সাথে STUN ব্যবহার করে সরাসরি সমবয়সীদের সাথে সংযোগ স্থাপন করে এবং যদি তা ব্যর্থ হয়, তাহলে একটি টার্ন রিলে সার্ভারে ফিরে যায়। প্রার্থীদের খুঁজে বের করার অভিব্যক্তি নেটওয়ার্ক ইন্টারফেস এবং পোর্ট খোঁজার প্রক্রিয়াকে বোঝায়।

WebRTC প্রকৌশলী জাস্টিন উবারটি 2013 Google I/O WebRTC উপস্থাপনায় ICE, STUN এবং টার্ন সম্পর্কে আরও তথ্য প্রদান করেছেন। (প্রেজেন্টেশন স্লাইডগুলি টার্ন এবং STUN সার্ভার বাস্তবায়নের উদাহরণ দেয়।)

একটি সাধারণ ভিডিও-চ্যাট ক্লায়েন্ট

WebRTC চেষ্টা করার একটি ভাল জায়গা, একটি STUN সার্ভার ব্যবহার করে সিগন্যালিং এবং NAT/ফায়ারওয়াল ট্রাভার্সাল সহ সম্পূর্ণ, হল appr.tc- এ ভিডিও-চ্যাট ডেমো। এই অ্যাপটি adapter.js ব্যবহার করে, একটি শিম অ্যাপগুলিকে বিশেষ পরিবর্তন এবং উপসর্গের পার্থক্য থেকে দূরে রাখতে।

কোডটি তার লগিংয়ে ইচ্ছাকৃতভাবে ভারবোস। ইভেন্টের ক্রম বুঝতে কনসোল চেক করুন. নিম্নলিখিত কোডের একটি বিস্তারিত ওয়াকথ্রু।

নেটওয়ার্ক টপোলজিস

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

অনেক বিদ্যমান WebRTC অ্যাপ্লিকেশানগুলি শুধুমাত্র ওয়েব ব্রাউজারগুলির মধ্যে যোগাযোগ প্রদর্শন করে, কিন্তু গেটওয়ে সার্ভারগুলি একটি ব্রাউজারে চলমান একটি WebRTC অ্যাপ্লিকেশানকে টেলিফোন ( PSTN নামেও পরিচিত) এবং VOIP সিস্টেমের মতো ডিভাইসগুলির সাথে যোগাযোগ করতে সক্ষম করতে পারে৷ 2012 সালের মে মাসে, Doubango Telecom ওপেন সোর্স sipml5 SIP ক্লায়েন্ট তৈরি করেছে WebRTC এবং WebSocket, যা (অন্যান্য সম্ভাব্য ব্যবহারের মধ্যে) iOS এবং Android এ চলমান ব্রাউজার এবং অ্যাপগুলির মধ্যে ভিডিও কল করতে সক্ষম করে। Google I/O তে, Tethr এবং Tropo WebRTC-এর মাধ্যমে ফিচার ফোন এবং কম্পিউটারের মধ্যে যোগাযোগ সক্ষম করতে OpenBTS সেল ব্যবহার করে একটি ব্রিফকেসে দুর্যোগ যোগাযোগের জন্য একটি কাঠামো প্রদর্শন করেছে। বাহক ছাড়া টেলিফোন যোগাযোগ!

RTCDataChannel API<

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

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

API এর জন্য অনেক সম্ভাব্য ব্যবহারের ক্ষেত্রে রয়েছে, যার মধ্যে রয়েছে:

• গেমিং
• দূরবর্তী ডেস্কটপ অ্যাপ্লিকেশন
• রিয়েল-টাইম টেক্সট চ্যাট
• ফাইল স্থানান্তর
• বিকেন্দ্রীভূত নেটওয়ার্ক

RTCPeerConnection এর সর্বোচ্চ ব্যবহার করতে এবং শক্তিশালী এবং নমনীয় পিয়ার-টু-পিয়ার যোগাযোগ সক্ষম করতে API-এর বেশ কিছু বৈশিষ্ট্য রয়েছে:

• RTCPeerConnection সেশন সেটআপের সুবিধা
• অগ্রাধিকার সহ একাধিক যুগপত চ্যানেল
• নির্ভরযোগ্য এবং অবিশ্বস্ত ডেলিভারি শব্দার্থবিদ্যা
• অন্তর্নির্মিত নিরাপত্তা (DTLS) এবং যানজট নিয়ন্ত্রণ
• অডিও বা ভিডিও সহ বা ছাড়া ব্যবহার করার ক্ষমতা

সিনট্যাক্স ইচ্ছাকৃতভাবে একটি send() পদ্ধতি এবং একটি message ইভেন্ট সহ WebSocket এর অনুরূপ:

const localConnection = new RTCPeerConnection(servers);
const remoteConnection = new RTCPeerConnection(servers);
const sendChannel =
  localConnection.createDataChannel('sendDataChannel');

// ...

remoteConnection.ondatachannel = (event) => {
  receiveChannel = event.channel;
  receiveChannel.onmessage = onReceiveMessage;
  receiveChannel.onopen = onReceiveChannelStateChange;
  receiveChannel.onclose = onReceiveChannelStateChange;
};

function onReceiveMessage(event) {
  document.querySelector("textarea#send").value = event.data;
}

document.querySelector("button#send").onclick = () => {
  var data = document.querySelector("textarea#send").value;
  sendChannel.send(data);
};

যোগাযোগ সরাসরি ব্রাউজারগুলির মধ্যে ঘটে, তাই RTCDataChannel ওয়েবসকেটের চেয়ে অনেক দ্রুত হতে পারে এমনকি যদি ফায়ারওয়াল এবং NATs ব্যর্থ হওয়ার জন্য হোল-পাঞ্চিং করার সময় একটি রিলে (টার্ন) সার্ভারের প্রয়োজন হয়।

RTCDataChannel Chrome, Safari, Firefox, Opera, এবং Samsung ইন্টারনেটে উপলব্ধ। কিউব স্ল্যাম গেমটি গেমের অবস্থার সাথে যোগাযোগ করতে API ব্যবহার করে। বন্ধু বা ভাল্লুক খেলা! উদ্ভাবনী প্ল্যাটফর্ম Sharefest RTCDataChannel এবং peerCDN এর মাধ্যমে ফাইল শেয়ারিং সক্ষম করে WebRTC কীভাবে পিয়ার-টু-পিয়ার সামগ্রী বিতরণ সক্ষম করতে পারে তার একটি আভাস দিয়েছে।

RTCDataChannel সম্পর্কে আরও তথ্যের জন্য, IETF-এর ড্রাফ্ট প্রোটোকল স্পেকটি দেখুন।

নিরাপত্তা

রিয়েল-টাইম কমিউনিকেশন অ্যাপ বা প্লাগইন নিরাপত্তার সাথে আপস করতে পারে এমন বিভিন্ন উপায় রয়েছে। উদাহরণ স্বরূপ:

• আনএনক্রিপ্ট করা মিডিয়া বা ডেটা ব্রাউজারগুলির মধ্যে বা একটি ব্রাউজার এবং একটি সার্ভারের মধ্যে আটকানো হতে পারে।
• একটি অ্যাপ ব্যবহারকারীর অজান্তেই ভিডিও বা অডিও রেকর্ড ও বিতরণ করতে পারে।
• ম্যালওয়্যার বা ভাইরাস একটি দৃশ্যত নিরীহ প্লাগইন বা অ্যাপের পাশাপাশি ইনস্টল করা হতে পারে।

এই সমস্যাগুলি এড়াতে WebRTC এর বেশ কিছু বৈশিষ্ট্য রয়েছে:

• WebRTC বাস্তবায়ন নিরাপদ প্রোটোকল ব্যবহার করে, যেমন DTLS এবং SRTP ।
• সিগন্যালিং মেকানিজম সহ সমস্ত WebRTC উপাদানগুলির জন্য এনক্রিপশন বাধ্যতামূলক৷
• WebRTC একটি প্লাগইন নয়। এর উপাদানগুলি ব্রাউজার স্যান্ডবক্সে চলে এবং আলাদা প্রক্রিয়ায় নয়। উপাদানগুলির আলাদা ইনস্টলেশনের প্রয়োজন হয় না এবং যখনই ব্রাউজার আপডেট করা হয় তখন আপডেট করা হয়।
• ক্যামেরা এবং মাইক্রোফোন অ্যাক্সেস অবশ্যই স্পষ্টভাবে মঞ্জুর করা উচিত এবং, যখন ক্যামেরা বা মাইক্রোফোন চলছে, এটি ব্যবহারকারী ইন্টারফেস দ্বারা স্পষ্টভাবে দেখানো হয়।

স্ট্রিমিং মিডিয়ার নিরাপত্তার সম্পূর্ণ আলোচনা এই নিবন্ধের সুযোগের বাইরে। আরও তথ্যের জন্য, IETF দ্বারা প্রস্তাবিত WebRTC নিরাপত্তা স্থাপত্য দেখুন।

উপসংহারে

WebRTC-এর API এবং মানগুলি টেলিফোনি, গেমিং, ভিডিও উত্পাদন, সঙ্গীত তৈরি এবং সংবাদ সংগ্রহ সহ সামগ্রী তৈরি এবং যোগাযোগের জন্য সরঞ্জামগুলিকে গণতান্ত্রিক এবং বিকেন্দ্রীকরণ করতে পারে৷

প্রযুক্তি এর চেয়ে বেশি বিঘ্নিত করে না।

ব্লগার ফিল এডহোম যেমন লিখেছেন , "সম্ভাব্যভাবে, WebRTC এবং HTML5 রিয়েল-টাইম যোগাযোগের জন্য একই রূপান্তর সক্ষম করতে পারে যা মূল ব্রাউজার তথ্যের জন্য করেছিল।"

ডেভেলপার টুলস

• একটি চলমান অধিবেশনের জন্য WebRTC পরিসংখ্যান এখানে পাওয়া যাবে:
  • Chrome-এ://webrtc-internals সম্পর্কে
  • অপেরায় opera://webrtc-internals
  • সম্পর্কে: ফায়ারফক্সে webrtc

    

• ক্রস ব্রাউজার ইন্টারপ নোট
• adapter.js হল WebRTC-এর জন্য একটি JavaScript শিম যা WebRTC সম্প্রদায়ের সাহায্যে Google দ্বারা রক্ষণাবেক্ষণ করে যা বিক্রেতা উপসর্গ, ব্রাউজার পার্থক্য এবং বিশেষ পরিবর্তনগুলিকে বিমূর্ত করে।
• WebRTC সিগন্যালিং প্রক্রিয়া সম্পর্কে আরও জানতে, কনসোলে appr.tc লগ আউটপুট পরীক্ষা করুন।
• যদি এটি খুব বেশি হয়, আপনি একটি WebRTC ফ্রেমওয়ার্ক বা এমনকি একটি সম্পূর্ণ WebRTC পরিষেবা ব্যবহার করতে পছন্দ করতে পারেন৷
• বাগ রিপোর্ট এবং বৈশিষ্ট্য অনুরোধ সবসময় প্রশংসা করা হয়:
  • WebRTC বাগ
  • ক্রোম বাগ
  • অপেরা বাগ
  • ফায়ারফক্স বাগ
  • WebRTC ডেমো বাগ
  • Adapter.js বাগ

আরও জানুন

• Google I/O 2012-এ জাস্টিন উবারটির WebRTC সেশন
• অ্যালান বি. জনস্টন এবং ড্যানিয়েল সি. বার্নেট একটি WebRTC বইটি এখন প্রিন্ট এবং ইবুক ফর্ম্যাটে webrtcbook.com- এ তৃতীয় সংস্করণে বজায় রেখেছেন৷
• webrtc.org হল ডেমো, ডকুমেন্টেশন এবং আলোচনা সহ WebRTC-এর সমস্ত কিছুর হোম।
• আলোচনা-webrtc প্রযুক্তিগত WebRTC আলোচনার জন্য একটি Google গ্রুপ।
• @webrtc
• Google Developers Talk ডকুমেন্টেশন NAT ট্রাভার্সাল, STUN, রিলে সার্ভার এবং প্রার্থী সংগ্রহ সম্পর্কে আরও তথ্য প্রদান করে।
• GitHub-এ WebRTC
• স্ট্যাক ওভারফ্লো উত্তর খোঁজার এবং WebRTC সম্পর্কে প্রশ্ন জিজ্ঞাসা করার একটি ভাল জায়গা।

স্ট্যান্ডার্ড এবং প্রোটোকল

• WebRTC W3C সম্পাদকের খসড়া
• W3C সম্পাদকের খসড়া: মিডিয়া ক্যাপচার এবং স্ট্রীমস (এছাড়াও getUserMedia নামে পরিচিত)
• আইইটিএফ ওয়ার্কিং গ্রুপ চার্টার
• IETF WebRTC ডেটা চ্যানেল প্রোটোকল খসড়া
• IETF JSEP খসড়া
• IETF ICE জন্য প্রস্তাবিত মান
• IETF RTCWEB ওয়ার্কিং গ্রুপ ইন্টারনেট-ড্রাফ্ট: ওয়েব রিয়েল-টাইম কমিউনিকেশন ব্যবহার-কেস এবং প্রয়োজনীয়তা

WebRTC সমর্থন সারাংশ

MediaStream এবং getUserMedia APIs

• ক্রোম ডেস্কটপ 18.0.1008 এবং উচ্চতর; Android 29 এবং উচ্চতর সংস্করণের জন্য Chrome
• অপেরা 18 এবং উচ্চতর; Android 20 এবং উচ্চতরের জন্য Opera
• অপেরা 12, অপেরা মোবাইল 12 (প্রেস্টো ইঞ্জিনের উপর ভিত্তি করে)
• ফায়ারফক্স 17 এবং উচ্চতর
• Microsoft Edge 16 এবং উচ্চতর
• IOS-এ Safari 11.2 এবং উচ্চতর, এবং MacOS-এ 11.1 এবং উচ্চতর
• Android এ UC 11.8 এবং উচ্চতর
• Samsung ইন্টারনেট 4 এবং উচ্চতর

RTCPeerConnection API

• ক্রোম ডেস্কটপ 20 এবং উচ্চতর; অ্যান্ড্রয়েড 29 এবং উচ্চতরের জন্য ক্রোম (পতাকাবিহীন)
• অপেরা 18 এবং উচ্চতর (ডিফল্টরূপে চালু); Android 20 এবং উচ্চতর জন্য Opera (ডিফল্টরূপে চালু)
• ফায়ারফক্স 22 এবং উচ্চতর (ডিফল্টরূপে চালু)
• Microsoft Edge 16 এবং উচ্চতর
• IOS-এ Safari 11.2 এবং উচ্চতর, এবং MacOS-এ 11.1 এবং উচ্চতর
• Samsung ইন্টারনেট 4 এবং উচ্চতর

RTCDataChannel API

• ক্রোম 25-এ পরীক্ষামূলক সংস্করণ, কিন্তু ক্রোম 26 এবং উচ্চতর সংস্করণে আরও স্থিতিশীল (এবং ফায়ারফক্স আন্তঃক্রিয়াশীলতা সহ); Android 29 এবং উচ্চতর সংস্করণের জন্য Chrome
• অপেরা 18 এবং উচ্চতর সংস্করণে স্থিতিশীল সংস্করণ (এবং ফায়ারফক্স আন্তঃঅপারেবিলিটি সহ); Android 20 এবং উচ্চতরের জন্য Opera
• ফায়ারফক্স 22 এবং উচ্চতর (ডিফল্টরূপে চালু)

getUserMedia এবং RTCPeerConnection এর মতো API-এর জন্য ক্রস-প্ল্যাটফর্ম সমর্থন সম্পর্কে আরও বিস্তারিত তথ্যের জন্য, caniuse.com এবং Chrome প্ল্যাটফর্ম স্ট্যাটাস দেখুন।

RTCPeerConnection এর জন্য নেটিভ APIগুলি webrtc.org-এর ডকুমেন্টেশনেও পাওয়া যায়।