用MVVM模式开发中遇到的零散问题总结（4）——自制摄像头拍摄大头贴控件

 

---

 　　一直有个疑问，为什么silverlight对摄像头支持这么好，WPF却一个库都没有....于是我各种苦恼啊，各种CodeProject啊，终于让我找到海外兄弟写的源码了，原理是通过不断向摄像头读取图片不断刷新到窗体控件上。有Demo就直接封个控件呗，具体怎么实现的也忙不得管它了....

 

 功能还是十分不错呢。特别是它拍照后添加到列表里的动画效果十分不错哦~~

 核心就是这几个类了，由于原作者估计很喜欢MVVM所以通过各种Command来控制的，不能直接导航看着有点头昏。我就自己的风格封了个简单易懂的控件。

新建一个工程，把这个文件夹添加进工程后，新建用户控件

前台代码：

xmlns:camPlayer="clr-namespace:CatenaLogic.Windows.Presentation.WebcamPlayer"

<camPlayer:CapPlayer x:Name="camPlayer"  RenderTransformOrigin="0.5,0.5" >
            <camPlayer:CapPlayer.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleY="-1" ScaleX="1"/>
                    <SkewTransform AngleY="0" AngleX="0"/>
                    <RotateTransform Angle="0"/>
                    <TranslateTransform/>
                </TransformGroup>
            </camPlayer:CapPlayer.RenderTransform>
        </camPlayer:CapPlayer>

其实就一句话，主要是不知道为什么出现的效果是上下颠倒的，所以我给上下翻转下....

 

后台代码： 

public ImageSource imgSource
        {
            get { return (ImageSource)GetValue(imgSourceProperty); }
            set { SetValue(imgSourceProperty, value); }
        }
       
        public static readonly DependencyProperty imgSourceProperty =
            DependencyProperty.Register("imgSource", typeof(ImageSource), typeof(CopCamPlayer), null);

        

        private void UserControl_Loaded(object sender, RoutedEventArgs e)
        {            
            camPlayer.Device = new CapDevice();
            camPlayer.Device.MonikerString = CapDevice.DeviceMonikers[0].MonikerString;//设置通过哪个设备            
        }

        //拍照片
        public void CaptureImage()
        {
            imgSource = camPlayer.CurrentBitmap;
        }             

        //停止摄像头占用
        private void UserControl_Unloaded(object sender, RoutedEventArgs e)
        {
            camPlayer.Device.Stop(); 
            GC.Collect(); //回收垃圾，不然停止不了占用         
        }

注意：一定要调用GC.Collect();强制回收一下垃圾，不然摄像头依然被占用(从c#发家的我，被这个坑惨了T_T)

 

其中拍的照片imgSource定义成依赖项属性方便Image控件直接绑定数据源。CaptureImage()方法的调用可以通过添加行为实现：

<Grid x:Name="圆形按钮" Height="56" Margin="0,0,335.333,119" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="59.333">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <ei:CallMethodAction TargetObject="{Binding ElementName=copCamPlayer}" MethodName="CaptureImage"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
</Grid>
<Image HorizontalAlignment="Right" Margin="0,250,67.5,163" Width="242" Source="{Binding imgSource, ElementName=copCamPlayer}"/>

 　　其中CopCamPlayer就是上面代码封好的控件，而CallMethodAction可以调用的方法需要满足无参数，无返回值就行。image控件绑定到拍照的结果属性上，这样点击圆形按钮就可以拍照拉~~

哈哈还是简单呢，主要外国友人封的好啊，附上外国友人源代码：

https://files.cnblogs.com/tong-tong/WebcamPlayer_1.1.zip

这个类的功能不仅于此，本人现在比较忙没仔细研究，各位有发现什么新功能告知我，thx。