WebRTCを変更する/移動するビデオエレメントを停止するストリームなし

Question

ChromeでWebRTCを使用しているので、これらのストリームの耐久性はやや不安定であることに気付いています。ビデオストリームを表示する要素が表示される前にビデオストリームを作成する必要があります（技術的には、最初はオーディオトラックが必要ですが、replaceTrack（）を使用しない再ネゴシエーションはすべて問題のようですので、 ）。

要素はJavaScriptによって動的にレンダリングされ、WebRTCビデオの受信を開始する必要があります。問題は、WebRTCの制作時点で、私がそれを見せたいビデオ要素がまだ存在していないことです。ストリームの開始後にレンダリングされるビデオ要素を変更するようにWebRTCに指示する方法はありません。私は主にSimpleWebRTCで遊んでいましたが、WebRTCを直接使用することにはオープンしています。生のWebRTCで行う方法を見つけることができなかったドキュメントを見ていました。私はまた、新しい要素に、元のビデオ要素を移動しようとしたが、これは/停止を解除するビデオストリームが発生します。全体の流れを殺害し、再起動の

newElement.appendChild(originalWebRTCVideoTag); 

ショート、私のオプションは何ですか？

UPDATE：両方のアプローチについて

、videoTagはのWebRTCはSimpleWebRTC（SimpleWebRTCがラップアラウンドsimpleWebRtc.webrtc）を介して確立されたワーキング接続にWebRTCオブジェクトのインスタンスであり、一般的なDOMのビデオタグです。私は実際のコードを見たい人のために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で実行を継続する要素の残りとは異なり、リアルタイムで実行されます-5FPS。これは、ここでの問題はハードウェアアクセラレーションだと私に信じさせています。何とか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のバグ、新しく生成されたビデオの要素が完全に重なっていることを確認することです動作するようですhackerish回避策かもしれ

さらなる研究（元のビデオ要素が他のすべての要素の背後で（そして非透明な背景の背後で）背景にレンダリングするように設定されている場合でも、ハードウェアアクセラレーションが発生します。

Answer 1

MediaSource,sourceopenイベント、.addSourceBuffer()、.appendBuffer()を使用できます。HTML5 audio streaming: precisely measure latency?、Unable to stream video over a websocket to Firefox