Operational camera/microphone for silverlight4beta

Silverlight4beta brings a much-anticipated new feature: Support for cameras/microphones.

This article will demonstrate this new feature through an instance of camera operations. Our instance mainly implements the following functions:

• Display Device Name
• Start/stop video capture
• Real-time image capturing

The microphone usage is similar to that of the camera and cannot be intuitively displayed.

Old Rules: Let's create a simple UI first. The XAML is as follows:

<Usercontrol. resources> <style targettype = "textblock"> <setter property = "fontsize" value = "12"/> <setter property = "fontfamily" value = "Arial, simsun "/> </style> <style targettype =" button "> <setter property =" fontsize "value =" 12 "/> <setter property =" fontfamily "value =" simsun "/> <setter property =" margin "value =" 5 "/> </style> </usercontrol. resources> <stackpanel X: Name = "layoutroot" width = "300"> <textblock> <run Text = "Video device name:"/> <run X: name = "txtcameraname"/> </textblock> <border borderbrush = "black" borderthickness = "2" width = "300" Height = "200"> <rectangle X: name = "Container"> </rectangle> </Border> <stackpanel orientation = "horizontal"> <button content = "start" X: name = "btnstart"/> <button content = "stop" X: Name = "btnstop"/> <button content = "screenshot" X: name = "btncapture"/> </stackpanel> <image X: Name = "imgcapture" width = "100" Height = "100"/> </stackpanel>

Press F5 to make the runtime look like this

Txtcameraname is used to display the name of the current device (camera or microphone ).

Imgcapture is an image control that is used to carry the generated data.

Container is a rectangle used to carry videobrush, that is, our camera impact feedback area. Of course, rectangle is not limited here. Any control that can be used to set a brush can be used. For example, is it interesting to fill the text with the camera image in bursh (but it makes no sense -_-), this depends on everyone's imagination.

The following buttons start the camera, stop, and take the current image.

Okay, the UI is so simple. Next, let's look at the key code.

CaptureSource source;source = new CaptureSource();

First, we instantiate a capturesource as the camera/microphone source. It can be used as the source of videobrush.

VideoCaptureDevice vcd ;
vcd = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();

Then we will use the static method of the capturedeviceconfiguration class: getdefavidevideocapturedevice to get an instance of videocapturedevice. This method is used to obtain the default video device. This is related to the default device settings in the top texture of the article. Of course, we can also get all the available devices and let the user choose by themselves-that is, through the getavailablevideocapturedevices () method.

After obtaining the instance, we assign it to the videocapturedevice attribute of capturesource.

So far, our preparation is over. It's very simple.

Next, the camera is simpler-you can use the START () and stop () Methods of capturesource.

It should be noted that the consistent security principle of Silverlight is that the user must trigger and agree to sensitive operations. Therefore, when we use the START () or stop () method, we must use buttons or other user behaviors, rather than writing them in the loaded event or even constructor, which is intentionally triggered by the user. Then, with the user's consent, a working camera operating program will prompt the following when preparing to start the camera:

When the user clicks "yes", it is deemed that the user agrees to start the camera/microphone.

Therefore, we must confirm that the camera/microphone is approved by the user in the code that starts the camera/microphone. The following code is used:

If (capturedeviceconfiguration. alloweddeviceaccess | capturedeviceconfiguration. requestdeviceaccess () {// start the camera/microphone and other operations}

The screenshot function is used. You can use the asynccaptureimage method of capturesource to view the definition of this method.

Its callback directly returns writeablebitmap, which can be directly used as the image source, which is very convenient.

Finally, let's take a look at all the background code.

public MainPage(){    InitializeComponent();    this.Loaded += new RoutedEventHandler(MainPage_Loaded);    this.btnCapture.Click += new RoutedEventHandler(btnCapture_Click);    this.btnStart.Click += new RoutedEventHandler(btnStart_Click);    this.btnStop.Click += new RoutedEventHandler(btnStop_Click);}void btnStart_Click(object sender, RoutedEventArgs e){    if (CaptureDeviceConfiguration.AllowedDeviceAccess || CaptureDeviceConfiguration.RequestDeviceAccess())    {        source.Start();    }}void btnStop_Click(object sender, RoutedEventArgs e){    source.Stop();}void btnCapture_Click(object sender, RoutedEventArgs e){    if (source.State == CaptureState.Started)        source.AsyncCaptureImage((bitmap) => { imgCapture.Source = bitmap; });}void MainPage_Loaded(object sender, RoutedEventArgs e){    VideoCaptureDevice vcd = CaptureDeviceConfiguration.GetDefaultVideoCaptureDevice();    txtCameraName.Text = vcd.FriendlyName;    CaptureSource source;    source = new CaptureSource();    source.VideoCaptureDevice = vcd;    VideoBrush vb = new VideoBrush();    vb.SetSource(source);    Container.Fill = vb;}

OK, all done! Run F5.

Let's take a look at your photo ..