1. บทนำ
ใน Codelab นี้ คุณจะได้ดูวิธีสร้างแอปพลิเคชันวิดีโอแชทแบบง่ายๆ โดยใช้ WebRTC API ในเบราว์เซอร์และ Cloud Firestore สําหรับการส่งสัญญาณ แอปพลิเคชันนี้เรียกว่า FirebaseRTC ซึ่งทําหน้าที่เป็นตัวอย่างง่ายๆ ที่จะสอนพื้นฐานการสร้างแอปพลิเคชันที่เปิดใช้ WebRTC
สิ่งที่คุณจะได้เรียนรู้
- การเริ่มต้นวิดีโอคอลในเว็บแอปพลิเคชันโดยใช้ WebRTC
- ส่งสัญญาณไปยังบุคคลอื่นจากระยะไกลโดยใช้ Cloud Firestore
สิ่งที่ต้องมี
ก่อนที่จะเริ่ม Codelab นี้ โปรดตรวจสอบว่าคุณได้ติดตั้งแล้ว
- npm ซึ่งมักมาพร้อมกับ Node.js - ขอแนะนําให้ใช้ LTS LTS
2. สร้างและตั้งค่าโปรเจ็กต์ Firebase
สร้างโปรเจ็กต์ Firebase
- ในคอนโซล Firebase ให้คลิกเพิ่มโปรเจ็กต์ แล้วตั้งชื่อโปรเจ็กต์ Firebase ว่า FirebaseRTC
จดจํารหัสโปรเจ็กต์ Firebase ของคุณ
- คลิกสร้างโปรเจ็กต์
แอปพลิเคชันที่คุณจะสร้างใช้บริการ Firebase 2 อย่างที่ใช้ได้บนเว็บ
- Cloud Firestore เพื่อบันทึกข้อมูลที่มีโครงสร้างในระบบคลาวด์และรับการแจ้งเตือนทันทีเมื่อมีการอัปเดตข้อมูล
- โฮสติ้งของ Firebase ที่จะโฮสต์และแสดงเนื้อหาแบบคงที่
สําหรับ Codelab นี้ คุณได้กําหนดค่าโฮสติ้งของ Firebase ในโปรเจ็กต์ที่คุณจะโคลนแล้ว อย่างไรก็ตาม สําหรับ Cloud Firestore เราจะแนะนําการกําหนดค่าและเปิดใช้บริการโดยใช้คอนโซล Firebase
เปิดใช้ Cloud Firestore
แอปใช้ Cloud Firestore เพื่อบันทึกข้อความแชทและรับข้อความแชทใหม่
คุณจะต้องเปิดใช้ Cloud Firestore ดังนี้
- ในส่วน "พัฒนา" ของคอนโซล Firebase ให้คลิกฐานข้อมูล
- คลิกสร้างฐานข้อมูลในแผง Cloud Firestore
- เลือกตัวเลือกเริ่มต้นในโหมดทดสอบ แล้วคลิกเปิดใช้หลังจากอ่านข้อจํากัดความรับผิดเกี่ยวกับกฎความปลอดภัย
โหมดทดสอบช่วยให้คุณเขียนไปที่ฐานข้อมูลได้อย่างอิสระระหว่างการพัฒนา เราจะทําให้ฐานข้อมูลของเราปลอดภัยยิ่งขึ้นในภายหลังใน Codelab นี้
3. รับโค้ดตัวอย่าง
โคลนที่เก็บ GitHub จากบรรทัดคําสั่ง
git clone https://github.com/webrtc/FirebaseRTC
ระบบควรโคลนโค้ดตัวอย่างในไดเรกทอรี FirebaseRTC
แล้ว
ตรวจสอบว่าบรรทัดคําสั่งใช้งานได้จากไดเรกทอรีนับจากนี้ไป
cd FirebaseRTC
นําเข้าแอปเริ่มต้น
เปิดไฟล์ใน FirebaseRTC
ในตัวแก้ไขแล้วเปลี่ยนตามวิธีการด้านล่าง ไดเรกทอรีนี้มีโค้ดเริ่มต้นสําหรับ Codelab ซึ่งประกอบด้วยแอป WebRTC ที่ใช้งานได้อยู่ เราจะทําให้ฟังก์ชันนี้
ใช้งานได้ทั้งใน Codelab นี้
4. ติดตั้งอินเทอร์เฟซบรรทัดคําสั่ง Firebase
Firebase Command Line Interface (CLI) ช่วยให้คุณแสดงเว็บแอปในเครื่องและปรับใช้เว็บแอปในโฮสติ้งของ Firebase ได้
- ติดตั้ง CLI โดยเรียกใช้คําสั่ง npm ต่อไปนี้
sh npm -g install firebase-tools
- ตรวจสอบว่าได้ติดตั้ง CLI อย่างถูกต้องโดยเรียกใช้คําสั่งต่อไปนี้
sh firebase --version
ตรวจสอบว่าเวอร์ชันของ Firebase CLI คือ v6.7.1 หรือใหม่กว่า
- ให้สิทธิ์ Firebase CLI โดยเรียกใช้คําสั่งต่อไปนี้
sh firebase login
คุณได้ตั้งค่าเทมเพลตเว็บแอปให้ดึงการกําหนดค่าแอปสําหรับโฮสติ้งของ Firebase จากไดเรกทอรีและไฟล์ในเครื่องของแอป แต่ในการดําเนินการนี้ คุณต้องเชื่อมโยงแอปกับโปรเจ็กต์ Firebase
เชื่อมโยงแอปกับโปรเจ็กต์ Firebase โดยเรียกใช้คําสั่งต่อไปนี้
sh firebase use --add
เมื่อได้รับข้อความแจ้ง ให้เลือกรหัสโครงการ แล้วให้ชื่อแทนโครงการ Firebase แทน
ชื่อแทนจะมีประโยชน์หากคุณมีสภาพแวดล้อมหลายอย่าง (การผลิต การทดลองใช้ ,ล).)
สําหรับ Codelab นี้ ให้ใช้เพียงชื่อแทนของ default
ทําตามวิธีการที่เหลือในบรรทัดคําสั่ง
5. เรียกใช้เซิร์ฟเวอร์ภายใน
คุณพร้อมเริ่มทํางานกับแอปของเราแล้ว เรียกใช้แอปในเครื่อง
เรียกใช้คําสั่ง Firebase CLI ต่อไปนี้
sh firebase serve --only hosting
บรรทัดคําสั่งควรแสดงการตอบสนองต่อไปนี้
hosting: Local server: http://localhost:5000
เราใช้โปรแกรมจําลองโฮสติ้งของ Firebase เพื่อให้บริการแอปในเครื่อง เว็บแอปควรพร้อมให้บริการจาก http://localhost:5000
- เปิดแอปของคุณที่ http://localhost:5000
คุณจะเห็นสําเนาของ FirebaseRTC ที่เชื่อมต่อกับโปรเจ็กต์ Firebase
แอปได้เชื่อมต่อกับโปรเจ็กต์ Firebase โดยอัตโนมัติแล้ว
6. กําลังสร้างห้องใหม่
ในแอปพลิเคชันนี้ เซสชันวิดีโอแชทแต่ละครั้งจะเรียกว่าห้องแชท ผู้ใช้จะสร้างห้องแชทใหม่ได้โดยการคลิกปุ่มในแอปพลิเคชัน การดําเนินการนี้จะสร้างรหัสซึ่งผู้เข้าร่วมระยะไกลจะใช้เพื่อเข้าร่วมห้องเดียวกันได้ ระบบจะใช้รหัสเป็นคีย์ใน Cloud Firestore สําหรับแต่ละห้อง
แต่ละห้องจะมี RTCSessionDescriptions
สําหรับทั้งข้อเสนอและคําตอบ รวมถึงคอลเล็กชัน 2 รายการแยกกันที่มีผู้สมัคร 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());
peerConneciton.addIceCandidate(candidate);
}
});
})
}
ฟังก์ชันนี้ทํา 2 อย่าง เครื่องมือจะรวบรวมตัวเลือก ICE จาก WebRTC API และเพิ่มในฐานข้อมูล และฟังตัวเลือก ICE ที่เพิ่มจากเพียร์ระยะไกลและเพิ่มไปยังอินสแตนซ์ RTCPeerConnection
เมื่อพูดถึงการเปลี่ยนแปลงฐานข้อมูล อย่าลืมกรองทุกอย่างที่ไม่ใช่การเพิ่มใหม่ เนื่องจากเราอาจเพิ่มตัวเลือก ICE ชุดเดียวกันซ้ําไปซ้ํามา
9. บทสรุป
ใน Codelab นี้ คุณจะได้ดูวิธีใช้สัญญาณสําหรับ WebRTC โดยใช้ Cloud Firestore และวิธีใช้วิธีสร้างแอปพลิเคชันวิดีโอแชทแบบง่ายๆ
ดูข้อมูลเพิ่มเติมได้ที่แหล่งข้อมูลต่อไปนี้