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

1. परिचय

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

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

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

आपको इनकी ज़रूरत होगी

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

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

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

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

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

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

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

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

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

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

Cloud Firestore चालू करें

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

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

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

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

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

कमांड लाइन से GitHub डेटा स्टोर करने की जगह को क्लोन करें:

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

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

cd FirebaseRTC

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

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

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

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

1. नीचे दिए गए एनपीएम निर्देश को चलाकर, सीएलआई को इंस्टॉल करें: sh npm -g install firebase-tools

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

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

1. यह निर्देश देकर, Firebase सीएलआई को अनुमति दें: sh firebase login

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

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

2. जब कहा जाए, तब अपना प्रोजेक्ट आईडी चुनें. इसके बाद, अपने Firebase प्रोजेक्ट को उपनाम दें.

अगर आपके पास एक से ज़्यादा एनवायरमेंट (प्रोडक्शन, स्टेजिंग वगैरह) हैं, तो उपनाम काम की होता है. हालांकि, इस कोडलैब के लिए, सिर्फ़ 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. नया कमरा बनाया जा रहा है

इस ऐप्लिकेशन में, हर वीडियो चैट सेशन को चैट रूम कहा जाता है. उपयोगकर्ता अपने ऐप्लिकेशन में बटन पर क्लिक करके नया चैट रूम बना सकता है. इससे एक आईडी जनरेट होगा, जिसका इस्तेमाल करके रिमोट पार्टी उसी चैट रूम में शामिल हो सकती है. हर कमरे के लिए Cloud Firestore में कुंजी के तौर पर उसका इस्तेमाल किया जाता है.

हर कमरे में ऑफ़र और जवाब के लिए 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 बनाती है, जो कॉल करने वाले (कॉलर) के ऑफ़र को दिखाएगी. इसके बाद, इसे स्थानीय जानकारी के तौर पर सेट किया जाता है और बाद में, 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());
                peerConnection.addIceCandidate(candidate);
            }
        });
    })
}

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

9. नतीजा

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

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

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