گوگل به پیشبرد تساوی نژادی برای جوامع سیاه متعهد است. ببینید چگونه.
این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.
Switch to English

فایربیس + WebRTC به Codelab

1. معرفی

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

چه شما باید یاد بگیرند

  • شروع یک تماس تصویری در یک برنامه تحت وب با استفاده از WebRTC به
  • سیگنالینگ به حزب از راه دور با استفاده از ابر Firestore

آنچه شما نیاز

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

  • NPM که معمولا با Node.js و می آید - گره LTS است

2. ایجاد و راه اندازی یک پروژه فایربیس

ایجاد یک پروژه فایربیس

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

به یاد داشته باشید ID پروژه برای پروژه فایربیس خود را.

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

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

  • ابر Firestore به صرفه جویی در داده های ساخت یافته بر روی ابر و اطلاع رسانی فوری زمانی که داده به روز شده است
  • فایربیس میزبانی به میزبان و خدمت به دارایی های شخص خود را

برای این codelab خاص، شما در حال حاضر پیکربندی فایربیس میزبانی در پروژه شبیه سازی شما می شود. با این حال، برای ابر Firestore، ما به شما از طریق تنظیمات راه رفتن و قادر می سازد از خدمات با استفاده از کنسول فایربیس.

فعال کردن ابر Firestore

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

شما نیاز به فعال Cloud Firestore:

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

تضمین می کند حالت تست که شما آزادانه می توانید به پایگاه داده ارسال در توسعه است. ما را در بانک اطلاعاتی ما امن تر بعدا در این codelab.

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

کلون مخزن گیتهاب از خط فرمان:

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

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

 cd firebase-rtc-web
 

واردات برنامه استارت

باز کردن فایل های در فایربیس-RTC-وب در ویرایشگر خود و با توجه به دستورالعمل های زیر را تغییر دهید. این پوشه شامل کد شروع برای codelab که متشکل از یک برنامه از WebRTC نه هنوز عملکردی است. ما آن را در سراسر این codelab کاربردی می کنیم.

4. نصب فایربیس رابط خط فرمان

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

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

اطمینان حاصل کنید که نسخه ای از فایربیس CLI v6.7.1 یا بالاتر است.

  1. اجازه فایربیس CLI با اجرای دستور زیر: sh firebase login

شما در راه اندازی قالب برنامه وب به جلو و پیکربندی برنامه خود را برای میزبانی فایربیس از دایرکتوری و فایل های محلی برنامه شما هستند. اما برای انجام این کار، شما نیاز به معاشرت برنامه خود را با پروژه فایربیس خود را.

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

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

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

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

5. اجرای سرور محلی

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

  1. اجرای دستور فایربیس CLI زیر است: sh firebase serve --only hosting

  2. خط فرمان شما باید پاسخ زیر نمایش: hosting: Local server: http://localhost:5000

ما با استفاده از میزبانی شبیه ساز فایربیس برای خدمت به برنامه ما به صورت محلی. برنامه وب در حال حاضر باید در دسترس را از http شود: // localhost را: 5000.

  1. برنامه را باز در http: // localhost را: 5000.

شما باید کپی خود را از FirebaseRTC است که به پروژه Firebase خود متصل شده است را مشاهده کنید.

این نرم افزار به طور خودکار به پروژه Firebase خود متصل است.

6. ایجاد یک اتاق جدید

در این برنامه، هر جلسه چت تصویری است یک اتاق به نام. کاربر می تواند یک اتاق جدید با کلیک یک دکمه در نرم افزار خود را ایجاد کنید. این یک ID که حزب از راه دور می توانید برای پیوستن به همان اتاق استفاده را تولید کند. شناسه به عنوان کلید در ابر 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 نوشته شده است.

بعد، ما برای تغییرات به پایگاه داده گوش دادن و تشخیص زمانی که پاسخ خود را از پذیرنده اضافه شده است.

 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, peerConneciton,    
                                    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. نتیجه گیری

در این codelab شما به دست چگونگی پیاده سازی سیگنال برای WebRTC با استفاده از ابر Firestore، و همچنین چگونه به استفاده از برای ایجاد یک نرم افزار چت تصویری ساده است.

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

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