गूगल काले समुदायों के लिए जातीय इक्विटी को आगे बढ़ाने के लिए प्रतिबद्ध है। देखो कैसे।
इस पेज का अनुवाद Cloud Translation API से किया गया है.
Switch to English

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 परियोजना के लिए परियोजना आईडी याद रखें।

  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 परियोजना के साथ अपने अनुप्रयोग संबद्ध करना होगा।

  1. निम्न आदेश चलाकर अपने Firebase परियोजना के साथ अपने अनुप्रयोग संबद्ध करें: sh firebase use --add

  2. संकेत मिलने पर, अपने प्रोजेक्ट ID चयन करें, फिर अपने Firebase परियोजना एक उपनाम दे।

आप एक से अधिक वातावरण (उत्पादन, मचान, आदि) है, तो किसी अन्य नाम से उपयोगी है। हालांकि, इस codelab के लिए, चलो बस के अन्य नाम का उपयोग करते हैं default

  1. अपने आदेश पंक्ति में शेष निर्देशों का पालन।

5. भागो स्थानीय सर्वर

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

  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 में नए कमरे वस्तु को पत्र लिखा।

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

 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. कलेक्ट बर्फ उम्मीदवारों

इससे पहले कि फोन करने वाले और कॉल प्राप्त करने वाला एक दूसरे से कनेक्ट कर सकते हैं, वे भी विनिमय बर्फ उम्मीदवारों जिसमें 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