前面我們使用 RTCPeerConnection.addTrack() 來把我們的音視訊傳送給對方

const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
stream.getTracks().forEach((track) => {
  peerConn.addTrack(track, localStream)
})

以上方案雖然很適合做音視訊的聊天通話，但如果我們的設備沒有鏡頭及麥克風，我們只是想觀看對方的視訊，就沒辦法使用以上的方法了！

如果要完成上述的功能需要使用 addTransceiver

rtpTransceiver = RTCPeerConnection.addTransceiver(trackOrKind, init);

• trackOrKind: 要接收視訊就傳 'video', 要接收音訊就傳 'audio'
• init 為一個 object 型態這邊我們只用 direction 這個key

詳細參數請參考 addTransceiver

範例

建立一個 PeerConnection 只接收音視訊

const configuration = {
  iceServers: [
    {
      urls: 'stun:stun.l.google.com:19302',
    },
  ],
}
peerConn = new RTCPeerConnection(configuration)

peerConn.addTransceiver('video', { direction: 'recvonly' })
peerConn.addTransceiver('audio', { direction: 'recvonly' })

從 Github 抓下來測試

完整內容可以參考 Github

❯ git clone https://github.com/tc3oliver/one-way-broadcasting.git
❯ cd one-way-broadcasting
❯ npm install
❯ node server.js

啟動

發送端

• http://localhost:8088/

接收端

• http://localhost:8088/viewer.html