WebRTC এর সাথে রিয়েল-টাইম যোগাযোগ সক্ষম করুন

এই কোডল্যাব সম্পর্কে

নভে ২৩, ২০২০-এ শেষবার আপডেট করা হয়েছে

Sam Dutton-এর লেখা

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

1. তুমি শুরু করার আগে

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

পূর্বশর্ত

HTML, CSS, এবং JavaScript এর প্রাথমিক জ্ঞান

আপনি কি নির্মাণ করবেন

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

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

Chrome 47 বা উচ্চতর
ক্রোমের জন্য ওয়েব সার্ভার বা আপনার পছন্দের একটি ওয়েব সার্ভার
আপনার পছন্দের একটি পাঠ্য সম্পাদক
Node.js

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

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

আপনি যদি Git এর সাথে পরিচিত হন, GitHub থেকে এই কোডল্যাবের জন্য কোড ক্লোন করতে এই কমান্ডটি চালান:

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

বিকল্পভাবে, কোডের একটি জিপ ফাইল ডাউনলোড করতে এই লিঙ্কে ক্লিক করুন:

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

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

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

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

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

আপনার কাছে Chrome এর জন্য ওয়েব সার্ভার না থাকলে, Chrome ওয়েব স্টোর থেকে এটি ইনস্টল করতে এই লিঙ্কে ক্লিক করুন:

Chrome এ যোগ করুন ক্লিক করুন, যা Chrome- এর জন্য ওয়েব সার্ভার ইনস্টল করে এবং স্বয়ংক্রিয়ভাবে আপনার Google অ্যাপগুলিকে একটি নতুন ট্যাবে খোলে৷
ওয়েব সার্ভারে ক্লিক করুন:

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

ফোল্ডার নির্বাচন করুন ক্লিক করুন।
আপনার তৈরি করা work ফোল্ডারটি নির্বাচন করুন।

ওয়েব সার্ভার URL(গুলি) এর অধীনে, আপনি URL দেখতে পাচ্ছেন যেখানে আপনি আপনার কাজ প্রগতিতে দেখতে পারেন

ক্রোম

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

আপনার ওয়েব ব্রাউজারে আপনার কাজ দেখতে ওয়েব সার্ভার URL(গুলি) এর অধীনে URL-এ ক্লিক করুন৷

আপনার এমন একটি পৃষ্ঠা দেখা উচিত যা work/index.html এর সাথে মিলে যায়:

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

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

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

HTML এর একটি ড্যাশ যোগ করুন

এই কোডটি অনুলিপি করুন এবং একটি video এবং script উপাদান যোগ করতে আপনার work ডিরেক্টরির index.html ফাইলে পেস্ট করুন:

<!DOCTYPE html>
<html>

<head>

  <title>Real-time communication with WebRTC</title>

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

</head>

<body>

  <h1>Real-time communication with WebRTC</h1>

  <video autoplay playsinline></video>

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

</body>

</html>

এক চিমটি জাভাস্ক্রিপ্ট যোগ করুন

এই কোডটি কপি করুন এবং আপনার js ফোল্ডারের main.js ফাইলে পেস্ট করুন:

'use strict';

// In this codelab, you  only stream video, not audio (video: true).
const mediaStreamConstraints = {
  video: true,
};

// The video element where the stream is displayed
const localVideo = document.querySelector('video');

// The local stream that's displayed on the video
let localStream;

// Handle success and add the MediaStream to the video element
function gotLocalMediaStream(mediaStream) {
  localStream = mediaStream;
  localVideo.srcObject = mediaStream;
}

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

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

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

আপনার ব্রাউজারে index.html ফাইলটি খুলুন এবং আপনি এইরকম কিছু দেখতে পাবেন, তবে অবশ্যই আপনার ওয়েবক্যাম থেকে দেখার সাথে:

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

getUserMedia() কলের পরে, ব্রাউজারটি আপনার ক্যামেরা অ্যাক্সেস করার অনুমতির অনুরোধ করে যদি এটি বর্তমান উত্সের জন্য ক্যামেরা অ্যাক্সেসের প্রথম অনুরোধ হয়।

সফল হলে, একটি MediaStream ফেরত দেওয়া হয়, যা একটি media উপাদান 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 অবজেক্টটি বিশ্বব্যাপী, তাই আপনি ব্রাউজার কনসোল থেকে এটি পরীক্ষা করতে পারেন। কনসোলটি খুলুন, stream, টাইপ করুন এবং Enter ( ম্যাকে Return যান)। Chrome-এ কনসোল দেখতে, Control+Shift+J (বা Mac-এ Command+Option+J ) টিপুন।
localStream.getVideoTracks() কী ফেরত দেয়?
localStream.getVideoTracks()[0].stop() কল করুন।
সীমাবদ্ধতা বস্তু তাকান. আপনি এটিকে {audio: true, video: true} এ পরিবর্তন করলে কী হবে?
ভিডিও উপাদান কি আকার? আপনি কিভাবে জাভাস্ক্রিপ্ট থেকে ভিডিওর স্বাভাবিক আকার পেতে পারেন, প্রদর্শন আকারের বিপরীতে? চেক করতে Google Chrome ডেভেলপার টুল ব্যবহার করুন।
ভিডিও উপাদানে CSS ফিল্টার যোগ করুন, এইভাবে:

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

এই মত SVG ফিল্টার যোগ করুন:

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

পরামর্শ

video উপাদানে autoplay বৈশিষ্ট্যটি ভুলবেন না। যে ছাড়া, আপনি শুধুমাত্র একটি একক ফ্রেম দেখতে!
getUserMedia() সীমাবদ্ধতার জন্য আরও অনেক বিকল্প রয়েছে। আরও উদাহরণের জন্য, WebRTC নমুনাগুলিতে সীমাবদ্ধতা এবং পরিসংখ্যান এবং আরও সীমাবদ্ধতা এবং পরিসংখ্যান দেখুন।

ভাল অভ্যাস

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

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

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

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

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

index.html ফাইলে, দুটি video এবং তিনটি button উপাদান দিয়ে একক video উপাদান প্রতিস্থাপন করুন:

<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 এর মাধ্যমে স্ট্রিম করা একই ভিডিও দেখায়। (একটি বাস্তব-বিশ্বের অ্যাপে, একটি video উপাদান স্থানীয় স্ট্রিম প্রদর্শন করবে এবং অন্যটি দূরবর্তী স্ট্রিম প্রদর্শন করবে।)

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

এই স্ক্রিপ্ট উপাদানটি অনুলিপি করুন এবং main.js এর জন্য স্ক্রিপ্ট উপাদানের উপরে পেস্ট করুন:

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

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

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

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

<!DOCTYPE html>
<html>

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

<body>
  <h1>Real-time 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 ফাইলটি খুলুন।
আপনার ওয়েবক্যাম থেকে ভিডিও পেতে শুরুতে ক্লিক করুন ।
পিয়ার সংযোগ করতে কল ক্লিক করুন

উভয় video উপাদানে আপনার ওয়েবক্যাম থেকে একই ভিডিও দেখতে হবে।

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

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

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

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

এই উদাহরণে, দুটি RTCPeerConnection অবজেক্ট একই পৃষ্ঠায় রয়েছে: pc1 এবং pc2 ।

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 পিয়ার টু পিয়ার কাজ করার জন্য ডিজাইন করা হয়েছে, যাতে ব্যবহারকারীরা সম্ভাব্য সর্বাধিক সরাসরি রুটে সংযোগ করতে পারেন। যাইহোক, WebRTC রিয়েল-ওয়ার্ল্ড নেটওয়ার্কিং এর সাথে মানিয়ে নিতে তৈরি করা হয়েছে। ক্লায়েন্ট অ্যাপ্লিকেশনগুলিকে NAT গেটওয়ে এবং ফায়ারওয়ালগুলি অতিক্রম করতে হবে এবং সরাসরি সংযোগ ব্যর্থ হলে পিয়ার-টু-পিয়ার নেটওয়ার্কিংকে ফলব্যাক করতে হবে।

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

অ্যালিস 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.');

নেটওয়ার্ক প্রার্থীরা উপলব্ধ হলে প্রথম ধাপ থেকে 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-এ Chrome URL-এর সম্পূর্ণ তালিকা খুঁজে পেতে পারেন।)

CSS দিয়ে পৃষ্ঠাটিকে স্টাইল করুন:
ভিডিওগুলো পাশাপাশি রাখুন।
বড় টেক্সট সহ বোতামগুলিকে একই প্রস্থ করুন।
লেআউট মোবাইলে কাজ করে তা নিশ্চিত করুন।
Chrome ডেভেলপার টুলস কনসোল থেকে, localStream , localPeerConnection , এবং remotePeerConnection ।
কনসোল থেকে, localPeerConnectionpc1.localDescription দেখুন।

SDP ফরম্যাট দেখতে কেমন?

পরামর্শ

adapter.js শিম সম্পর্কে আরও তথ্যের জন্য, adapter.js GitHub সংগ্রহস্থল দেখুন।
AppRTC এবং এর কোড দেখুন, WebRTC কলের জন্য WebRTC প্রকল্পের ক্যানোনিকাল অ্যাপ। কল সেটআপ সময় 500ms এর কম।

ভাল অভ্যাস

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

5. ডেটা বিনিময় করতে একটি ডেটা চ্যানেল ব্যবহার করুন

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

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

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

index.html, থেকে video এবং button উপাদানগুলি সরান এবং নিম্নলিখিত 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>

একটি টেক্সটেরিয়া হল টেক্সট এন্টার করার জন্য, অন্যটি হল টেক্সটকে textarea মধ্যে স্ট্রিম করা টেক্সট দেখানোর জন্য।

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

<!DOCTYPE html>
<html>

<head>

  <title>Real-time communication with WebRTC</title>

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

</head>

<body>

  <h1>Real-time 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 এর সিনট্যাক্স ইচ্ছাকৃতভাবে একটি send() পদ্ধতি এবং একটি message ইভেন্ট সহ WebSocket-এর মতো।

dataConstraint এর ব্যবহার লক্ষ্য করুন। ডেটা চ্যানেলগুলিকে বিভিন্ন ধরনের ডেটা শেয়ারিং সক্ষম করতে কনফিগার করা যেতে পারে, যেমন পারফরম্যান্সের চেয়ে নির্ভরযোগ্য বিতরণকে অগ্রাধিকার দেওয়া।

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

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

আরও খোঁজ

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

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

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

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

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

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

দ্রষ্টব্য: এই কোডল্যাব একটি সিগন্যালিং সার্ভারের জন্য 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>Real-time communication with WebRTC</title>

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

</head>

<body>

  <h1>Real-time communication with WebRTC</h1>

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

</html>

আপনি এই ধাপে পৃষ্ঠায় কিছু দেখতে পাবেন না। সমস্ত লগিং ব্রাউজার কনসোলে সম্পন্ন করা হয়। Chrome-এ কনসোল দেখতে, Control+Shift+J (বা Mac-এ 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>

আপনার work ডিরেক্টরির শীর্ষ স্তরে, নিম্নলিখিত বিষয়বস্তু সহ 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 , আপনার work ডিরেক্টরিতে কমান্ড-লাইন টার্মিনাল থেকে নিম্নলিখিতটি চালান:

npm install

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

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

আপনার work ডিরেক্টরির শীর্ষ স্তরে একটি নতুন ফাইল 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);
        }
      });
    }
  });

});

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

node index.js

আপনার ব্রাউজার থেকে, http://localhost:8080 এ নেভিগেট করুন।

প্রতিবার যখন আপনি এই URL-এ নেভিগেট করবেন, আপনাকে একটি রুমের নাম লিখতে বলা হবে৷

একই রুমে যোগ দিতে, প্রতিবার একই রুমের নাম লিখুন, যেমন foo ।

একটি নতুন ট্যাব খুলুন আবার http://localhost:8080- এ নেভিগেট করুন এবং একই রুমের নাম আবার লিখুন।
আরেকটি নতুন ট্যাব খুলুন, আবার http://localhost:8080- এ নেভিগেট করুন এবং একই রুমের নাম আবার লিখুন।
প্রতিটি ট্যাবে কনসোল চেক করুন।

আপনি জাভাস্ক্রিপ্ট থেকে লগিং দেখতে হবে.

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

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

আরও খোঁজ

7. পিয়ার কানেকশন এবং সিগন্যালিং একত্রিত করুন

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

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

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

<!DOCTYPE html>
<html>

<head>

  <title>Real-time communication with WebRTC</title>

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

</head>

<body>

  <h1>Real-time 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 সার্ভার চালান

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

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

npm install

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

node index.js

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

আপনার ব্রাউজার থেকে, http://localhost:8080-এ নেভিগেট করুন।
একটি নতুন ট্যাব খুলুন এবং আবার http://localhost:8080-এ নেভিগেট করুন।

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

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

স্কোর bঅনুস পয়েন্ট

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

পরামর্শ

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

Control টিপুন এবং এই পৃষ্ঠাটি পুনরায় লোড করুন ক্লিক করুন।
ব্রাউজার রিস্টার্ট করুন।
কমান্ড লাইন থেকে npm cache clean চালান।

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

এই ধাপের একটি সম্পূর্ণ সংস্করণ step-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 the 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 approximately 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 applicable.
  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');
  // The trail is the element that holds 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);
}

কোড পান

step-06 এর বিষয়বস্তু দিয়ে আপনার work ফোল্ডারের বিষয়বস্তু প্রতিস্থাপন করুন।

আপনার index.html ফাইলটি এখন এইরকম দেখতে work **:**

<!DOCTYPE html>
<html>

<head>

  <title>Real-time communication with WebRTC</title>

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

</head>

<body>

  <h1>Real-time 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>

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

npm install

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

node index.js

    Make sure that you're using the version of `index.js` that implements Socket.IO and

আপনি যদি পরিবর্তন করেন তাহলে আপনার Node.js সার্ভার পুনরায় চালু করতে ভুলবেন না।

Node এবং Socket.IO সম্পর্কে আরও তথ্যের জন্য, একটি সিগন্যালিং সেট আপ করুন বিভাগটি পর্যালোচনা করুন

বার্তা বিনিময় পরিষেবা।

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

অ্যাপটি একটি র্যান্ডম রুম আইডি তৈরি করে এবং ইউআরএলে আইডি যোগ করে।

একটি নতুন ব্রাউজার ট্যাব বা উইন্ডোতে ঠিকানা বার থেকে URL খুলুন.
Snap & Send এ ক্লিক করুন, তারপর পৃষ্ঠার নীচে অন্য ট্যাবে ইনকামিং ফটোগুলি দেখুন৷

অ্যাপটি ট্যাবের মধ্যে ফটো স্থানান্তর করে।

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

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

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

আরও খোঁজ

9. অভিনন্দন

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

আরও জানুন

webrtc.org/start

ফিরে যানপরবর্তী

কোনও সমস্যার ব্যাপারে অভিযোগ জানান

WebRTC এর সাথে রিয়েল-টাইম যোগাযোগ সক্ষম করুন

এই কোডল্যাব সম্পর্কে

পূর্বশর্ত

আপনি কি নির্মাণ করবেন

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

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

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

HTML এর একটি ড্যাশ যোগ করুন

এক চিমটি জাভাস্ক্রিপ্ট যোগ করুন

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

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

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

পরামর্শ

ভাল অভ্যাস

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

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

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

কল করুন

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

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

পরামর্শ

ভাল অভ্যাস

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

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

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

আরও খোঁজ

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

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

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

আরও খোঁজ

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

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

স্কোর b****অনুস পয়েন্ট

পরামর্শ

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

কোড পান

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

আরও খোঁজ

আরও জানুন

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

স্কোর bঅনুস পয়েন্ট