Question

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

我见过使用XSockets之类的教程并将网络摄像头的素材渲染到视频元素或画布上，并希望使用从相机收到的字节[]来复制它。是否可以使用自定义流而不是本地设备？

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

我目前通过将单个图像作为base64图像传递并使用img标记进行渲染来完成此操作。我该怎么做呢？这可能是使用XSockets或SignalR等。

我正在使用C＃，。Net4.5和Asp.Net MVC5

Answer 1

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

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

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

您还可以将元数据与二进制框架一起传递，因为在XSockets中也支持元数据。

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

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

EDIT1：如果您要使用XSockets并需要样本，请告诉我。在这种情况下，我可以创建一个非常简单的样本...

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

代码不多。如果你在dorectly运行它，你需要在c：\ temp \ images下有一个fodler，然后将图像放到该文件夹中，它们将出现在每个连接的客户端的浏览器中。请注意，由于xsockets支持元数据附件......

，您还将获得带有消息的文件名

FileSystem Watcher

/// <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>

这基本上就是它的全部内容。文件系统观察器有点奇怪，但它只是向您展示样本......

将一系列图像作为视频渲染到网页上

1 个答案:

FileSystem Watcher

控制器

的JavaScript / HTML