Google มุ่งมั่นที่จะก้าวทุนเชื้อชาติชุมชนสีดำ มาดูกันว่า
หน้านี้ได้รับการแปลโดย Cloud Translation API
Switch to English

เริ่มต้นด้วยการเชื่อมต่อแบบ peer

การเชื่อมต่อแบบ Peer เป็นส่วนหนึ่งของข้อกำหนด WebRTC ที่เกี่ยวข้องกับการเชื่อมต่อทั้งสองโปรแกรมบนเครื่องคอมพิวเตอร์ที่แตกต่างกันในการสื่อสารโดยใช้โปรโตคอลแบบ peer-to-peer การสื่อสารระหว่างเพื่อนร่วมงานสามารถวิดีโอข้อมูลไบนารีเสียงหรือพล (สำหรับลูกค้าที่สนับสนุน RTCDataChannel API) เพื่อที่จะค้นพบวิธีที่สองเพื่อนร่วมงานสามารถเชื่อมต่อลูกค้าทั้งต้องให้การกำหนดค่าเซิร์ฟเวอร์ ICE ซึ่งจะมีทั้ง STUN หรือเปิดเซิร์ฟเวอร์และบทบาทของพวกเขาคือการให้ผู้สมัคร ICE ให้กับลูกค้าซึ่งจะถูกโอนไปยังเพื่อนแต่ละระยะไกล นี้การถ่ายโอนของผู้สมัคร ICE เรียกกันว่าการส่งสัญญาณ

การส่งสัญญาณ

ข้อกำหนด WebRTC รวมถึง APIs สำหรับการสื่อสารกับน้ำแข็ง (การเชื่อมต่ออินเทอร์เน็ตสถานประกอบการ) Server แต่องค์ประกอบที่ส่งสัญญาณไม่ได้เป็นส่วนหนึ่งของมัน การส่งสัญญาณเป็นสิ่งจำเป็นเพื่อให้สองเพื่อนร่วมงานที่จะแบ่งปันวิธีที่พวกเขาควรเชื่อมต่อ นี้มักจะได้รับการแก้ไขผ่าน HTTP ตามปกติเว็บ API (เช่นบริการ REST หรือกลไกอื่น ๆ RPC) ที่ใช้งานเว็บสามารถถ่ายทอดข้อมูลที่จำเป็นก่อนที่จะมีการเชื่อมต่อเพียร์จะเริ่ม

รหัสติดตาม snippet แสดงให้เห็นว่าบริการนี้ส่งสัญญาณ fictious สามารถใช้ในการส่งและรับข้อความแบบไม่พร้อมกัน นี้จะถูกนำมาใช้ในตัวอย่างที่อยู่ในคู่มือนี้ในกรณีที่จำเป็น

 // Set up an asynchronous communication channel that will be
// used during the peer connection setup
const signalingChannel = new SignalingChannel(remoteClientId);
signalingChannel.addEventListener('message', message => {
    // New message from remote client received
});

// Send an asynchronous message to the remote client
signalingChannel.send('Hello!');
 

การส่งสัญญาณสามารถดำเนินการในรูปแบบที่แตกต่างกันและข้อกำหนด WebRTC ไม่ต้องการโซลูชั่นที่เฉพาะเจาะจงใด ๆ

การเริ่มต้นการเชื่อมต่อเพียร์

การเชื่อมต่อแบบ peer แต่ละครั้งจะถูกจัดการโดย RTCPeerConnection วัตถุ ตัวสร้างสำหรับชั้นนี้จะใช้เวลาเพียงหนึ่งเดียว RTCConfiguration วัตถุเป็นพารามิเตอร์ของ วัตถุนี้กำหนดวิธีการเชื่อมต่อแบบ peer การตั้งค่าและควรมีข้อมูลเกี่ยวกับเซิร์ฟเวอร์น้ำแข็งกับการใช้งาน

