WebRTC改​​變/移動視頻元素而不停止流

Question

當我在Chrome中使用WebRTC時，我注意到這些流的持久性仍然有些不穩定。 我需要在顯示它的元素顯示之前創建一個視頻流（從技術上講，我最初只需要音頻軌道，但是沒有replaceTrack（）的重新協商似乎是一個問題，所以我現在一次啟用它們）。

然后，該元素由JavaScript動態呈現，需要開始接收WebRTC視頻。 問題是，在創建WebRTC時，我想要顯示的視頻元素尚不存在。 我沒有看到告訴WebRTC在流啟動后更改正在渲染的視頻元素的方法，這可能嗎？ 我主要使用的是SimpleWebRTC，但是我可以直接使用WebRTC - 從查看文檔我無法找到使用原始WebRTC的方法。 我還嘗試將原始視頻元素移動到新元素中，但這會導致視頻流中斷/停止：

newElement.appendChild(originalWebRTCVideoTag);

沒有殺死整個流並重新啟動，我有什么選擇？

更新 ：

對於這兩種方法，videoTag是一個通用的DOM視頻標簽，webrtc是WebRTC對象的一個​​實例，它通過SimpleWebRTC建立工作連接（simpleWebRtc.webrtc，SimpleWebRTC包裝）。 我現在正在為那些想要查看實際代碼的人組建一個JSFiddle，但這應該足以重現這一點。

 // this doesn't seem to be working in stackoverflow, probably because it rejects video camera capture var simplertc = new SimpleWebRTC({ localVideoEl: 'webrtc-local', remoteVideosEl: 'webrtc-remote', media: {"audio": true, "video": { "optional": [{"minWidth": "640"}, {"minHeight": "480"}], "mandatory": {} }}, autoRequestMedia: true }); var webrtc = simplertc.webrtc; // this portion is overly simplified, in this case there is no point // in creating this dynamically, in the app I'm working on this element // is generated much later $('#dynamic').appendTo('<video id="dynamic-video"></video>'); var videoTag = $('#dynamic-video')[0]; simplertc.on('readyToCall', function() { simplertc.joinRoom('my-room-875385864'); // random name // by this time the local video should be ready, we don't need remote ones for our test // test case 1 (replace with logic from test case 2 if needed) videoTag.srcObject = webrtc.localStreams[0]; // end test case }); 

 video { border: 1px solid red; width: 200px; } /* overlap with original video is intentional to show hardware acceleration effect */ #dynamic { position: absolute; border: 1px solid black; width: 200px; height: 200px; left: 100px; top:50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <script src="https://simplewebrtc.com/latest-v2.js"></script> <div id='webrtc'> <video id='webrtc-local'></video> <div id='webrtc-remote'></div> </div> <div id='dynamic'> </div> 

方法1，在嘗試接近2時意外地偶然發現了這一點

試過以下，它的工作速度比我想要的慢很多，約為5 FPS：

// note that I can just as easily use remote streams here
videoTag.srcObject = webrtc.localStreams[0]

具有諷刺意味的是，在使用這種方法的時候，我不小心重疊了webRTC元素的視頻區域和生成的視頻區域（videoTag），即使webRTC在背景上，視頻標記的重疊區域也會實時運行，不像其余的元素繼續以3-5 FPS運行。 這讓我相信這里的問題是硬件加速。 我能以某種方式為videoTag啟用嗎？

方法2

var media = new MediaSource();
videoTag.src = URL.createObjectURL(media);
// guessing mimetype from a few WebRTC tutorials I stumbled upon
var srcBuf = media.addSourceBuffer(‘video/webm;codecs=”vp8, vorbis”’);

// need to convert webrtc.localStreams[0] or its video track to a buffer somehow???
srcBuf.appendBuffer(/* buffer */);

進一步的研究

這可能是Chrome中的一個錯誤，一個看似有效的黑客解決方法是確保新生成的視頻元素與原始視頻元素完全重疊（即使原始視頻元素設置為在所有其他元素后面的背景上呈現（並且在非透明背景之后）。這似乎有助於硬件加速。

Answer 1

您可以使用MediaSource ， sourceopen事件， .addSourceBuffer() .appendBuffer() 。 請參閱HTML5音頻流：精確測量延遲？ ， 無法通過websocket將視頻流式傳輸到Firefox