0

我正在尝试将 H264 IP 摄像机/视频流的渲染合并到网页中。

我看过使用 XSockets 之类的东西并将网络摄像头的素材渲染到 Video 元素或画布上的教程，并且希望复制它，但使用从相机接收到的 byte[]。是否可以使用自定义流而不是本地设备？

我在网页上渲染静止图像（即单帧）没有问题，但希望能够实时显示图像（或当我们从存储中接收图像时），而不必刷新页面等来获取下一帧。

我目前通过将单个图像作为 base64 图像传递并使用 img 标签进行渲染来做到这一点。我该怎么做呢？这可能使用 XSockets 或 SignalR 等吗？

我正在使用 C#、.Net4.5 和 Asp.Net MVC5

4

1 回答 1

1

您可以使用 XSockets 和 SignalR 执行此操作，但会有不同的方法。

我一直在将图像从 Raspberry PI 发送到带有 XSockets 的网页。当运动传感器（在 PI 上）被触发时，我拍摄了图像。

由于支持二进制帧，您可能会使用 XSockets 获得更好的性能。因此，您无需发送比实际图像大小大约 36% 的 BASE64 编码字符串。

您还可以将元数据与二进制帧一起传递，因为 XSockets 也支持这一点。

关于发送二进制数据的文档：http: //xsockets.net/docs/4/binary-data

我不是 SignalR 专家，但我的猜测是您将对图像进行 BASE64 编码并将其包装在 JSON 中，因为这是 SignalR 接受的。如果您在 SignalR 中发送图像方面需要帮助，请查看 jabbr 上的 SignalR 房间https://jabbr.net/#/rooms/signalr

EDIT1：让我知道您是否要使用 XSockets 并需要一个示例。在这种情况下，我可以创建一个非常简单的示例......

EDIT2：好的，所以我创建了一个简单的解决方案，您可以从我的保管箱下载（一段时间）。链接：VisualStudio SLN

没有太多的代码。如果您直接运行它，您将需要在 c:\temp\images 下有一个文件夹，然后只需将图像拖放到该文件夹​​中，它们就会出现在每个连接的客户端的浏览器中。请注意，您还将获得带有消息的文件名，因为 xsockets 支持元数据附件...

文件系统观察者

/// <summary>
/// This will be a singleton since the range is internal. You cant connect to this controller.
/// </summary>
[XSocketMetadata("ImageWatcher", PluginRange.Internal)]
public class ImageWatcher : XSocketController
{
    private ImageController imageController;
    public ImageWatcher()
    {
        imageController = new ImageController();

        var watcher = new FileSystemWatcher
        {
            Path = @"c:\temp\images\",
            NotifyFilter = NotifyFilters.LastWrite,
            Filter = "*.jpeg"
        };
        watcher.NotifyFilter = NotifyFilters.FileName | NotifyFilters.Size;            
        watcher.Changed += watcher_Changed;
        watcher.EnableRaisingEvents = true;
    }

    void watcher_Changed(object sender, FileSystemEventArgs e)
    {
        try
        {
            var blob = File.ReadAllBytes(e.FullPath);
            var metadata = new { filename = e.Name };
            imageController.InvokeToAll(blob, metadata, "newimage");

        }
        catch
        {

        }
    }
}

控制器

/// <summary>
/// Simple controller that the users will connect to.
/// It does not even have a method in this sample...
/// 
/// The ImageWatcher class will send images to the clients when you drop a imagein c:\temp\image
/// </summary>
[XSocketMetadata(PluginAlias = "image")]
public class ImageController : XSocketController
{

}

JavaScript/HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>    
</head>
<body>
    <img id="latestImage">
    <p id="filename"></p>
    <script src="Scripts/XSockets.latest.js"></script>
    <script src="Scripts/jquery-2.1.1.js"></script>
    <script>
        var conn
        $(function() {
            conn = new XSockets.WebSocket('ws://127.0.0.1:4502', ['image']);

            conn.controller('image').on('newimage', function (b) {
                console.log(b);

                $('#filename').text(b.data.filename);

                var uint8Array = new Uint8Array(b.binary);
                var arrayBuffer = uint8Array.buffer;
                var blob = new Blob([arrayBuffer], { type: "image/jpg" });
                var blobUrl = window.URL.createObjectURL(blob);
                $("#latestImage").attr("src", blobUrl);
            });
        });
    </script>
</body>
</html>

基本上就是这样。文件系统观察器有点奇怪，但它只是为了向您展示一个示例......

于 2014-09-08T15:35:24.100 回答