将一系列图像作为视频呈现到网页上

本文关键字：网页 视频 一系列 图像 | 更新日期: 2023-09-27 18:21:00

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

我看过一些教程，这些教程使用XSockets之类的东西，将网络摄像头的镜头渲染到视频元素或画布上，我想复制它，但要使用从相机接收的字节[]。是否可以使用自定义流而不是本地设备？

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

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

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

将一系列图像作为视频呈现到网页上

您可以使用XSockets和SignalR来实现这一点，但会有不同的方法。

我一直在发送图片从复盆子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

第1版：如果你想要XSockets并需要一个样本，请告诉我。在这种情况下，我可以创建一个非常简单的示例。。。

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

没有太多的代码。如果你正确地运行它，你需要在c:''temp''images下有一个fodler，然后只需将图像放入该文件夹，它们就会出现在每个连接的客户端的浏览器中。注意，由于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>

文件系统观察程序有点奇怪，但它只是向您展示一个示例。。。

相关文章：