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