Firebase + WebRTC Codelab

1. معرفی

در این کد لبه، یاد خواهید گرفت که چگونه با استفاده از WebRTC API در مرورگر خود و Cloud Firestore برای سیگنالینگ، یک برنامه چت ویدیویی ساده بسازید. این برنامه FirebaseRTC نام دارد و به عنوان یک مثال ساده عمل می کند که اصول ساخت برنامه های کاربردی دارای WebRTC را به شما آموزش می دهد.

چیزی که یاد خواهید گرفت

  • برقراری تماس تصویری در یک برنامه وب با استفاده از WebRTC
  • با استفاده از Cloud Firestore به طرف راه دور سیگنال می دهید

آنچه شما نیاز دارید

قبل از شروع این کد لبه، مطمئن شوید که نصب کرده اید:

  • npm که معمولاً با Node.js ارائه می شود - Node LTS توصیه می شود

2. یک پروژه Firebase ایجاد و راه اندازی کنید

یک پروژه Firebase ایجاد کنید

  1. در فایربیس کنسول ، روی Add کلیک کنید پروژه، سپس نام فایربیس پروژه FirebaseRTC.

شناسه پروژه برای پروژه Firebase خود را به خاطر بسپارید.

  1. روی ایجاد پروژه کلیک کنید.

برنامه ای که می خواهید بسازید از دو سرویس Firebase موجود در وب استفاده می کند:

  • Cloud Firestore برای ذخیره داده های ساختار یافته در Cloud و دریافت اعلان فوری هنگام به روز رسانی داده ها
  • میزبانی Firebase برای میزبانی و سرویس دهی به دارایی های ثابت شما

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

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

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

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

  1. در بخش توسعه منوی کنسول Firebase، روی پایگاه داده کلیک کنید.
  2. کلیک کنید ایجاد پایگاه داده در سمت ابر Firestore.
  3. شروع انتخاب کنید در گزینه حالت تست، سپس با کلیک فعال کردن پس از خواندن سلب مسئولیت در مورد قوانین امنیتی.

حالت تست تضمین می کند که می توانید آزادانه در حین توسعه در پایگاه داده بنویسید. ما پایگاه داده خود را بعداً در این 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. اجازه فایربیس CLI با اجرای دستور زیر: sh firebase login

شما الگوی برنامه وب را به گونه ای تنظیم کرده اید که پیکربندی برنامه خود را برای میزبانی Firebase از فهرست و فایل های محلی برنامه خود خارج کند. اما برای انجام این کار، باید برنامه خود را با پروژه Firebase خود مرتبط کنید.

  1. دانشیار برنامه خود را با پروژه فایربیس خود را با اجرای دستور زیر: sh firebase use --add

  2. وقتی از شما خواسته شد، شناسه پروژه خود را انتخاب کنید، سپس به پروژه Firebase خود یک نام مستعار بدهید.

اگر چندین محیط (تولید، صحنه سازی و غیره) دارید، نام مستعار مفید است. حال، برای این codelab، اجازه دهید فقط با استفاده از نام مستعار default .

  1. دستورالعمل های باقی مانده را در خط فرمان خود دنبال کنید.

5. سرور محلی را اجرا کنید

شما آماده هستید که واقعاً روی برنامه ما کار کنید! بیایید برنامه را به صورت محلی اجرا کنیم!

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

گام بعدی اجرای منطق برای پیوستن به یک اتاق موجود است. کاربر این کار را با کلیک کردن دکمه اتاق اضافه کردن و ورود به ID برای اتاق برای پیوستن به. وظیفه شما این است برای اجرای ایجاد 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());
                peerConneciton.addIceCandidate(candidate);
            }
        });
    })
}

این تابع دو کار را انجام می دهد. این جمع آوری نامزدها ICE از API WebRTC و آنها می افزاید: به پایگاه داده، و گوش را برای نامزدهای ICE اضافه از همکار از راه دور و به آنها می افزاید: به آن RTCPeerConnection به عنوان مثال. هنگام گوش دادن به تغییرات پایگاه داده مهم است که هر چیزی را که جدید نیست فیلتر کنید، زیرا در غیر این صورت می توانستیم همان مجموعه ای از نامزدهای ICE را بارها و بارها اضافه کنیم.

9. نتیجه گیری

در این نرم افزار کد، نحوه پیاده سازی سیگنالینگ برای WebRTC با استفاده از Cloud Firestore و همچنین نحوه استفاده از آن برای ایجاد یک برنامه چت ویدیویی ساده را یاد گرفتید.

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

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