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

1। পরিচিতি

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. ফায়ারবেস কনসোল মেনুর বিকাশ বিভাগে, ডেটাবেস ক্লিক করুন।
2. ক্লাউড Firestore ফলকে ডেটাবেস তৈরি করে ক্লিক করুন।
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. যাচাই করুন যে, CLI সঠিকভাবে ইনস্টল করা হয়েছে নিম্নলিখিত কমান্ডটি ব্যবহার করে: sh firebase --version

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

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

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

1. নিম্নলিখিত কমান্ডের দ্বারা আপনার Firebase প্রকল্পের সঙ্গে আপনার app সংযুক্ত: sh firebase use --add

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

আপনার একাধিক পরিবেশ (উৎপাদন, মঞ্চায়ন, ইত্যাদি) থাকলে একটি উপনাম দরকারী। যাইহোক, এই codelab জন্য, এর ঠিক উপনাম ব্যবহার করার অনুমতি 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 উভয় অফার ও উত্তর, সেইসাথে প্রত্যেক দলের থেকে বরফ প্রার্থীদের সঙ্গে দুটি পৃথক সংগ্রহের জন্য।

আপনার প্রথম কাজ হল কলার থেকে প্রাথমিক অফার সহ একটি নতুন রুম তৈরি করার জন্য অনুপস্থিত কোডটি বাস্তবায়ন করা। ওপেন 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);
    }
});

যতক্ষণ না callee লিখেছেন এই অপেক্ষা করবে 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 আহ্বানকারী পাশ কলব্যাক, যেটা ঘুরে ফিরে callee থেকে উত্তর ভিত্তিক দূরবর্তী বিবরণ সেট হবে। এই বিনিময় সমাপ্ত RTCSessionDescription আহ্বানকারী এবং callee মধ্যে অবজেক্ট।

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());
                peerConneciton.addIceCandidate(candidate);
            }
        });
    })
}

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

9. উপসংহার

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

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

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