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