Firebase + WebRTC Codelab

1. บทนำ

ใน codelab นี้คุณจะได้เรียนรู้วิธีการสร้างโปรแกรมวิดีโอแชทง่ายๆโดยใช้ API WebRTC ในเบราว์เซอร์และระบบคลาวด์ FireStore ของคุณสำหรับการส่งสัญญาณ โปรแกรมประยุกต์ที่ถูกเรียกว่า FirebaseRTC และทำงานเป็นตัวอย่างง่ายๆที่จะสอนคุณพื้นฐานของการสร้าง WebRTC เปิดใช้งานการใช้งาน

สิ่งที่คุณจะได้เรียนรู้

• การเริ่มต้นการสนทนาทางวิดีโอในโปรแกรมประยุกต์บนเว็บโดยใช้ WebRTC
• การส่งสัญญาณไปยังบุคคลที่ระยะไกลโดยใช้ระบบคลาวด์ FireStore

สิ่งที่คุณจะต้อง

ก่อนที่จะเริ่ม codelab นี้ให้แน่ใจว่าคุณได้ติดตั้ง:

• NPM ซึ่งมักจะมาพร้อมกับ Node.js - โหนด LTS ขอแนะนำ

2. สร้างและการตั้งค่าโครงการ Firebase

สร้างโครงการ Firebase

1. ใน Firebase คอนโซล คลิกเพิ่มโครงการแล้วชื่อ Firebase โครงการ FirebaseRTC

จำรหัสโครงการสำหรับโครงการ Firebase ของคุณ

1. คลิกสร้างโครงการ

โปรแกรมประยุกต์ที่คุณกำลังจะสร้างใช้สองบริการ Firebase มีอยู่บนเว็บ:

• เมฆ FireStore เพื่อบันทึกข้อมูลที่มีโครงสร้างในระบบคลาวด์และได้รับการแจ้งเตือนทันทีเมื่อมีข้อมูลที่มีการปรับปรุง
• Firebase Hosting เพื่อโฮสต์และบริการสินทรัพย์คงที่ของคุณ

สำหรับ codelab เฉพาะนี้คุณได้กำหนดค่าแล้ว Firebase โฮสติ้งในโครงการที่คุณจะโคลน แต่สำหรับระบบคลาวด์ FireStore เราจะเดินคุณผ่านการตั้งค่าและการเปิดใช้งานการให้บริการโดยใช้คอนโซล Firebase

เปิดใช้งานระบบคลาวด์ FireStore

app จะใช้ระบบคลาวด์ FireStore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่

คุณจะต้องเปิดใช้งานระบบคลาวด์ FireStore:

1. ในเมนูคอนโซล Firebase เป็นส่วนพัฒนาฐานข้อมูลคลิก
2. คลิกสร้างฐานข้อมูลในบานหน้าต่างเมฆ FireStore
3. เลือกการเริ่มการทำงานในตัวเลือกโหมดการทดสอบแล้วคลิกเปิดใช้งานหลังจากที่ได้อ่านข้อจำกัดความรับผิดชอบเกี่ยวกับกฎการรักษาความปลอดภัย

เพื่อให้แน่ใจโหมดการทดสอบว่าคุณได้อย่างอิสระสามารถเขียนไปยังฐานข้อมูลในระหว่างการพัฒนา เราจะทำให้ฐานข้อมูลของเราปลอดภัยมากขึ้นในภายหลังใน codelab นี้

3. รับโค้ดตัวอย่าง

โคลนที่เก็บ GitHub จากบรรทัดคำสั่ง:

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

ตัวอย่างรหัสควรได้รับการโคลนเข้าไปใน Firebase-RTC เว็บไดเรกทอรี ตรวจสอบให้แน่ใจบรรทัดคำสั่งของคุณจะถูกเรียกใช้จากไดเรกทอรีนี้จากนี้:

 cd firebase-rtc-web
 

นำเข้าแอปเริ่มต้น

เปิดไฟล์ใน Firebase-RTC-เว็บในการแก้ไขของคุณและเปลี่ยนพวกเขาตามคำแนะนำด้านล่าง ไดเรกทอรีนี้ประกอบด้วยรหัสเริ่มต้นสำหรับ codelab ซึ่งประกอบด้วยแอป WebRTC ที่ยังไม่ทำงาน เราจะทำให้มันทำงานตลอด codelab นี้

