webrtc 學習心得

透過 v-for 動態建立 video 不要用 index 當key，避免陣列移除元素時造成後面元素 index 改變而重新render 以至於 srcobject 失效

目前發現一方 create offer 時另一方也需要 create offer ，不然 video 無法順利載入 (未觸發 onloadedmetadata)，以至於視訊和音訊都出不來，回應offer 的時機在 ontrack (晚於peerConnection.createAnswer())

peerConnections.value[user].ontrack = (event) => {

    nextTick(async () => {

        const video_dom = videoRefs.value.find(a => a.id == `video_${user}`);

        if (video_dom && event.track.kind == 'video') {

            video_dom.srcObject = event.streams[0];

                // 觸發信令重新協商 否則無法正確載入 video metadata (未觸發onloadedmetadata)

                if (peerConnections.value[user].signalingState == "stable") {

                    const offer = await peerConnections.value[user].createOffer();

                    await peerConnections.value[user].setLocalDescription(offer);

                    connectionWebrtc.value.invoke("SendMessage", peerID.value, JSON.stringify(offer), user); // notify by signalr

                }

        }

    });

}