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 برای ذخیره داده های ساختار یافته در Cloud و دریافت اعلان فوری هنگام به روز رسانی داده ها
  • میزبانی Firebase برای میزبانی و سرویس دهی به دارایی های ثابت شما

برای این کد لبه خاص، شما قبلاً میزبانی Firebase را در پروژه ای که شبیه سازی خواهید کرد، پیکربندی کرده اید. با این حال، برای Cloud Firestore، پیکربندی و فعال‌سازی سرویس‌ها را با استفاده از کنسول Firebase راهنمایی می‌کنیم.

Cloud Firestore را فعال کنید

این برنامه از Cloud Firestore برای ذخیره پیام های چت و دریافت پیام های چت جدید استفاده می کند.

باید Cloud Firestore را فعال کنید:

  1. در بخش توسعه منوی کنسول Firebase، روی پایگاه داده کلیک کنید.
  2. روی ایجاد پایگاه داده در پنجره Cloud Firestore کلیک کنید.
  3. گزینه Start in test mode را انتخاب کنید، سپس پس از خواندن سلب مسئولیت در مورد قوانین امنیتی، روی Enable کلیک کنید.

حالت تست تضمین می کند که می توانید آزادانه در حین توسعه در پایگاه داده بنویسید. ما پایگاه داده خود را بعداً در این Codelab ایمن تر خواهیم کرد.

3. کد نمونه را دریافت کنید

مخزن GitHub را از خط فرمان کلون کنید:

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

کد نمونه باید در دایرکتوری FirebaseRTC کلون شده باشد. اطمینان حاصل کنید که خط فرمان شما از این پس از این دایرکتوری اجرا می شود:

cd FirebaseRTC

برنامه شروع را وارد کنید

فایل های FirebaseRTC را در ویرایشگر خود باز کنید و طبق دستورالعمل زیر آنها را تغییر دهید. این دایرکتوری حاوی کد شروع برای codelab است که شامل یک برنامه WebRTC هنوز کاربردی نیست. ما آن را در سراسر این Codelab کاربردی خواهیم کرد.

4. رابط خط فرمان Firebase را نصب کنید

رابط خط فرمان Firebase (CLI) به شما امکان می دهد برنامه وب خود را به صورت محلی ارائه دهید و برنامه وب خود را در میزبانی Firebase مستقر کنید.

  1. CLI را با اجرای دستور npm زیر نصب کنید: sh npm -g install firebase-tools
  1. با اجرای دستور زیر بررسی کنید که CLI به درستی نصب شده باشد: sh firebase --version

مطمئن شوید که نسخه Firebase CLI نسخه 6.7.1 یا بالاتر باشد.

  1. Firebase CLI را با اجرای دستور زیر مجاز کنید: 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. پیوستن به یک اتاق

گام بعدی اجرای منطق برای پیوستن به یک اتاق موجود است. کاربر این کار را با کلیک روی دکمه Join room و وارد کردن شناسه اتاق برای عضویت انجام می دهد. وظیفه شما در اینجا پیاده سازی ایجاد 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 با استفاده از Cloud Firestore و همچنین نحوه استفاده از آن برای ایجاد یک برنامه چت ویدیویی ساده را یاد گرفتید.

برای کسب اطلاعات بیشتر به منابع زیر مراجعه کنید:

  1. کد منبع FirebaseRTC
  2. نمونه های WebRTC
  3. Cloud Firestore