الدرس التطبيقي حول الترميز بين Firebase و WebRTC

1. مقدمة

في هذا الدرس التطبيقي حول الترميز، ستتعلم كيفية إنشاء تطبيق دردشة فيديو بسيط باستخدام واجهة برمجة تطبيقات WebRTC في المتصفّح وCloud 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.

تفعيل Cloud Firestore

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

يجب تفعيل Cloud Firestore:

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

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

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 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);
            }
        });
    })
}

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

9. الخاتمة

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

لمزيد من المعلومات، يُرجى الاطّلاع على المراجع التالية:

1. رمز مصدر FirebaseRTC
2. نماذج WebRTC
3. Cloud Firestore