如何與簡單對等體進行屏幕共享 webRTC SDK

Question

我正在嘗試實現 webrtc 和簡單的聊天對等方。 一切正常，但我想添加屏幕共享選項。 為此，我嘗試了：

$("#callScreenShare").click(async function(){
   if(captureStream != null){                
     p.removeStream(captureStream)
     p.addStream(videoStream)
     captureStreamTrack.stop()
     captureStreamTrack =captureStream= null
     $("#callVideo")[0].srcObject = videoStream
     $(this).text("screen_share")
   }else{
     captureStream = await navigator.mediaDevices.getDisplayMedia({video:true, audio:true})
     captureStreamTrack = captureStream.getTracks()[0]
     $("#callVideo")[0].srcObject = captureStream
     p.removeStream(videoStream)
     console.log(p)
     p.addStream(captureStream)
     $(this).text("stop_screen_share")
   }
})

但是我停止了攝像頭，之后什么也沒做，我對等計算機上的視頻 stream 被阻止了。 沒有錯誤，僅此而已。

當事件 stream被觸發時，我已經放置了一個 console.log。 第一次觸發，但是當我調用addStream方法時，它沒有

如果有人可以幫助我，那將非常有幫助。

Answer 1

我所做的是更換軌道。 因此，不要刪除和添加 stream：

p.streams[0].getVideoTracks()[0].stop()
p.streams[0].replaceTrack(p.streams[0].getVideoTracks()[0], captureStreamTrack, p.streams[0])

這將用顯示器之一替換 stream 中的視頻軌道。

簡單對等文檔

Answer 2

下面的 function 可以解決問題。 只需調用replaceTrack function，將新軌道和遠程對等實例傳遞給它。

function replaceTrack(stream, recipientPeer ) {
  recipientPeer.replaceTrack(
    recipientPeer.streams[0].getVideoTracks()[0],
    stream,
    recipientPeer.streams[0]
  )
}