เมื่อ RTCPeerConnection ถูกสร้างขึ้นเราต้องสร้างข้อเสนอ SDP หรือคำตอบขึ้นอยู่กับว่าเราเป็นเพียร์เพียร์เรียกหรือรับ เมื่อข้อเสนอ SDP หรือคำตอบที่ถูกสร้างขึ้นนั้นจะต้องถูกส่งไปยังเพื่อนระยะไกลผ่านช่องทางที่แตกต่างกัน ผ่าน SDP วัตถุกับเพื่อนที่ห่างไกลที่เรียกว่าการส่งสัญญาณและไม่ได้รับการคุ้มครองโดยสเปค WebRTC

เพื่อเริ่มต้นการตั้งค่าการเชื่อมต่อเพียร์จากด้านข้างเรียกเราจะสร้าง RTCPeerConnection วัตถุแล้วโทร createOffer() เพื่อสร้าง RTCSessionDescription วัตถุ คำอธิบายเซสชั่นแห่งนี้ตั้งเป็นคำอธิบายในท้องถิ่นโดยใช้ setLocalDescription() และจะถูกส่งไปแล้วกว่าช่องสัญญาณของเราไปทางด้านที่ได้รับ นอกจากนี้เรายังตั้งค่าฟังกับช่องสัญญาณของเราสำหรับเมื่อมีคำตอบคำอธิบายเซสชั่นที่นำเสนอของเราจะได้รับจากด้านข้างที่ได้รับ

 async function makeCall() {
    const configuration = {'iceServers': [{'urls': 'stun:stun.l.google.com:19302'}]}
    const peerConnection = new RTCPeerConnection(configuration);
    signalingChannel.addEventListener('message', async message => {
        if (message.answer) {
            const remoteDesc = new RTCSessionDescription(message.answer);
            await peerConnection.setRemoteDescription(remoteDesc);
        }
    });
    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    signalingChannel.send({'offer': offer});
}
 

ในอีกด้านหนึ่งที่ได้รับเรารอข้อเสนอเข้ามาก่อนที่เราสร้างของเรา RTCPeerConnection อินสแตนซ์ หลังจากที่เสร็จสิ้นเราตั้งข้อเสนอที่ได้รับใช้ setRemoteDescription() ต่อไปเราเรียก createAnswer() เพื่อสร้างคำตอบที่จะได้รับข้อเสนอ คำตอบนี้ถูกตั้งค่าเป็นคำอธิบายในท้องถิ่นโดยใช้ setLocalDescription() และส่งไปยังด้านการเรียกเซิร์ฟเวอร์การส่งสัญญาณของเราแล้ว

 const peerConnection = new RTCPeerConnection(configuration);
signalingChannel.addEventListener('message', async message => {
    if (message.offer) {
        peerConnection.setRemoteDescription(new RTCSessionDescription(message.offer));
        const answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);
        signalingChannel.send({'answer': answer});
    }
});
 

เมื่อทั้งสองคนรอบข้างได้ตั้งทั้งรายละเอียดเซสชั่นท้องถิ่นและระยะไกลพวกเขารู้ว่าขีดความสามารถของเพียร์ระยะไกล นี้ไม่ได้หมายความว่าการเชื่อมต่อระหว่างเพื่อนร่วมงานที่มีความพร้อม สำหรับการทำงานที่เราจำเป็นต้องเก็บรวบรวมผู้สมัคร ICE ในแต่ละเพียร์และการถ่ายโอน (มากกว่าช่องสัญญาณ) เพื่อเพียร์อื่น ๆ

ผู้สมัคร ICE

ก่อนที่ทั้งสองคนรอบข้างสามารถ communitcate ใช้ WebRTC ที่พวกเขาต้องการในการแลกเปลี่ยนข้อมูลการเชื่อมต่อ เนื่องจากเงื่อนไขของเครือข่ายสามารถแตกต่างกัน dependning กับจำนวนของปัจจัยบริการภายนอกมักจะใช้สำหรับการค้นพบผู้สมัครที่เป็นไปได้สำหรับการเชื่อมต่อกับเพียร์ บริการนี้จะเรียกว่าน้ำแข็งและใช้อย่างใดอย่างหนึ่งหรือเซิร์ฟเวอร์ STUN เปิด STUN ยืนสำหรับเซสชันการข้ามผ่านยูทิลิตี้สำหรับ NAT และมักจะถูกนำมาใช้ทางอ้อมในการใช้งาน WebRTC มากที่สุด

