我正在尝试将 H264 IP 摄像机/视频流的渲染合并到网页中。
我看过一些教程，这些教程使用 XSockets 之类的东西，并将网络摄像头的素材渲染到视频元素或画布上，我想复制它，但使用从摄像头接收到的 byte[]。是否可以使用自定义流而不是本地设备？
我在网页上渲染静止图像（即单帧）没有问题，但我希望能够实时显示图像（或者当我们从存储中接收图像时），而不必刷新页面等. 获取下一帧。
我目前通过将单个图像作为 base64 图像传递并使用 img 标签进行渲染来做到这一点。 我该怎么做呢？这可能使用 XSockets 或 SignalR 等吗？
我正在使用 C#、.Net4.5 和 Asp.Net MVC5
【问题讨论】：
标签： c# asp.net html signalr xsockets.net
您可以同时使用 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：好的，所以我创建了一个简单的解决方案，您可以从我的 Dropbox 下载（一段时间）。链接：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
{
}
<!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>
基本上就是这样。文件系统观察器有点奇怪，但它只是给你看一个示例......
【讨论】：