1

我试图通过捕获 jpeg 图像并将其转换为 base64 字符串来创建视频流，然后使用 websockets（Nodejs 和 socket.io）发送它以在 HTML5 画布上绘图。这是 C# 中用于捕获屏幕并使用SocketIO4Net库发送屏幕的代码：

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脚本）img对象。我在 Intranet 中使用它，流性能很好。但是，如果您对其进行测试，您会在 Firefox 中看到内存泄漏。因为 Firefox 会缓存所有图像。在我的情况下，每秒 10 张。一张图片 200kb。这个弱我测试画布部分。

于 2012-07-04T06:05:32.083 回答
0

如果您只需要支持现代浏览器，请使用画布元素并将该数据作为原始字节发送。使用 ImageData 对象将数据推送到画布元素中。

有关如何创建 ImageData 对象的更多信息，请参阅 MDN 文章“使用画布进行像素操作” 。

于 2012-06-07T23:54:35.030 回答