web版WebRTC使用

文档说明：只记录关键地方;2023-02-02
目标：熟悉WebRTC的使用

let begin = null;
let peerConnection=null;
 
// Parse the uint32 PRIORITY field into its constituent parts from RFC 5245,
// type preference, local preference, and (256 - component ID).
// ex: 126 | 32252 | 255 (126 is host preference, 255 is component ID 1)
function formatPriority(priority) {
    return [
        priority >> 24,
        (priority >> 8) & 0xFFFF,
        priority & 0xFF
    ].join(' | ');
}
 
function iceCallback(event) {
    const elapsed = ((window.performance.now() - begin) / 1000).toFixed(3);
    //console.log(event,event.candidate,RTCPeerConnection.prototype)
    if (event.candidate) {
        if (event.candidate.candidate === '') {
            return;
        }
        const {candidate} = event;
        console.log(
            elapsed,
            candidate.component,
            candidate.type,
            candidate.foundation,
            candidate.protocol,
            candidate.address,
            candidate.port,
            formatPriority(candidate.priority)
        );
        document.querySelector('.candidates').innerHTML +=`${candidate.type} ${candidate.protocol} ${candidate.address} ${candidate.port}  <br/>`
    } else if (!('onicegatheringstatechange' in RTCPeerConnection.prototype)) {
        // should not be done if its done in the icegatheringstatechange callback.
 
    }
}
 
 
function gatheringStateChange() {
    console.log("iceGatheringState:  "+peerConnection.iceGatheringState);
 
    if (peerConnection.iceGatheringState === 'complete') {
        const elapsed = ((window.performance.now() - begin) / 1000).toFixed(3);
        console.log("iceGatheringState OK :"+elapsed,"ICE 准备好了,可以开始交换信令(SDP)了")
        console.log("offer:", peerConnection.localDescription,peerConnection.localDescription.sdp)
    }
 
}
 
 
function iceCandidateError(e) {
    console.log(
        'The server ' + e.url +
        ' returned an error with code=' + e.errorCode + ':\n' +
        e.errorText + '\n'
    )
    // The interesting attributes of the error are
    // * the url (which allows looking up the server)
    // * the errorCode and errorText
}
 
 
//这里才是开始入口
(async () => {
    //准备ICE
    let configuration = {
        iceServers: [
            {
                urls: ["stun:stun.freeswitch.org"]
            },
        ],
        iceCandidatePoolSize: 0
    };
    console.log(configuration)
 
    peerConnection = new RTCPeerConnection(configuration);
    console.log(peerConnection)
    peerConnection.onicecandidate = iceCallback;
    peerConnection.onicegatheringstatechange = gatheringStateChange;
    peerConnection.onicecandidateerror = iceCandidateError;
    peerConnection.ontrack = function (event) {
        console.log(event);
        /*
        if (remote_video.srcObject !== event.streams[0]) {
            remote_video.srcObject = event.streams[0];
        }
        */
    };
    peerConnection.onsignalingstatechange = function (event) {
        console.log(event, peerConnection.signalingState);
        if (peerConnection.signalingState === "have-local-pranswer") {
            // setLocalDescription() has been called with an answer
        }
    };
 
    begin = window.performance.now();
 
    const offer = await peerConnection.createOffer({
        "offerToReceiveAudio": true,
        "offerToReceiveVideo": true
    });
 
    await peerConnection.setLocalDescription(offer);
 
 
    /*
        await peerConnection.setRemoteDescription(payload.sender_sdp);
        let answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);
 
        await peerConnection.setRemoteDescription(payload.sender_sdp);
     */
 
})()
 
 
 

# 浏览器查看 WebRTC 状态信息
chrome://webrtc-internals

参考文档

1. webrtc.org
2. WebRTC samples 示例
3. WebRTC samples GitHub repository
4. available stun servers
5. WebRTC可用性检测
6. WebRTC三种类型（Mesh、MCU 和 SFU）的多方通信架构
7. stackoverflow WebRTC
8. WebRTC on MDN
9. Source repository
10. WebRTC Documentation
11. 快速下载webRTC源码
12. [译] NAT 穿透是如何工作的：技术原理及企业级实践
13. NAT介绍以及穿透各种类型nat的技术实现包括对称型nat