การเชื่อมต่อกับเพื่อนนักเรียน

RTCPeerConnection คืออินเทอร์เฟซกลางใน WebRTC API ซึ่งแสดงถึงการเชื่อมต่อระหว่างเพียร์ในเครื่องกับเพียร์ระยะไกล รวมถึงให้ฟังก์ชันและเหตุการณ์ทั้งหมดที่จำเป็นต่อการสร้างการเชื่อมต่อ

การสร้างการเชื่อมต่อแบบเพียร์

แอปพลิเคชันที่ใช้ฟังก์ชัน WebRTC มักจะใช้RTCPeerConnectionอินเทอร์เฟซอย่างมาก จากฝั่งผู้โทร (นั่นคือเพียร์ที่เริ่มการเชื่อมต่อ) กระบวนการสร้างการเชื่อมต่อมักจะมีลักษณะดังนี้

1. สร้างอินสแตนซ์ RTCPeerConnection ใหม่ที่มีการกําหนดค่า ICE ที่เหมาะสม
2. สร้างคำอธิบาย SDP ในพื้นที่โดยใช้ RTCPeerConnection.createOffer()
3. ตั้งค่าคําอธิบาย SDP ในพื้นที่โดยใช้ RTCPeerConnection.setLocalDescription()
4. โอน (โดยใช้บริการส่งสัญญาณ) คําอธิบาย SDP ในพื้นที่ไปยังคู่สนทนาระยะไกล
5. ลงทะเบียน Listener สําหรับเหตุการณ์ icecandidate ใน RTCPeerConnection
6. สําหรับเหตุการณ์ icecandidate แต่ละรายการ ให้โอน (โดยใช้บริการส่งสัญญาณ) ไปยังคู่สนทนาระยะไกล
7. รอคําอธิบาย SDP ระยะไกลขาเข้าจากบริการส่งสัญญาณและตั้งค่าโดยใช้ RTCPeerConnection.setRemoteDescription()
8. รอ ICE ระยะไกลที่เข้ามาใหม่จากบริการส่งสัญญาณ แล้วเพิ่มโดยใช้ RTCPeerConnection.addIceCandidate()

กระบวนการฝั่งที่รับสายจะแตกต่างออกไปเล็กน้อย

1. สร้างอินสแตนซ์ RTCPeerConnection ใหม่ที่มีการกําหนดค่า ICE ที่เหมาะสม
2. รอคําอธิบาย SDP ระยะไกลขาเข้าจากบริการส่งสัญญาณและตั้งค่าโดยใช้ RTCPeerConnection.setRemoteDescription()
3. สร้างคำตอบสำหรับคำอธิบาย SDP ระยะไกลโดยเรียกใช้ RTCPeerConnection.createAnswer()
4. ส่งต่อ (โดยใช้บริการส่งสัญญาณ) คำตอบไปยังคู่สนทนาระยะไกล
5. ลงทะเบียน Listener สําหรับเหตุการณ์ icecandidate ใน RTCPeerConnection
6. สําหรับเหตุการณ์ icecandidate แต่ละรายการ ให้โอน (โดยใช้บริการส่งสัญญาณ) ไปยังคู่สนทนาระยะไกล
7. รอ ICE ระยะไกลที่เข้ามาใหม่จากบริการส่งสัญญาณ แล้วเพิ่มโดยใช้ RTCPeerConnection.addIceCandidate()

ปัญหาของ API นี้คือการดำเนินการส่วนใหญ่เป็นแบบไม่พร้อมกัน ซึ่งมักทำให้การใช้งานจริงของแอปพลิเคชัน WebRTC มีความซับซ้อน ฟังก์ชันหลายรายการจะแสดงผลเป็น Promise ซึ่งต้องได้รับการแก้ไขก่อนจึงจะดําเนินการขั้นตอนถัดไปในกระบวนการต่อได้

เราขอแนะนำให้นักพัฒนาแอปพลิเคชันที่ใช้ API นี้ใช้ async และ await แทนการลงทะเบียน Listeners (โดยใช้ Promise.then()) เนื่องจากจะช่วยให้โค้ดอ่านได้ง่ายขึ้น ลองดูตัวอย่างต่อไปนี้

function createAndSendOffer(peerConnection, signallingService) {
    peerConnection.createOffer()
                  .then(offer => {
                      signallingService.send({
                          type: 'offer',
                          data: offer
                      });
                  });
}

เมื่อเขียนโค้ดด้านบนโดยใช้ async และ await เราจะได้ผลลัพธ์ดังนี้

async function createAndSendOffer(peerConnection, signallingService) {
    const offer = await peerConnection.createOffer();
    signallingService.send({
        type: 'offer',
        data: offer
    });
}