4. ติดตั้ง Firebase บรรทัดคำสั่งอินเตอร์เฟซ

Firebase บรรทัดคำสั่ง Interface (CLI) ช่วยให้คุณสามารถที่จะให้บริการแอพพลิเคเว็บของคุณทั้งในประเทศและการปรับใช้เว็บแอปของคุณเพื่อ Firebase โฮสติ้ง

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 Hosting จากไดเรกทอรีท้องถิ่นของแอปและไฟล์ แต่การที่จะทำเช่นนี้คุณต้องเชื่อมโยงแอปของคุณกับโครงการ Firebase ของคุณ

1. เชื่อมโยงแอปของคุณกับโครงการ Firebase ของคุณโดยใช้คำสั่งต่อไปนี้: sh firebase use --add

2. เมื่อได้รับแจ้งให้เลือกโครงการ ID ของคุณแล้วให้โครงการ Firebase ของคุณนามแฝง

นามแฝงเป็นประโยชน์ถ้าคุณมีสภาพแวดล้อมหลาย (การผลิต, การแสดงละคร ฯลฯ ) อย่างไรก็ตามสำหรับ codelab นี้ขอเพียงแค่ใช้นามแฝงของ default

1. ทำตามคำแนะนำที่เหลืออยู่ในบรรทัดคำสั่งของคุณ

5. เรียกใช้เซิร์ฟเวอร์ภายใน

คุณพร้อมที่จะเริ่มต้นการทำงานจริงใน app ของเรา! Let 's ใช้ app ในประเทศ!

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 ของคุณ

app ได้เชื่อมต่อโดยอัตโนมัติให้กับโครงการ Firebase ของคุณ

6. การสร้างห้องใหม่

ในโปรแกรมนี้วิดีโอแชทเซสชั่นแต่ละคนจะเรียกว่าห้อง ผู้ใช้สามารถสร้างห้องใหม่โดยคลิกที่ปุ่มในการประยุกต์ใช้ของพวกเขา นี้จะสร้างรหัสที่บุคคลสามารถใช้ระยะไกลที่จะเข้าร่วมในห้องเดียว รหัสจะใช้เป็นกุญแจสำคัญในเมฆ 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 ที่สุด

ต่อไปเราจะรับฟังเพื่อให้การเปลี่ยนแปลงฐานข้อมูลและตรวจสอบเมื่อมีคำตอบจาก callee ได้รับการเพิ่ม

 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 โทรกลับในด้านผู้โทรซึ่งจะกำหนดรายละเอียดระยะไกลขึ้นอยู่กับคำตอบจาก callee ที่ เสร็จสมบูรณ์นี้การแลกเปลี่ยนของ RTCSessionDescription วัตถุระหว่างโทรและฟังก์ชันที่ถูกเรียก

8. เก็บผู้สมัคร ICE

ก่อนที่จะโทรและ callee สามารถเชื่อมต่อกับแต่ละอื่น ๆ พวกเขายังต้องให้กับผู้สมัครที่ตลาด 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 จาก WebRTC API และเพิ่มลงในฐานข้อมูลและฟังสำหรับผู้สมัครเพิ่ม ICE จากเพื่อนระยะไกลและเพิ่มพวกเขาไปมัน RTCPeerConnection อินสแตนซ์ มันเป็นสิ่งสำคัญเมื่อฟังไปยังฐานข้อมูลการเปลี่ยนแปลงในการกรองสิ่งที่ไม่ได้เป็นสมาชิกใหม่เนื่องจากเราอาจจะได้เพิ่มชุดเดียวกันของผู้สมัคร ICE ซ้ำแล้วซ้ำอีก

9. สรุป

ใน codelab นี้คุณได้เรียนรู้วิธีการใช้การส่งสัญญาณเพื่อใช้ WebRTC เมฆ FireStore เช่นเดียวกับวิธีการใช้งานที่สำหรับการสร้างโปรแกรมแชทวิดีโอง่าย

ต้องการเรียนรู้เพิ่มเติมโปรดเยี่ยมชมทรัพยากรต่อไปนี้:

1. FirebaseRTC รหัสที่มา
2. ตัวอย่าง WebRTC
3. เมฆ FireStore