Firebase + WebRTC कोडलैब (कोड बनाना सीखना)

1. परिचय

इस कोडलैब (कोड बनाना सीखना) में, आप अपने ब्राउज़र में WebRTC API (एपीआई) का इस्तेमाल करके, आसान वीडियो चैट ऐप्लिकेशन बनाने का तरीका जानेंगे. साथ ही, इसमें सिग्नल पाने के लिए Cloud Firestore का इस्तेमाल भी किया जाएगा. इस ऐप्लिकेशन को FirebaseRTC कहा जाता है और यह एक आसान उदाहरण के रूप में काम करता है. यह आपको WebRTC की सुविधा वाले ऐप्लिकेशन बनाने की बुनियादी बातें बताएगा.

आप इन चीज़ों के बारे में जानेंगे

  • WebRTC का इस्तेमाल करके वेब ऐप्लिकेशन में वीडियो कॉल शुरू करना
  • Cloud Firestore का इस्तेमाल करके, रिमोट पार्टी में साइन इन करना

आपके पास क्या होना चाहिए

इस कोडलैब (कोड बनाना सीखना) शुरू करने से पहले, पक्का करें कि आपने इसे इंस्टॉल कर लिया है:

  • npm जिसके साथ आम तौर पर Node.js आता है - नोड LTS इस्तेमाल करने का सुझाव दिया जाता है

2. Firebase प्रोजेक्ट बनाना और सेट अप करना

Firebase प्रोजेक्ट बनाना

  1. Firebase कंसोल में, प्रोजेक्ट जोड़ें पर क्लिक करें, फिर Firebase प्रोजेक्ट को FirebaseRTC को नाम दें.

अपने Firebase प्रोजेक्ट के लिए प्रोजेक्ट आईडी को याद रखें.

  1. 'प्रोजेक्ट बनाएं' पर क्लिक करें.

आप जो ऐप्लिकेशन बनाने जा रहे हैं वह वेब पर उपलब्ध दो Firebase सेवाओं का इस्तेमाल करता है:

  • Cloud Firestore, क्लाउड पर स्ट्रक्चर्ड डेटा सेव करने के लिए और डेटा अपडेट होने पर तुरंत सूचना पाने के लिए
  • स्टैटिक एसेट को होस्ट करने और दिखाने के लिए Firebase होस्टिंग

इस खास कोडलैब के लिए, आपने पहले से ही जिस प्रोजेक्ट की क्लोनिंग की है, उसमें Firebase होस्टिंग को पहले ही कॉन्फ़िगर कर चुके हैं. हालांकि, Cloud Firestore के लिए, हम आपको Firebase कंसोल का इस्तेमाल करके सेवाओं के कॉन्फ़िगरेशन और उन्हें चालू करने का तरीका बताएंगे.

Cloud Firestore चालू करें

यह ऐप्लिकेशन, चैट मैसेज को सेव करने और नए चैट मैसेज पाने के लिए Cloud Firestore का इस्तेमाल करता है.

आपको Cloud Firestore चालू करना होगा:

  1. Firebase कंसोल मेन्यू के डेवलपमेंट सेक्शन में, डेटाबेस पर क्लिक करें.
  2. Cloud Firestore पैनल में डेटाबेस बनाएं पर क्लिक करें.
  3. टेस्ट मोड में शुरू करें विकल्प चुनें, फिर सुरक्षा नियमों के बारे में डिसक्लेमर पढ़ने के बाद 'चालू करें' पर क्लिक करें.

टेस्ट मोड यह पक्का करता है कि डेवलपमेंट के दौरान आप डेटाबेस में आसानी से लिख सकें. बाद में इस कोडलैब में हम अपने डेटाबेस को और सुरक्षित बनाएंगे.

3. सैंपल कोड पाएं

कमांड लाइन से GitHub रिपॉज़िटरी क्लोन करें:

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

सैंपल कोड को FirebaseRTC डायरेक्ट्री में क्लोन किया जाना चाहिए था. पक्का करें कि आपकी कमांड लाइन इस डायरेक्ट्री से अभी से चलाई जा रही है:

cd FirebaseRTC

स्टार्टर ऐप्लिकेशन इंपोर्ट करें

अपने एडिटर में FirebaseRTC में जाकर फ़ाइलें खोलें और उन्हें नीचे दिए गए निर्देशों के मुताबिक बदलें. इस डायरेक्ट्री में कोडलैब के लिए शुरुआती कोड है, जिसमें अभी तक काम न करने वाला WebRTC ऐप्लिकेशन है. हम इसे पूरे कोडलैब के साथ काम करेंगे.

4. Firebase कमांड लाइन इंटरफ़ेस इंस्टॉल करना

Firebase कमांड लाइन इंटरफ़ेस (CLI) की मदद से आप अपने वेब ऐप्लिकेशन को स्थानीय तौर पर दिखा सकते हैं और अपने वेब ऐप्लिकेशन को Firebase होस्टिंग पर डिप्लॉय कर सकते हैं.

  1. एनपीएम का निर्देश देकर, सीएलआई इंस्टॉल करें: sh npm -g install firebase-tools
  1. यह निर्देश देकर पुष्टि करें कि सीएलआई सही तरीके से इंस्टॉल किया गया है:sh firebase --version

