Firebase + + করা WebRTC Codelab

1। পরিচিতি

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

তুমি কি জানতে পারবেন

• WebRTC এর ব্যবহার করে একটি ওয়েব অ্যাপ্লিকেশন এর একটি ভিডিও কলে সূচনা
• ক্লাউড Firestore ব্যবহার করে দূরবর্তী পক্ষের কাছে সংকেত

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

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

• npm যা সাধারণত Node.js দিয়ে আসে - নোড LTS বাঞ্ছনীয়

2. তৈরি করুন এবং একটি Firebase প্রকল্পের সেট আপ

একটি Firebase প্রকল্প তৈরি করুন

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

আপনার Firebase প্রকল্পের জন্য প্রকল্প ID মনে রাখুন।

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

অ্যাপ্লিকেশন যা আপনাকে বিল্ড করতে যাচ্ছেন দুই Firebase পরিষেবা উপলব্ধ ব্যবহার ওয়েবে:

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

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

ক্লাউড Firestore সক্ষম করুন

অ্যাপ্লিকেশন চ্যাট বার্তা সংরক্ষণ করুন এবং নতুন চ্যাট বার্তা গ্রহণ করতে ক্লাউড Firestore ব্যবহার করে।

আপনি ক্লাউড Firestore সক্ষম করতে হবে:

1. Firebase কনসোল মেনুতে অধ্যায় বিকাশ, ডাটাবেজ ক্লিক করতে হয়।
2. ক্লাউড Firestore ফলকে ডেটাবেস তৈরি করে ক্লিক করুন।
3. পরীক্ষা মোডে বিকল্প স্টার্ট নির্বাচন করুন, তারপর নিরাপত্তা নিয়ম সম্পর্কে দাবিত্যাগ পড়ার পর সক্ষম করুন এ ক্লিক করুন।

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

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

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

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

নমুনা কোড firebase-আরটিসি ওয়েব ডিরেক্টরির মধ্যে ক্লোন করা উচিৎ ছিল। নিশ্চিত করুন যে আপনার কমান্ড লাইন এখন থেকে এই ডিরেক্টরি থেকে চালানো হয়:

 cd firebase-rtc-web
 

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

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

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

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 প্রকল্পের সঙ্গে আপনার app সংযুক্ত করতে হবে।

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

2. যখন বলা হবে, আপনার প্রকল্প ID নির্বাচন করুন, তারপর আপনার Firebase প্রকল্পের উপনাম দেব।

আপনি একাধিক এনভায়রনমেন্ট (উৎপাদন, উপস্থাপনকারী, ইত্যাদি) আছে যদি উপনাম দরকারী। যাইহোক, এই codelab জন্য, এর ঠিক উপনাম ব্যবহার করার অনুমতি default ।

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

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

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

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

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

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

1. HTTP আপনার অ্যাপ্লিকেশানটি খুলুন: // স্থানীয় হোস্ট: 5000।

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

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

6. একটি নতুন ঘর তৈরি করা হচ্ছে

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

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

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

 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. সংগ্রহ বরফ প্রার্থীদের

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

 async function collectIceCandidates(roomRef, peerConneciton,    
                                    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 উদাহরণস্বরূপ। এটি গুরুত্বপূর্ণ যখন শোনা ডাটাবেসের কিছু একটি নতুন সংযোজন নয় ফিল্টার করার জন্য পরিবর্তন, যেহেতু আমরা অন্যথায় বারবার বরফ প্রার্থীর একই সেট জুড়েছে এবং যেত হয়।

9. উপসংহার

এই codelab আপনি ক্লাউড Firestore ব্যবহার WebRTC এর জন্য সংকেত বাস্তবায়ন কিভাবে, সেইসাথে কিভাবে ব্যবহার করতে যে একটি সাধারণ ভিডিও চ্যাট আবেদন তৈরি করার জন্য কিছু শিখেছি।

আরো জানতে, নিম্নলিখিত সংস্থান যান:

1. FirebaseRTC সোর্স কোড
2. WebRTC এর নমুনা
3. ক্লাউড Firestore