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

1. परिचय

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

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

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

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

यह कोडलैब शुरू करने से पहले, पक्का करें कि आपने:

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

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

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

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

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

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

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

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

1. नीचे दिए गए npm कमांड चलाकर सीएलआई इंस्टॉल करें: sh npm -g install firebase-tools अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

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

पक्का करें कि Firebase सीएलआई का वर्शन 6.7.1 या इसके बाद का वर्शन हो.

1. नीचे दिए गए निर्देश की मदद से, Firebase सीएलआई को अनुमति दें: 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 पर अपना ऐप्लिकेशन खोलें.

यहां आपको 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 के उम्मीदवारों का डेटा इकट्ठा करना

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

9. नतीजा

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

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

1. FirebaseRTC सोर्स कोड
2. WebRTC सैंपल
3. Cloud Firestore