呼叫第三方介面實現呼叫臺功能WebRTC

WebRTC學習筆記——建立連線 - 簡書 (jianshu.com)

(4條訊息) webRTC（八）：檢視offer/answer 的 SDP_曉果部落格的部落格-CSDN部落格

(4條訊息) WebRTC原始碼研究（32）獲取offer answer建立的SDP_極客雨露的部落格-CSDN部落格

(4條訊息) webrtc 的 CreateOffer 過程分析_zhuiyuanqingya的部落格-CSDN部落格

WebRTC是一個開源的專案，可以提供瀏覽器，手機應用之間實時通訊能力。

• 主要JavaScript API

  • MediaStream 音視訊流物件
  • RTCPeerConnection 端對端音視訊連線物件
  • RTCDataChannel 端對端資料通道物件

1、由於瀏覽器API有相應的字首，需要有兩個相容函式來首先處理一下：（這步作用不清楚照抄下來了）

function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia ||
        navigator.webkitGetUserMedia ||
        navigator.mozGetUserMedia ||
        navigator.msGetUserMedia;
    
 
return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection ||
        window.webkitRTCPeerConnection ||
        window.mozRTCPeerConnection ||
        window.msRTCPeerConnection;
    return !!window.RTCPeerConnection;
}

2、可以通過配置自己的STUN伺服器地址，或者不寫配置使用瀏覽器預設的STUN伺服器地址，來建立兩個RTCPeerConnection物件來模擬連線

　　區域網可以不配置STUN伺服器地址

　　不給config，區域網內兩個peer是可以找到對方的         配置個內網stun也沒用     如果有網路穿透的需求，那需要自己搭建一個stun伺服器

//var configuration = {
        //    //iceServers: [{ url: "stun:127.0.0.1:9876" }]
        //};
//,otherConnection是被呼叫方，被呼叫方是接收資料的
youConnection = new RTCPeerConnection();
otherConnection = new RTCPeerConnection();

3.通訊雙方交換ICE候選路徑，也就是通過ICE獲取到自己的IP和埠號後，再互相交換此資訊(暫時也不清楚什麼作用)

    youConnection.onicecandidate = function (event) {
        if (event.candidate) {
            console.log(event.candidate);
            otherConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

    otherConnection.onicecandidate = function (event) {
        if (event.candidate) {
            console.log(event.candidate);
            youConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

4.通訊雙方通過交換offer和answer來互換SDP資訊  ---建立媒體協商

    var offerOptions={
        offerToRecceiveAudio: 1,
        offerToReceiveVideo: 1
    };

    youConnection.createOffer(offerOptions)
        .then(function(offer){
            console.log(offer);
            youConnection.setLocalDescription(offer);
            otherConnection.setRemoteDescription(offer);

            otherConnection.createAnswer(offerOptions)
                .then(function(answer){
                    console.log(answer);
                    otherConnection.setLocalDescription(answer);
                    youConnection.setRemoteDescription(answer);
                });
    });