實踐：《從頭到腳擼一個多人視頻聊天 — 前端 WebRTC 實戰（一）》

請先閱讀原文，連接：從頭到腳擼一個多人視頻聊天 — 前端 WebRTC 實戰（一），本文只涉及實踐過程當中的問題

一、video元素的srcObject屬性

先看chrome時，沒看到該屬性，查詢MDN也顯示沒有這屬性。但後測試Chrome ,Safari,  ff ，又發現都有該屬性

  

二、是否要啓動本地服務器

谷歌，ff 不須要，Safari須要!

三、獲取音、視頻流信息及相應事件

除了文中提到的： getAudioTracks()、getVideoTracks()   ，還有stream.getTracks() 能夠獲取它們。  經過音、視頻的Track，能夠監聽它們的設備名字，靜音或結束時的事件。  注意的是，<video>元素只有play,seek,end,volumechange 等事件，沒有mute事件的。   

可是在我測試中，沒法監聽到Track的onmute事件，  並且muted屬性一直是false.

四、本地 1 v 1 對等鏈接 的過程

整個過程看得不是太懂，因爲源碼我安裝npm不成功，因此把代碼摘出來。看一下它的執行流程：
 

<div class="demo">
        <div class="rtcBox">
            <div>
                <video src="" id="rtcA" controls autoplay></video>
                <h5>A</h5>
            </div>
            <div>
                <video src="" id="rtcB" controls autoplay></video>
                <h5>B</h5>
                <button  id="call">call</button>
                <button  id="hangup">hangup</button>
            </div>
        </div>
    </div>

let peerA,peerB;
async function init() {
    //一、 保存本地流到全局
    this.localstream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true });
    let video = document.querySelector('#rtcA');
    video.srcObject = this.localstream;

    
    //二、 建立A,B輸出端  
    let PeerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
    peerA = new PeerConnection();
    peerA.addStream(this.localstream); // 添加本地流
    console.log("一、        打開A 視頻流，並放入peerA")
    // 監聽 A 的ICE候選信息    若是收集到，就添加給 B
    peerA.onicecandidate = (event) => {
        console.log('九、 十、    A  onicecandidate', event);
        if (event.candidate) {
            peerB.addIceCandidate(event.candidate);
        }
    };

    peerB = new PeerConnection();
    // 監聽 B 的ICE候選信息   若是收集到，就添加給 A
    peerB.onicecandidate = (event) => {
        console.log('四、五、十二、  B  onicecandidate', event);
        if (event.candidate) {
            peerA.addIceCandidate(event.candidate);
        }
    };
    //三、 監聽是否有媒體流接入，若是有就賦值給 rtcB 的 src
    peerB.onaddstream = (event) => {
        console.log('十一、        event-stream', event);
        let video = document.querySelector('#rtcB');
        video.srcObject = event.stream;
    };

}
document.getElementById("call").addEventListener("click", async function () {
    //四、B發起呼叫
    let offer = await peerB.createOffer( {
        offerToReceiveAudio: 1,
        offerToReceiveVideo: 1
    }); // 建立 offer
    console.log("二、       建立offer")
    await peerB.setLocalDescription(offer); // 呼叫端設置本地 offer 描述
    console.log("三、       B set offer後")
    await peerA.setRemoteDescription(offer); // 接收端設置遠程 offer 描述
    console.log(" 六、       A set offer 後")
    //A響應
    let answer = await peerA.createAnswer(); // 接收端建立 answer
    console.log("七、       建立answer")
    await peerA.setLocalDescription(answer); // 接收端設置本地 answer 描述
    console.log(" 八、       A set answer 後")
    await peerB.setRemoteDescription(answer); // 呼叫端設置遠程 answer 描述
    console.log("1三、       B set answer 後")
});


document.getElementById("hangup").addEventListener("click", function () {
    //五、 斷開
    peerA.close();
    peerB.close();
    peerA = null;
    peerB = null;
    this.allowCall = false;
    this.allowHangup = true
    console.log("1四、        斷開")
})

    init();

經過打印消息出現的順序，能夠看到執行過程：