Google is committed to advancing racial equity for Black communities. See how.
דף זה תורגם על ידי Cloud Translation API.
Switch to English

Firebase + WebRTC Codelab

1. הקדמה

במפתח קוד זה תלמד כיצד לבנות יישום צ'אט וידאו פשוט באמצעות ה- WebRTC API בדפדפן שלך ובענן 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.

אפשר ענן Firestore

האפליקציה משתמשת ב- Cloud Firestore כדי לשמור את הודעות הצ'אט ולקבל הודעות צ'אט חדשות.

יהיה עליך להפעיל את Cloud Firestore:

  1. בקטע פיתוח בתפריט קונסולת Firebase, לחץ על מסד נתונים.
  2. לחץ על צור מסד נתונים בחלונית Firestore בענן.
  3. בחר באפשרות התחל במצב בדיקה , ואז לחץ על הפעל לאחר קריאת כתב הוויתור על כללי האבטחה.

מצב בדיקה מבטיח שתוכלו לכתוב באופן חופשי למסד הנתונים במהלך הפיתוח. אנו נשמור על מאגר הנתונים מאוחר יותר במפתח הקוד הזה.

3. קבל את קוד הדוגמה

שיבט את מאגר GitHub משורת הפקודה:

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

קוד המדגם היה צריך להיות משובט בספריית FirebaseRTC . ודא ששורת הפקודה שלך מופעלת מהספריה הזו מעתה ואילך:

cd FirebaseRTC

ייבא את אפליקציית המתנע

פתח את הקבצים ב- FirebaseRTC בעורך שלך ושנה אותם בהתאם להוראות שלמטה. ספריה זו מכילה את קוד ההתחלה של קוד הקוד המורכב מאפליקציית WebRTC שעדיין לא פונקציונלית. אנו נהפוך אותו לפונקציונאלי בכל קוד הקוד הזה.

4. התקן את ממשק שורת הפקודה של Firebase

ממשק שורת הפקודה של Firebase (CLI) מאפשר לך לשרת את אפליקציית האינטרנט שלך ולפרוס את אפליקציית האינטרנט שלך לאירוח Firebase.

  1. התקן את ה- CLI על ידי הפעלת הפקודה npm הבאה: sh npm -g install firebase-tools
  1. ודא שה- CLI הותקן כהלכה על ידי הפעלת הפקודה הבאה: sh firebase --version

ודא שהגירסה של Firebase CLI היא v6.7.1 ואילך.

  1. אשר את ה- CLI של 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 שתייצג את ההצעה מהמתקשר. זה מוגדר כתיאור המקומי, ולבסוף נכתב לאובייקט החדר החדש בענן 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 , 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. אוספים מועמדי ICE

לפני שהמתקשר וה- callee יוכלו להתחבר זה לזה, הם צריכים גם להחליף מועמדי 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);
            }
        });
    })
}

פונקציה זו עושה שני דברים. הוא אוסף מועמדי ICE מ- WebRTC API ומוסיף אותם למסד הנתונים, ומקשיב למועמדים נוספים של ICE מהעמית המרוחק ומוסיף אותם למופע RTCPeerConnection שלו. חשוב כשמאזינים לשינויים במסד הנתונים כדי לסנן כל דבר שאינו תוספת חדשה, מכיוון שאם לא כן היינו מוסיפים את אותה קבוצה של מועמדים ל- ICE שוב ושוב.

9. מסקנה

במערכת קוד קוד זו למדת כיצד ליישם איתות עבור WebRTC באמצעות Cloud Firestore, וכן כיצד להשתמש בזה ליצירת יישום פשוט לצ'אט וידאו.

למידע נוסף, בקר במקורות הבאים:

  1. קוד המקור של FirebaseRTC
  2. דוגמאות WebRTC
  3. ענן Firestore