पक्का करें कि Firebase CLI का वर्शन v6.7.1 या उसके बाद का वर्शन है.

  1. Firebase CLI को यह निर्देश देकर अनुमति दें: sh firebase login

आपने अपने ऐप्लिकेशन की स्थानीय डायरेक्ट्री और फ़ाइलों से Firebase होस्टिंग के लिए अपने ऐप्लिकेशन का कॉन्फ़िगरेशन पाने के लिए वेब ऐप्लिकेशन टेम्प्लेट सेट अप किया हुआ है. हालांकि, ऐसा करने के लिए आपको अपने ऐप्लिकेशन को अपने Firebase प्रोजेक्ट से जोड़ना होगा.

  1. यह निर्देश देकर, अपने ऐप्लिकेशन को Firebase प्रोजेक्ट से जोड़ें: sh firebase use --add

  2. पूछे जाने पर अपना प्रोजेक्ट आईडी चुनें, फिर Firebase प्रोजेक्ट को उपनाम दें.

अगर आपके पास एक से ज़्यादा एनवायरमेंट (प्रोडक्शन, स्टेजिंग, वगैरह) हैं, तो उपनाम उपयोगी होता है. हालांकि, इस कोडलैब के लिए default का इस्तेमाल करते हैं.

  1. अपनी कमांड लाइन में बाकी निर्देशों का पालन करें.

5. स्थानीय सर्वर चलाएं

आप हमारे ऐप्लिकेशन पर काम शुरू करने के लिए तैयार हैं! आइए, ऐप्लिकेशन को स्थानीय तौर पर चलाएं!

  1. Firebase का सीएलआई निर्देश चलाएं: sh firebase serve --only hosting

  2. आपके कमांड लाइन में यह रिस्पॉन्स दिखना चाहिए: hosting: Local server: http://localhost:5000

हम अपने ऐप्लिकेशन को स्थानीय तौर पर उपलब्ध कराने के लिए Firebase होस्टिंग एम्युलेटर का इस्तेमाल कर रहे हैं. वेब ऐप्लिकेशन अब http://localhost:5000 पर उपलब्ध होना चाहिए.

  1. http://localhost:5000 पर अपना ऐप्लिकेशन खोलें.

आपको FirebaseFirebase की अपनी कॉपी दिखेगी. यह कॉपी आपके Firebase प्रोजेक्ट से जुड़ी होगी.

यह ऐप्लिकेशन आपके Firebase प्रोजेक्ट से अपने-आप कनेक्ट हो गया है.

6. नया चैट रूम बनाया जा रहा है

इस ऐप्लिकेशन में, हर वीडियो चैट सेशन को चैट रूम कहा जाता है. उपयोगकर्ता अपने ऐप्लिकेशन में बटन पर क्लिक करके नया चैट रूम बना सकता है. इससे एक आईडी जनरेट होगा जिसका इस्तेमाल रिमोट पार्टी उसी चैट रूम में शामिल होने के लिए कर पाएगी. इस आईडी का इस्तेमाल हर कमरे के लिए Cloud 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 बनाती है जो कॉल करने वाले के ऑफ़र के बारे में बताएगी. इसके बाद, इसे स्थानीय जानकारी के तौर पर सेट किया जाता है और बाद में, Cloud Firestore में नए कमरे के ऑब्जेक्ट को लिखा जाता है.

इसके बाद, हम डेटाबेस में हुए बदलावों पर ध्यान देंगे और यह पता लगाएंगे कि कॉल करने वाले का जवाब कब जोड़ा गया.

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 में शामिल होने वाले उम्मीदवारों की जानकारी इकट्ठा करें

इससे पहले कि कॉलर और कॉल करने वाला एक-दूसरे से कनेक्ट हो सकें, उन्हें 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 से ICE उम्मीदवारों को इकट्ठा करता है और उन्हें डेटाबेस में जोड़ता है. साथ ही, रिमोट पीयर से जोड़े गए आईसीई उम्मीदवारों को सुनता है और उन्हें अपने RTCPeerConnection इंस्टेंस में जोड़ता है. डेटाबेस में होने वाले बदलावों को सुनते समय यह ज़रूरी है कि उनमें से ऐसा कोई भी फ़िल्टर हटा दें जो कोई नया बदलाव नहीं है. ऐसा इसलिए है, क्योंकि आम तौर पर हम ICE में इस्तेमाल होने वाले उम्मीदवारों का एक ही सेट जोड़ते थे.

9. नतीजा

इस कोडलैब में आपने CloudFirestore का इस्तेमाल करके WebRTC की सिग्नल को लागू करने का तरीका बताया है. साथ ही, एक आसान वीडियो चैट ऐप्लिकेशन बनाने के लिए, इसका इस्तेमाल करना भी सीख सकते हैं.

ज़्यादा जानने के लिए, इन संसाधनों पर जाएं:

  1. FirebaseRTC स्रोत कोड
  2. WebRTC के नमूने
  3. Cloud Firestore