Google is committed to advancing racial equity for Black communities. See how.
ترجمت واجهة Cloud Translation API‏ هذه الصفحة.
Switch to English

Firebase + WebRTC Codelab

1 المقدمة

في مختبر الرموز هذا ، ستتعلم كيفية إنشاء تطبيق دردشة فيديو بسيط باستخدام WebRTC API في متصفحك و Cloud Firestore للإشارة. يُطلق على التطبيق اسم FirebaseRTC ويعمل كمثال بسيط سيعلمك أساسيات إنشاء تطبيقات تمكّن WebRTC.

ماذا ستتعلم

  • بدء مكالمة فيديو في تطبيق ويب باستخدام WebRTC
  • الإشارة إلى الطرف البعيد باستخدام Cloud Firestore

ماذا ستحتاج

قبل البدء في مختبر الرموز هذا ، تأكد من تثبيت:

  • npm الذي يأتي عادةً مع Node.js - يوصى باستخدام Node LTS

2. إنشاء مشروع Firebase وإعداده

أنشئ مشروع Firebase

  1. في وحدة تحكم Firebase ، انقر على إضافة مشروع ، ثم قم بتسمية مشروع Firebase FirebaseRTC.

تذكر معرّف المشروع لمشروع Firebase الخاص بك.

  1. انقر فوق إنشاء مشروع.

يستخدم التطبيق الذي ستنشئه خدمتين من خدمات Firebase متاحتين على الويب:

  • Cloud Firestore لحفظ البيانات المنظمة على السحابة والحصول على إشعار فوري عند تحديث البيانات
  • استضافة Firebase لاستضافة أصولك الثابتة وخدمتها

بالنسبة إلى مختبر الشفرات هذا ، قمت بالفعل بتكوين Firebase Hosting في المشروع الذي ستقوم باستنساخه. ومع ذلك ، بالنسبة إلى Cloud Firestore ، سنرشدك خلال التكوين والتمكين للخدمات باستخدام وحدة تحكم Firebase.

تفعيل Cloud Firestore

يستخدم التطبيق Cloud Firestore لحفظ رسائل الدردشة وتلقي رسائل دردشة جديدة.

ستحتاج إلى تمكين Cloud Firestore:

  1. في قسم التطوير بقائمة وحدة تحكم Firebase ، انقر على قاعدة البيانات.
  2. انقر فوق إنشاء قاعدة بيانات في جزء Cloud Firestore.
  3. حدد خيار البدء في وضع الاختبار ، ثم انقر فوق تمكين بعد قراءة إخلاء المسؤولية حول قواعد الأمان.

يضمن وضع الاختبار أنه يمكنك الكتابة بحرية إلى قاعدة البيانات أثناء التطوير. سنجعل قاعدة بياناتنا أكثر أمانًا لاحقًا في مختبر الرموز هذا.

3. احصل على نموذج التعليمات البرمجية

استنساخ مستودع GitHub من سطر الأوامر:

06 cce2eda0

يجب أن يكون قد تم استنساخ نموذج التعليمات البرمجية في دليل FirebaseRTC . تأكد من تشغيل سطر الأوامر من هذا الدليل من الآن فصاعدًا:

cd FirebaseRTC

قم باستيراد تطبيق المبتدئين

افتح الملفات في FirebaseRTC في المحرر الخاص بك وقم بتغييرها وفقًا للإرشادات أدناه. يحتوي هذا الدليل على رمز البداية لمختبر الرموز الذي يتكون من تطبيق WebRTC الذي لم يعمل بعد. سنجعله عمليًا خلال مختبر الرموز هذا.

4. قم بتثبيت واجهة سطر أوامر Firebase

تتيح لك واجهة سطر أوامر Firebase (CLI) خدمة تطبيق الويب محليًا ونشر تطبيق الويب الخاص بك على Firebase Hosting.

  1. قم بتثبيت CLI عن طريق تشغيل الأمر npm التالي: 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. sh firebase use --add عن طريق تشغيل الأمر التالي: sh firebase use --add

  2. عند المطالبة ، حدد معرف المشروع الخاص بك ، ثم امنح مشروع Firebase اسمًا مستعارًا.

يكون الاسم المستعار مفيدًا إذا كان لديك عدة بيئات (إنتاج ، مرحلة ، إلخ). ومع ذلك ، بالنسبة لمعمل الرموز هذا ، دعنا نستخدم الاسم المستعار default .

  1. اتبع التعليمات المتبقية في سطر الأوامر.

5. قم بتشغيل الخادم المحلي

أنت جاهز لبدء العمل فعليًا على تطبيقنا! لنقم بتشغيل التطبيق محليًا!

  1. قم بتشغيل أمر sh firebase serve --only hosting CLI التالي: sh firebase serve --only hosting

  2. يجب أن يعرض سطر الأوامر الاستجابة التالية: hosting: Local server: http://localhost:5000

نحن نستخدم محاكي Firebase Hosting لخدمة تطبيقنا محليًا. يجب أن يكون تطبيق الويب متاحًا الآن من 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 للإجابة ، 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 بين المتصل 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);
            }
        });
    })
}

هذه الوظيفة تفعل شيئين. يجمع مرشحات ICE من WebRTC API ويضيفهم إلى قاعدة البيانات ، ويستمع إلى مرشحين ICE RTCPeerConnection من النظير البعيد RTCPeerConnection مثيل RTCPeerConnection الخاص به. من المهم عند الاستماع إلى تغييرات قاعدة البيانات تصفية أي شيء ليس إضافة جديدة ، لأننا بخلاف ذلك كنا سنضيف نفس المجموعة من مرشحي ICE مرارًا وتكرارًا.

9. الخلاصة

تعلمت في مختبر الرموز هذا كيفية تنفيذ الإشارات لـ WebRTC باستخدام Cloud Firestore ، وكذلك كيفية استخدام ذلك لإنشاء تطبيق دردشة فيديو بسيط.

لمعرفة المزيد ، قم بزيارة الموارد التالية:

  1. رمز مصدر FirebaseRTC
  2. عينات WebRTC
  3. سحابة Firestore