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

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