1

jpeg 画像をキャプチャして base64 文字列に変換し、HTML5 キャンバスに描画するために websockets (Nodejs および socket.io) を使用して送信することにより、ビデオ ストリームを作成しようとしています。これは、画面をキャプチャし、 SocketIO4Netライブラリを使用して送信するための C# のコードです。

Client directSocket = new Client("http://IPHERE");
directSocket.Connect();

private void timer1_Tick(object sender, EventArgs e)
{
    Rectangle bounds = Screen.GetBounds(Point.Empty);
    Bitmap bitmap = new Bitmap(bounds.Width, bounds.Height);

    using (Graphics g = Graphics.FromImage(bitmap))
    {
        g.CopyFromScreen(Point.Empty, Point.Empty, bounds.Size);
    }

    pictureBox1.Image = bitmap;

    // Convert the pictureBox into a byte[] array
    System.IO.MemoryStream stream = new System.IO.MemoryStream();
    pictureBox1.Image.Save(stream, System.Drawing.Imaging.ImageFormat.Jpeg);
    byte[] imageBytes = stream.ToArray();

    // Convert byte[] to Base64 string
    string base64String = Convert.ToBase64String(imageBytes);

    // Send using SocketIO4Net
    directSocket.Emit("send", new { message = base64String });
}

これは正常に機能し、base64String はそれを発行するノード サーバーに送信されます。これはクライアント側の JavaScript コードです。

var socket = io.connect('IPHERE');

socket.on('receive', function (data) {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    var img = new Image();
    img.onload = function () {
        context.drawImage(img, 0, 0, canvas.width, canvas.height);
    };

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

私の問題は、base64String が大きく、クライアントがそれを受け取ってキャンバスに画像を表示するのに十分な速さで放出されないことです。それが私のノード サーバー (安価な VPS) なのか、それとも文字列が大きすぎるのかはわかりません。base64String を圧縮してから、受信時に解凍するために送信することは可能ですか? または、私ができる別の方法はありますか？助けてくれてありがとう。

4

3 に答える 3

1

画像を低品質のjpgとして保存してみてください。エンコーダーとエンコーダーパラメーターを受け入れる保存オーバーライドを使用できます。

于 2012-06-05T14:35:46.150 に答える
0

l昨日、c# - base64 - websocket - gwt (java script) img オブジェクトへの接続でテストしました。イントラネットで使用しており、ストリームのパフォーマンスが優れています。しかし、テストすると、Firefox でメモリ リークが発生します。Firefox はすべての画像をキャッシュするためです。私の場合、毎秒10枚です。1 枚の写真 200kb。この弱い私はキャンバス部分をテストします。

于 2012-07-04T06:05:32.083 に答える
0

最新のブラウザーのみをサポートする必要がある場合は、キャンバス要素を使用して、そのデータを raw バイトとして送信します。ImageData オブジェクトを使用してデータを canvas 要素にプッシュします。

ImageData オブジェクトの作成方法の詳細については、MDN の記事「キャンバスを使用したピクセル操作」を参照してください。

于 2012-06-07T23:54:35.030 に答える