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

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 แทนการลงทะเบียน Listener (โดยใช้ 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
    });
}