Day29 使用 addTransceiver 单向接收串流

前面我们使用 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