Javascript WebRTC在不停止流的情况下更改/移动视频元素

Javascript WebRTC在不停止流的情况下更改/移动视频元素,javascript,webrtc,simplewebrtc,Javascript,Webrtc,Simplewebrtc,当我在Chrome中使用WebRTC时,我注意到这些流的持久性仍然有些不稳定。我需要在显示元素之前创建一个视频流(从技术上讲,我最初只需要音频曲目,但是在没有replaceTrack()的情况下重新协商似乎是一个问题,所以我现在同时启用这两个功能) 元素然后由JavaScript动态呈现,需要开始接收WebRTC视频。问题是,在WebRTC创建时,我想要显示的这个视频元素还不存在。我看不出有什么方法可以告诉WebRTC在流启动后更改正在渲染的视频元素,这可能吗?我主要是玩SimpleWebRTC

当我在Chrome中使用WebRTC时,我注意到这些流的持久性仍然有些不稳定。我需要在显示元素之前创建一个视频流(从技术上讲,我最初只需要音频曲目,但是在没有replaceTrack()的情况下重新协商似乎是一个问题,所以我现在同时启用这两个功能)

元素然后由JavaScript动态呈现,需要开始接收WebRTC视频。问题是,在WebRTC创建时,我想要显示的这个视频元素还不存在。我看不出有什么方法可以告诉WebRTC在流启动后更改正在渲染的视频元素,这可能吗?我主要是玩SimpleWebRTC,但我愿意直接使用WebRTC——从查看文档的角度来看,我也找不到使用原始WebRTC的方法。我还尝试将原始视频元素移动到新元素中,但这会导致视频流中断/停止:

newElement.appendChild(originalWebRTCVideoTag);
除了杀死整个流并重新启动,我还有什么选择

更新

对于这两种方法,videoTag都是通用的DOM视频标记,webrtc是
webrtc
对象的实例,通过SimpleWebRTC(SimpleWebRTC.webrtc,SimpleWebRTC环绕)建立了工作连接。我现在为那些希望看到实际代码的人准备了一个JSFIDLE,但这应该足够多的信息来重现它

//这在stackoverflow中似乎不起作用,可能是因为它拒绝摄像机捕获
var simplertc=新的SimpleWebRTC({
localVideoEl:“webrtc本地”,
remoteVideosEl:'webrtc remote',
媒体:{“音频”:正确,“视频”:{
“可选”:[{“最小宽度”:“640”},{“最小高度”:“480”}],“必需”:{}
}},
自动请求媒体:正确
});
var webrtc=simplertc.webrtc;
//这一部分过于简化,在这种情况下没有意义
//在动态创建时,我在应用程序中处理此元素
//生成的时间要晚得多
$('#dynamic')。附加到('');
var videoTag=$('#动态视频')[0];
simplertc.on('readyToCall',function(){
simplertc.joinRoom('my-room-875385864');//随机名称
//这时本地视频应该准备好了,我们不需要远程视频来进行测试
//测试用例1(如果需要,替换为测试用例2中的逻辑)
videoTag.srcObject=webrtc.localStreams[0];
//结束测试用例
});
视频{
边框:1px纯红;
宽度:200px;
}
/*与原始视频重叠是为了显示硬件加速效果*/
#动态的{
位置:绝对位置;
边框:1px纯黑;
宽度:200px;
高度:200px;
左:100px;
顶部:50px;
}


您可以使用
MediaSource
sourceopen
事件,
.addSourceBuffer()
.appendBuffer()
。请看,

谢谢,我已经通过在线教程了解了大部分方法,其中解释了您提到的方法(也查看了您的方法)。现在我唯一的问题是将MediaStream从webRTC转换成MediaSource.appendBuffer()可以使用的缓冲区,我看不出有什么办法,也看了看MediaStream中的视频MediaStreamTrack,它似乎也没有暴露缓冲区。我假设缓冲区(基于规范的ArrayBuffer)是流的底层像素数组?您是否可以包括您在问题中尝试过的
javascript
?好的,刚刚找到了一种替代方法,但它的速度非常慢,所以如果缓冲区方法的性能更好,我想了解它。我当前的方法不使用.appendBuffer()或.addSourceBuffer()。我改为这样做:
video.srcObject=webrtc.localStreams[0]你说的“慢”是什么意思?大约3-5 FPS,而原来的WebRTC视频元素似乎是实时的。另外,用我到目前为止尝试过的方法中的部分更新问题(如前所述,我还无法使用您的方法获得有效的解决方案,因此它不会是有效的代码)。在chrome,chrome您应该能够在
设置下启用硬件加速,此问题特定于此元素,而不是其他视频标签。您做错了什么。流(远程或其他)完全独立于播放它的任何视频元素,或是否有任何视频元素正在播放它。这与WebRTC无关。请参见。
srcObject
是一个
DOM
属性,而不是jQuery属性,请使用
videoTag[0]。srcObject
。仍然不确定是什么问题?@guest271314谢谢,这是一个打字错误,我知道这与jQuery无关。键入上述示例时,我忘记了
[0]
,在我的原始代码中它就在那里。