7

webrtc通信のビデオ部分のメディアストリームソースとしてキャンバス要素を使用したいのですが、このトピックについて議論しているリソースがあまり見つかりませんでした。

* 長いバックグラウンド ストーリー *

問題は、カメラからビデオを直接送信できないことです。これは、表示する前にビデオを処理する要件の一部です (一部の画像処理は、この問題の範囲外です)。

以前は、他のピアのブラウザーで、タグを使用してビデオを直接表示する代わりに<video>、非表示のキャンバス要素で何らかの処理を行い、詳細を別のキャンバスにコピーしました (描画を続けるために settimeout を使用し、illusion of live video.

現在、クライアントは video の送信前に処理を行う必要があるため、webrtc を使用してオーディオ ストリームを直接渡しました (以前は、オーディオとビデオの両方が webrtc 経由で送信されていました)。ビデオ ストリームについては、次の 2 つの解決策がありました。

手順:

  1. ローカル ピアでビデオを処理し、非表示のキャンバスに描画します。簡単な部分。

  2. タイムアウトを使用して、画像データを繰り返しキャプチャして送信
    しwebsockets( yes, goes through server)ます。
    b) を使用するRTCDataChannelと、パフォーマンスが大幅に向上しますが、理由もなく失敗する場合があります。他にもいくつかの問題がありました (たとえば、webp の代わりに jpeg を送信したため、余分な帯域幅が使用されました)。

別の大きな問題は、タイムアウトを使用しているためです。タブを切り替えると、反対側でフレームレートが低下します。

それで、手動で行う代わりに、非表示のキャンバスをメディアストリームソースとして使用する方法はありますか?

4

2 に答える 2

3

mozCaptureStreamUntilEnded は、MediaStream に直接接続するために、Martin Thompson が WG のために取り組んでいる提案の基礎となる予定です。ここのコメントによる Firefox での回避策は、MediaStream からキャプチャされたキャンバスからのフィードからの mozCaptureStreamUntilEnded です。これは、 a から MediaStream への直接出力を許可する理由の一部です (また、captureStream も標準化します)。

PeerConnection への mozCaptureStream(UntilEnded) の供給は、しばらくの間中断されていたことに注意してください (部分的には、これまでのところ非標準であるためです)。これは Firefox 36 で修正されています (6 週間以内のリリース チャンネルで予定されており、来週ベータ版になります)。バグ 1097224 およびバグ 1081409 を参照してください。

そして、Chrome と Firefox での信じられないほどハックな方法は、ビデオをウィンドウに入れてから、そのウィンドウをスクリーンキャプチャします。画面共有の許可、ウィンドウの選択などが必要になるため、お勧めしません。

Chrome（またはFirefox）の他の唯一のオプションは、ビデオのフレームをJPEGとして保存し（言及したように）、DataChannelを介して送信することです。事実上 Motion-JPEG ですが、JS によって実行されます。フレームレートと品質 (および遅延) が低下します。エラーが発生した場合、フレームを破棄して次のフレームをデコードすることができるため、信頼できないチャネルを使用することをお勧めします (結局のところ、MJPEG です)。また、遅延が大きくなりすぎる場合は、フレーム サイズを小さくしてください。エンドツーエンドの遅延を見積もる必要があります。最善の方法は、データチャネルを介してデコード時間を送信者にフィードバックし、そのパケットの受信時間を使用して遅延を推定することです。絶対値よりも遅延の変化が気になる!!

于 2015-01-09T14:42:01.070 に答える
0

少なくともfirefoxの場合、考えられる解決策を見つけました。キャンバスを使用し、そのストリームをキャプチャして、canvas.captureStream()を使用して送信しています

// Find the canvas element to capture
var canvasElt = document.getElementsByTagName("canvas")[0];

// Get the stream
var stream = canvasElt.captureStream(25); // 25 FPS

// Do things to the stream
// E.g. Sent it to another computer using a RTCPeerConnection
//      pc is a RTCPeerConnection created elsewhere
pc.addStream(stream);
于 2015-09-04T01:46:05.410 に答える