TURN (การข้ามผ่านการใช้ Relay NAT) เป็นทางออกที่สูงขึ้นที่ประกอบด้วยโปรโตคอล STUN และบริการมากที่สุดในเชิงพาณิชย์ตาม WebRTC ใช้เซิร์ฟเวอร์เปิดสำหรับการสร้างการเชื่อมต่อระหว่างเพื่อนร่วมงาน API WebRTC ได้สนับสนุนทั้ง STUN และเปิดโดยตรงและจะมีการรวมตัวกันภายใต้ระยะที่สมบูรณ์มากขึ้นการเชื่อมต่ออินเทอร์เน็ตสถานประกอบการ เมื่อมีการสร้างการเชื่อมต่อ WebRTC เรามักจะให้หนึ่งหรือหลาย ICE เซิร์ฟเวอร์ในการกำหนดค่าสำหรับ RTCPeerConnection วัตถุ

หยดน้ำแข็ง

เมื่อ RTCPeerConnection วัตถุจะถูกสร้างขึ้นในกรอบอ้างอิงใช้เซิร์ฟเวอร์ของ ICE ที่จัดไว้ให้เพื่อรวบรวมผู้สมัครสำหรับการจัดตั้งการเชื่อมต่อ (ผู้สมัคร ICE) เหตุการณ์ icegatheringstatechange บน RTCPeerConnection สัญญาณในสิ่งที่รัฐชุมนุม ICE คือ ( new , gathering หรือ complete )

ในขณะที่มันเป็นไปได้สำหรับเพียร์จะรอจนกว่าการชุมนุม ICE เสร็จสมบูรณ์แล้วก็มักจะมีประสิทธิภาพมากขึ้นที่จะใช้ "น้ำแข็งหยด" เทคนิคและส่งแต่ละ ICE ผู้สมัครเพื่อนระยะไกลตามที่ได้รับการค้นพบ นี้อย่างมีนัยสำคัญจะช่วยลดเวลาการตั้งค่าสำหรับการเชื่อมต่อเพียร์และช่วยให้การสนทนาทางวิดีโอการเริ่มต้นด้วยความล่าช้าน้อย

เพื่อรวบรวมผู้สมัคร ICE เพียงแค่เพิ่มฟังสำหรับ icecandidate เหตุการณ์ RTCPeerConnectionIceEvent ปล่อยออกมาในฟังว่าจะมี candidate คุณสมบัติที่แสดงถึงการเป็นผู้สมัครใหม่ที่ควรจะถูกส่งไปยังเพื่อนระยะไกล (ดูตัวอย่าง)

 // Listen for local ICE candidates on the local RTCPeerConnection
peerConnection.addEventListener('icecandidate', event => {
    if (event.candidate) {
        signalingChannel.send({'new-ice-candidate': event.candidate});
    }
});

// Listen for remote ICE candidates and add them to the local RTCPeerConnection
signalingChannel.addEventListener('message', async message => {
    if (message.iceCandidate) {
        try {
            await peerConnection.addIceCandidate(message.iceCandidate);
        } catch (e) {
            console.error('Error adding received ice candidate', e);
        }
    }
});
 

การเชื่อมต่อที่จัดตั้งขึ้น

เมื่อผู้สมัคร ICE มีการรับเราควรคาดหวังว่ารัฐสำหรับการเชื่อมต่อเพียร์ของเราก็จะเปลี่ยนไปยังรัฐที่เกี่ยวโยงกัน ในการตรวจสอบนี้เราเพิ่มฟังของเรา RTCPeerConnection ที่เราฟัง connectionstatechange เหตุการณ์

 // Listen for connectionstatechange on the local RTCPeerConnection
peerConnection.addEventListener('connectionstatechange', event => {
    if (peerConnection.connectionState === 'connected') {
        // Peers connected!
    }
});
 

เอกสาร RTCPeerConnection API