WebRTC在不停止流的情況下更改/移動視頻元素

Question

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

該元素隨後由JavaScript動態呈現，需要開始接收WebRTC視頻。問題是，在創建WebRTC時，我想要顯示它的這個視頻元素還不存在。我沒有看到告訴WebRTC在流開始後將視頻元素更改爲可能的方式嗎？我主要使用SimpleWebRTC，但是可以直接使用WebRTC - 從查看文檔我找不到使用原始WebRTC的方法。我也嘗試了全新的視頻元素遷入新元素，但是這會導致視頻流打破/停止：

newElement.appendChild(originalWebRTCVideoTag); 

短殺死整個流和重新啓動，我有哪些選擇？

UPDATE：

對於這兩種方法，videoTag是一個通用的DOM視頻標籤，是的WebRTC經由SimpleWebRTC（simpleWebRtc.webrtc，其SimpleWebRTC環繞）設立了一個工作連接WebRTC對象的實例。我現在正在爲那些想看到實際代碼的人準備一個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] 

具有諷刺意味的是，雖然搞亂了這個方法，但更多的是我acci與webRTC元素和生成的視頻區域（videoTag）的視頻區域重疊，並且即使webRTC位於背景上，與其重疊的videoTag的角落實時運行，不同於繼續在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 */); 

進一步研究

這可能是瀏覽器的錯誤，一個hackerish解決辦法，似乎工作就是確保新生成的視頻元素完全重疊由原始視頻元素（即使原始視頻元素設置爲在所有其他元素之後的背景上渲染（並且在非透明背景之後）。這似乎在硬件加速中起作用。

Answer 1

您可以使用MediaSource，sourceopen事件，.addSourceBuffer(),.appendBuffer()。請參閱HTML5 audio streaming: precisely measure latency?,Unable to stream video over a websocket to Firefox