Question

我有一个问题，如何在WPF的Image容器中显示来自我的网络摄像头的流？我已经使用Emgu获取了流并将其转换为BitmapSource，但是现在我不知道如何将每个X ms中使用caliburn（MVVM）将图像从我的网络摄像头绑定到WPF ....

 <Image x:Name="imageWebcam" />

Answer 1

好的解决方案找到了。我无法显示整个代码，但我可以解释一下，绑定wpf查看：

<Image x:Name="ImageWebcam" />

到我的ViewModel（使用Caliburn FrameWork，但这可以很容易地适应MVVM模式）我必须使用具有相同名称的函数绑定Image：

    public WriteableBitmap ImageWebcam
    {
        get
        {
            return this.imageWebcam;
        }
        set
        {
            this.imageWebcam = value;
            this.NotifyOfPropertyChange(() => this.ImageWebcam);
        }
    }

要更新此Image我使用Timer，必须初始化为ViewModel构造函数：

public MachinBidule()
{
    timeIsRunningOut= new System.Timers.Timer();
    timeIsRunningOut.AutoReset = true;
    timeIsRunningOut.Interval = 10;
    timeIsRunningOut.Elapsed += (sender, e) => { UpdateImage(); };
    capture = new Capture();   // Capture the webcam using EmguCV
}

现在您可以使用调度程序管理更新：

// Update the image, method called by the timer every 10 ms 
private void UpdateImage()
{
    // If capture is working
    if(capture.QueryFrame()!= null)
    {
        //capture an Image from webcam stream and 
        Image<Bgr, Byte> currentFrame = capture.QueryFrame().ToImage<Bgr, Byte>();
        if (currentFrame != null)
        {
            Application.Current.Dispatcher.BeginInvoke(new System.Action(() => { imageWebcam = new WriteableBitmap(BitmapSourceConvert.ToBitmapSource(currentFrame)); NotifyOfPropertyChange(() => ImageWebcam); }));
        }
    }
}

您可以注意到我们需要从emguCV Image<Bgr,Byte>转换为WPF WriteableBitmap并使用NotifyOfPropertyChange(() => ImageWebcam)通知更新。

如果您有任何疑问，请随时与我联系或发表评论。如果您发现任何错误，请不要犹豫纠正我（语法和代码）。

Answer 2

您应该使用MediaElement来显示视频，而不是Image控件：

XAML：

<MediaElement Source="{Binding VideoAddress}" />

视图模型：

private URI videoAddress=new URI("C:\video.wmv");
public URI VideoAddress
{
   get { return videoAddress; }
   set
   {
       videoAddress = value; 
       OnPropertyChanged("LeafName");
   }
}

此外，您可以使用WPF-MediaKit来显示来自WebCam的视频。或see this tutorial。

更新

您应该使用Image来显示图片：

<Image x:Name="imageWebcam" />

和C＃：

BitmapImage logo = new BitmapImage();
logo.BeginInit();
logo.UriSource = new Uri("C:/1.png");
logo.EndInit();

imageWebcam.Source = logo;

Answer 3

使用WriteableBitmap作为图像元素的来源。您应该在视图模型中提供回调，以便为每个新帧传递帧数据。在后面的代码中从您的视图订阅此回调。然后，您可以将每个帧写入位图。在这种情况下，我不认为数据绑定是一种很好的方法。

在处理视频帧流时，WriteableBitmap是WPF中最好的选择：

WriteableBitmap

Answer 4

这是我最终基于WritableBitmap获得的解决方案。我有一个网络摄像头，可以30 FPS的速度传输图像。我需要实时处理这些图像并显示它们。 CameraOnFrame是一个事件处理程序，它在非UI线程上每秒触发30次，因此需要Dispatcher.Invoke。 Image<Bgr, byte>是Emgu.CV图像，但基本上是24位BGR图像的包装。

XAML：

<Image x:Name="ImageDisplay"/>

代码：

_writableBitmap = new WriteableBitmap(_imageWidth, _imageHeight, 96, 96, PixelFormats.Bgr24, null);
ImageDisplay.Source = _writableBitmap;
...
private void CameraOnFrame(object sender, Image<Bgr, byte> img)
{
    if (!Dispatcher.CheckAccess())
    {
        Dispatcher.Invoke(() => CameraOnFrame(sender, img));
        return;
    }

    _writableBitmap.WritePixels(new Int32Rect(0, 0, img.Width, img.Height), img.MIplImage.ImageData, img.MIplImage.ImageSize, img.MIplImage.WidthStep);
}

在WPF中从我的网络摄像头显示视频流？

4 个答案: