ফায়ারবেস + ওয়েবআরটিসি কোডল্যাব

1। পরিচিতি

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

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

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

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

এই কোডল্যাব শুরু করার আগে, আপনি ইনস্টল করেছেন তা নিশ্চিত করুন:

• npm যা সাধারণত Node.js-এর সাথে আসে - Node LTS বাঞ্ছনীয়

2. একটি ফায়ারবেস প্রকল্প তৈরি এবং সেট আপ করুন৷

একটি ফায়ারবেস প্রকল্প তৈরি করুন

1. Firebase কনসোলে , প্রকল্প যোগ করুন ক্লিক করুন, তারপর Firebase প্রকল্পের নাম FirebaseRTC দিন।

আপনার ফায়ারবেস প্রকল্পের জন্য প্রকল্প আইডি মনে রাখুন।

1. প্রকল্প তৈরি করুন ক্লিক করুন।

আপনি যে অ্যাপ্লিকেশনটি তৈরি করতে যাচ্ছেন সেটি ওয়েবে উপলব্ধ দুটি ফায়ারবেস পরিষেবা ব্যবহার করে:

• ক্লাউড ফায়ারস্টোর ক্লাউডে স্ট্রাকচার্ড ডেটা সংরক্ষণ করতে এবং ডেটা আপডেট হলে তাৎক্ষণিক বিজ্ঞপ্তি পেতে
• আপনার স্ট্যাটিক সম্পদ হোস্ট এবং পরিবেশন করার জন্য Firebase হোস্টিং

এই নির্দিষ্ট কোডল্যাবের জন্য, আপনি যে প্রজেক্টটি ক্লোনিং করবেন সেখানে আপনি ইতিমধ্যেই Firebase হোস্টিং কনফিগার করেছেন। যাইহোক, ক্লাউড ফায়ারস্টোরের জন্য, আমরা আপনাকে Firebase কনসোল ব্যবহার করে পরিষেবাগুলির কনফিগারেশন এবং সক্ষম করার মাধ্যমে নিয়ে যাব।

ক্লাউড ফায়ারস্টোর সক্ষম করুন

অ্যাপটি চ্যাট মেসেজ সেভ করতে এবং নতুন চ্যাট মেসেজ পেতে ক্লাউড ফায়ারস্টোর ব্যবহার করে।

আপনাকে ক্লাউড ফায়ারস্টোর সক্ষম করতে হবে:

1. ফায়ারবেস কনসোল মেনুর বিকাশ বিভাগে, ডেটাবেস ক্লিক করুন।
2. ক্লাউড ফায়ারস্টোর ফলকে ডেটাবেস তৈরি করুন ক্লিক করুন।
3. স্টার্ট ইন টেস্ট মোড বিকল্পটি নির্বাচন করুন, তারপর নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ার পরে সক্ষম করুন ক্লিক করুন।

টেস্ট মোড নিশ্চিত করে যে আপনি বিকাশের সময় অবাধে ডাটাবেসে লিখতে পারেন। আমরা পরবর্তীতে এই কোডল্যাবে আমাদের ডাটাবেসকে আরও সুরক্ষিত করে তুলব।

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

কমান্ড লাইন থেকে GitHub সংগ্রহস্থল ক্লোন করুন:

git clone https://github.com/webrtc/FirebaseRTC

নমুনা কোডটি FirebaseRTC ডিরেক্টরিতে ক্লোন করা উচিত ছিল। আপনার কমান্ড লাইন এখন থেকে এই ডিরেক্টরি থেকে চালানো হয় তা নিশ্চিত করুন:

cd FirebaseRTC

স্টার্টার অ্যাপ আমদানি করুন

আপনার সম্পাদকের FirebaseRTC এ ফাইলগুলি খুলুন এবং নীচের নির্দেশাবলী অনুসারে সেগুলি পরিবর্তন করুন৷ এই ডিরেক্টরিতে কোডল্যাবের প্রারম্ভিক কোড রয়েছে যা একটি এখনও কার্যকরী নয় এমন WebRTC অ্যাপ নিয়ে গঠিত। আমরা এই কোডল্যাব জুড়ে এটি কার্যকরী করব।

4. ফায়ারবেস কমান্ড লাইন ইন্টারফেস ইনস্টল করুন

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

1. নিম্নলিখিত npm কমান্ডটি চালিয়ে CLI ইনস্টল করুন: sh npm -g install firebase-tools করুন

1. নিম্নলিখিত কমান্ডটি চালিয়ে সিএলআই সঠিকভাবে ইনস্টল করা হয়েছে কিনা তা যাচাই করুন: sh firebase --version

নিশ্চিত করুন যে Firebase CLI-এর সংস্করণটি v6.7.1 বা তার পরের।

1. নিম্নলিখিত কমান্ডটি চালিয়ে Firebase CLI অনুমোদন করুন: sh firebase login

আপনি আপনার অ্যাপের স্থানীয় ডিরেক্টরি এবং ফাইল থেকে Firebase হোস্টিংয়ের জন্য আপনার অ্যাপের কনফিগারেশন টানতে ওয়েব অ্যাপ টেমপ্লেট সেট আপ করেছেন। কিন্তু এটি করার জন্য, আপনাকে আপনার অ্যাপটিকে আপনার Firebase প্রকল্পের সাথে সংযুক্ত করতে হবে।

1. নিম্নলিখিত কমান্ডটি চালিয়ে আপনার ফায়ারবেস প্রকল্পের সাথে আপনার অ্যাপটিকে সংযুক্ত করুন: sh firebase use --add

2. প্রম্পট করা হলে, আপনার প্রোজেক্ট আইডি সিলেক্ট করুন, তারপর আপনার ফায়ারবেস প্রোজেক্টকে একটি উপনাম দিন।

আপনার একাধিক পরিবেশ (উৎপাদন, মঞ্চায়ন, ইত্যাদি) থাকলে একটি উপনাম দরকারী। যাইহোক, এই কোডল্যাবের জন্য, default উপনাম ব্যবহার করা যাক।

1. আপনার কমান্ড লাইনে অবশিষ্ট নির্দেশাবলী অনুসরণ করুন।

5. স্থানীয় সার্ভার চালান

আপনি আসলে আমাদের অ্যাপে কাজ শুরু করতে প্রস্তুত! এর স্থানীয়ভাবে অ্যাপ চালানো যাক!

1. নিম্নলিখিত Firebase CLI কমান্ডটি চালান: sh firebase serve --only hosting

2. আপনার কমান্ড লাইন নিম্নলিখিত প্রতিক্রিয়া প্রদর্শন করা উচিত: hosting: Local server: http://localhost:5000

আমরা স্থানীয়ভাবে আমাদের অ্যাপ পরিবেশন করতে Firebase হোস্টিং এমুলেটর ব্যবহার করছি। ওয়েব অ্যাপটি এখন http://localhost:5000 থেকে পাওয়া উচিত।

1. http://localhost:5000 এ আপনার অ্যাপ খুলুন।

আপনার FirebaseRTC এর কপি দেখতে হবে যা আপনার Firebase প্রকল্পের সাথে সংযুক্ত করা হয়েছে।

অ্যাপটি স্বয়ংক্রিয়ভাবে আপনার Firebase প্রকল্পের সাথে সংযুক্ত হয়েছে।

6. একটি নতুন ঘর তৈরি করা

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

প্রতিটি কক্ষে অফার এবং উত্তর উভয়ের জন্য RTCSessionDescriptions থাকবে, সেইসাথে প্রতিটি পক্ষের ICE প্রার্থীদের সাথে দুটি পৃথক সংগ্রহ থাকবে।

আপনার প্রথম কাজ হল কলার থেকে প্রাথমিক অফার সহ একটি নতুন রুম তৈরি করার জন্য অনুপস্থিত কোডটি বাস্তবায়ন করা। public/app.js খুলুন এবং মন্তব্য খুঁজুন // Add code for creating a room here যোগ করুন এবং নিম্নলিখিত কোড যোগ করুন:

const offer = await peerConnection.createOffer();
await peerConnection.setLocalDescription(offer);

const roomWithOffer = {
    offer: {
        type: offer.type,
        sdp: offer.sdp
    }
}
const roomRef = await db.collection('rooms').add(roomWithOffer);
const roomId = roomRef.id;
document.querySelector('#currentRoom').innerText = `Current room is ${roomId} - You are the caller!`

প্রথম লাইনটি একটি RTCSessionDescription তৈরি করে যা কলারের কাছ থেকে অফারটি উপস্থাপন করবে। তারপরে এটি স্থানীয় বিবরণ হিসাবে সেট করা হয় এবং অবশেষে ক্লাউড ফায়ারস্টোরের নতুন রুম অবজেক্টে লেখা হয়।

এর পরে, আমরা ডাটাবেসের পরিবর্তনগুলি শুনব এবং সনাক্ত করব কখন কলির উত্তর যোগ করা হয়েছে।

roomRef.onSnapshot(async snapshot -> {
    console.log('Got updated room:', snapshot.data());
    const data = snapshot.data();
    if (!peerConnection.currentRemoteDescription && data.answer) {
        console.log('Set remote description: ', data.answer);
        const answer = new RTCSessionDescription(data.answer)
        await peerConnection.setRemoteDescription(answer);
    }
});

এটি অপেক্ষা করবে যতক্ষণ না কলি উত্তরটির জন্য RTCSessionDescription লেখেন, এবং সেটিকে কলকারী RTCPeerConnection এ দূরবর্তী বিবরণ হিসেবে সেট করেন।

7. একটি রুমে যোগদান

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

const offer = roomSnapshot.data().offer;
await peerConnection.setRemoteDescription(offer);
const answer = await peerConnection.createAnswer();
await peerConnection.setLocalDescription(answer);

const roomWithAnswer = {
    answer: {
        type: answer.type,
        sdp: answer.sdp
    }
}
await roomRef.update(roomWithAnswer);

উপরের কোডে, আমরা কলারের কাছ থেকে অফারটি বের করে শুরু করি এবং একটি RTCSessionDescription তৈরি করে যা আমরা দূরবর্তী বিবরণ হিসেবে সেট করি। এর পরে, আমরা উত্তর তৈরি করি, এটিকে স্থানীয় বিবরণ হিসাবে সেট করি এবং ডেটাবেস আপডেট করি। ডাটাবেসের আপডেট কলারের দিকে onSnapshot ট্রিগার করবে, যা কলীর উত্তরের উপর ভিত্তি করে দূরবর্তী বিবরণ সেট করবে। এটি কলকারী এবং কলকারীর মধ্যে RTCSessionDescription বস্তুর বিনিময় সম্পন্ন করে।

8. ICE প্রার্থীদের সংগ্রহ করুন

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

async function collectIceCandidates(roomRef, peerConnection,
                                    localName, remoteName) {
    const candidatesCollection = roomRef.collection(localName);

    peerConnection.addEventListener('icecandidate', event -> {
        if (event.candidate) {
            const json = event.candidate.toJSON();
            candidatesCollection.add(json);
        }
    });

    roomRef.collection(remoteName).onSnapshot(snapshot -> {
        snapshot.docChanges().forEach(change -> {
            if (change.type === "added") {
                const candidate = new RTCIceCandidate(change.doc.data());
                peerConnection.addIceCandidate(candidate);
            }
        });
    })
}

এই ফাংশন দুটি জিনিস করে। এটি WebRTC API থেকে ICE প্রার্থীদের সংগ্রহ করে এবং তাদের ডাটাবেসে যোগ করে এবং রিমোট পিয়ার থেকে যোগ করা ICE প্রার্থীদের কথা শোনে এবং তাদের RTCPeerConnection উদাহরণে যোগ করে। নতুন সংযোজন নয় এমন কিছু ফিল্টার করার জন্য ডাটাবেসের পরিবর্তনের কথা শোনার সময় এটি গুরুত্বপূর্ণ, কারণ আমরা অন্যথায় ICE প্রার্থীদের একই সেট বারবার যোগ করতাম।

9. উপসংহার

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

আরও জানতে, নিম্নলিখিত সংস্থানগুলি দেখুন:

1. FirebaseRTC সোর্স কোড
2. WebRTC নমুনা
3. ক্লাউড ফায়ারস্টোর