3

C# アプリからキャプチャした画像を使用して、HTML5 の「リモート デスクトップ」を作成しようとしています。画像は base64 文字列に変換され、socket.io 経由でページに送信され、キャンバスに表示されます。私のPCではかなりうまく機能しますが、遅いコンピューターでは機能しません. 更新が十分に速くないように見え、ページがクラッシュします。「受信」アクション コードは次のとおりです。

socket.of('/1').on('receive', function (data) {
    var img = new Image();
    img.onload = function () {
        context.drawImage(img, 0, 0, example.width, example.height);
    };

    img.src = "data:image/png;base64," + data.message;
});

データは 34 ミリ秒ごとに送信されるため、キャンバスは約 29 fps で更新され、ライブ ビデオのように見えます。データを受け取り、別の「スレッド」で画像を描画する方法はありますか? または、この問題を解決する方法を誰かが提案できますか? 助けてくれてありがとう。

4

4 に答える 4

1

Browserlingはまさにあなたが達成しようとしていることを実行します。それは を使用してリモート デスクトップ インターフェイスを表示します<canvas>。都合のよいことに、彼らはコードを未圧縮のままにしています。彼らがどのようにそれを行っているかを見ることができます。

C# をVNCサーバーとして設定できる場合は、WebSocket を使用するブラウザー VNC クライアントであるnoVNC<canvas>を使用します。(読む価値があるのは、noVNC のパフォーマンス ノートです。)

于 2012-06-06T18:07:26.620 に答える
0

相互通信を実行し、サーバーからクライアントと同じようにいつでもクライアントからサーバーにデータを送信できるsocket.ioを使用している間は、クライアントにデータをスパムするだけでなく、もう少し注意するようにメカニズムを作成する必要があります。

画像データをクライアントに送信するときは、すぐに別の画像を送信しないでください。まず、pingを低くすることは1つのことですが、帯域幅を低くすることもできます。これは別のことです。
サーバーからクライアントに画像データを送信すると、クライアントはデータを受信し、データを受信して​​処理した情報をサーバーに自動的に送信するようにクライアントを作成し、クライアントが次の画像を受信する準備ができていることをサーバーに認識させます。

FPSはドロップされますが、これは、あらゆるタイプの接続およびあらゆるタイプの解像度でリアルタイムビデオを効率的に機能させるための一般的な方法です。
これは、既存のビデオを再生していないため、バッファリングまたはプリキャッシュプロセスの場所がありません。
パフォーマンスをわずかに向上させるために、画像を受信して​​処理するためのpingと反応速度に基づいて計算し、次のフレームを少し早く送信します。接続が良好な場合はFPSが5〜10、低速の場合は0〜3増加する可能性があります。

それまでの間、リアルタイム画像のストリーミングを可能にするMJPEG（Motiona JPEG）などのリアルタイム画像のストリーミングのより良い方法を検討することをお勧めしますが、画像ストリーミングにWebSocketを使用すると、プロトコルの詳細を満たすための処理。MJPEGは画像ストリーミングに使用することを目的としています。

于 2012-06-07T09:16:03.150 に答える
0

このスレッドは少し古いため、解決策が見つかった可能性があります。

そうでない場合は、HTML4/5 ブラウザ ベースのリモート デスクトップ クライアントである Myrtilleをご覧ください。C#、websockets、キャンバス、および base64 でエンコードされたイメージ (構成と帯域幅に応じて、PNG、JPEG、または WEBP) を使用します。

数年前、HTML5 ブラウザーは大量の Websocket トラフィックに対応できなかったため、アップリンク用とダウンリンク用の 2 つの Websocket をセットアップしようとしました。少しは役に立ちましたが、満足のいくものではありませんでした。次のパケットを送信する前に、クライアント側のパケットに ack を受信させて、websocket を調整しようとしました。一部のブラウザーでは改善されましたが、他のブラウザーでは速度が低下しました。

現在、ブラウザはそのようなスロットリングを必要としません。Myrtille は、画像をブラウザにプッシュするだけです。

とはいえ、RDP プロトコルは、ディスプレイ全体ではなく、ほとんどのビデオ コーデックと同様に、2 つのフレーム (領域) の違いのみを処理して送信するほどスマートです。

于 2016-04-11T16:51:44.240 に答える
-1

UI / DOM が更新、変更、変更されている限り、またはビューポートの変更に関連する何かが行われている間、ブラウザはロックアップします。

今、あなたがやろうとしていることはほとんど不可能です。私が不可能と言わなかった唯一の理由は、あなたが今の時代を決して知らないからです;)。

私も ac# 開発者であり、今年は来年までに予定されている変更について、少しばかり気になっています。

あなたは約1年早いです...

于 2012-06-06T17:55:20.763 に答える