WebRTC 聲音影像出現兩個 element 如何合併 track

最近遇到一個問題我在使用的 WebRTC 聲音跟影像會分開沒辦法合併再一起

聲音與影像分開發生的原因

可以參考一下我原本的方法，我會把 track event 的 stream 放入 element，使用這個方法如果 track 跳兩次就會發生我前面說的聲音跟影像沒辦法合併再一起的問題

pc.ontrack = function(event) {
    var el = document.createElement(event.track.kind)
    el.srcObject = event.streams[0]
    el.autoplay = true
    el.controls = true

    document.getElementById('video').appendChild(el)
}

解決聲音與影像分開的問題

找了很久終於發現要要使用 MediaStream 建立一個 Stream 把 Audio 與 Video 丟入 Track 把它合併再一起

建立 MediaStream

建立 MediaStream 之後把 event.track 使用 addTrack 的方法加入

inboundStream = new MediaStream();
inboundStream.addTrack(event.track);

標準的方法可以參考 MDN 在 RTCPeerConnection.addTrack() 的處理方法

let inboundStream = null;

pc.ontrack = ev => {
  if (ev.streams && ev.streams[0]) {
    videoElem.srcObject = ev.streams[0];
  } else {
    if (!inboundStream) {
      inboundStream = new MediaStream();
      videoElem.srcObject = inboundStream;
    }
    inboundStream.addTrack(ev.track);
  }
}

以上就是處理 WebRTC 在聲音影像分開的方法

參考資料

• https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/ontrack
• https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/addTrack