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

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
    });
}