Custom buttons for WebCam?

[Jana]

Good morning,

 

I would like to ask three questions concerning your radWebCam control.

1. We're using it within an application running on a Windows 10 tablet and I would like to ask if it's possible to move the control panel to the left or right side to have it vertical? As our tablet is pretty heavy (it's a Dell Latitude 7212 for rough environments), the usability of our app would improve a lot if our workers could keep their tablet in both hands while taking a photo.

2. Regarding the use on a tablet, I wanted to enlarge the control panel of the camera as well as the buttons on it. I noticed a kind of strange behaviour when I change the Control Panel Height via the smart tag. As soon as I modify this value to something else than 30, the camera doesn't launch anymore and VS 2019 says, that the application is in break mode due tu a System.InvalidOperationException that was thrown within External Code. Is that maybe related to the video format or to other parameters that I set when launching the camera? I attached you my demo project, you can download it here: https://easyupload.io/la69am

3. We would like to add a button to swap the camera (front and back). I just dragged a radButton with this functionality onto the control panel of the webcam and anchored it to the bottom. It works fine but the only problem which is left is that I would like to disable or hide this button when the user took a picture and has the choice of saving or discarding it. The event "SnapshotTaken" is fired only after clicking on the disc to save the snapshot. But how can I "catch" this state of the photo preview before saving it?

 

Thank you in advance for your help and have a nice day!

 

[Dinko | Tech Support Engineer]

Hi Jana,

Thank you for your interest in our RadWebCam control for WF. Let me get straight to your questions.

       1. We're using it within an application running on a Windows 10 tablet and I would like to ask if it's possible to move the control panel to the left or right side to have it vertical? . . . . 

The API of the RadWebCam control does not provide such an option out of the box. The buttons are placed inside a WebCamRootRadElement which can't be moved to the left or right side. What I can suggest here is to use standalone buttons which you can position whenever your want. Let say we want to create a TakeShapshot button. In this case, you can create a new RadButton, position it inside a separate panel on the right or left side of the RadWebCam. Inside its Click event handler, you can call the TakeSnapshot() method of the RadWebCam.

RadButton newButton = new RadButton();
newButton.Click += NewButton_Click;
newButton.Text  = this.radWebCam1.WebCamElement.TakeSnapshotButton.Text;
newButton.TextElement.CustomFont = this.radWebCam1.WebCamElement.TakeSnapshotButton.TextElement.CustomFont;

private void NewButton_Click(object sender, EventArgs e)
{
    radWebCam1.TakeSnapshot();
}

In the above code snippet, you can observe how I can copy the same glyph of the default TakeSnapshotButton to the new custom button.

       2. Regarding the use on a tablet, I wanted to enlarge the control panel of the camera as well as the buttons on it. I noticed a kind of strange behaviour when I change the Control Panel Height via the smart tag. . . .  .

I was able to observe this behavior. The reason behind this is that the ControlPanelHeight property is set too early before RadWebCam is initialized. I would recommend performing any further customization of the control inside its Load event. After doing this, the exception does not occur anymore.

private void CameraView_Load(object sender, EventArgs e)
{
    radWebCam1.Initialize(videoDevices[0], videoFormats[0], audioDevices[0]); 
    this.radWebCam1.ControlPanelHeight = 40;
    radWebCam1.Start();
    t.Interval = 1600;
    t.Tick += T_Tick;
    t.Start();
	. . .  . .
}

      3. We would like to add a button to swap the camera (front and back). I just dragged a radButton with this functionality onto the control panel of the webcam and anchored it to the bottom.  . . . . . 

You are right that when you click on the TakeShapshot button, the SnapshotTaken will be called. What you can do to catch the moment before the SnapshotTaken event is to subscribe to the TakeSnapshotButton MouseDown event. In its event handler, you can set the Visibility of your custom button to Collapsed/Hidden. 

public CameraView()
{
    InitializeComponent();
    videoDevices = RadWebCam.GetVideoCaptureDevices();
    videoFormats = RadWebCam.GetVideoFormats(videoDevices[0], true);
    audioDevices = RadWebCam.GetAudioCaptureDevices();
    SelectedCameraIndex = 0;
    this.radWebCam1.WebCamElement.TakeSnapshotButton.MouseDown += TakeSnapshotButton_MouseDown;
}

private void TakeSnapshotButton_MouseDown(object sender, MouseEventArgs e)
{
    myButton.Visibility = ElementVisibility.Collapsed;
}

I hope I was able to cover all your questions.

Regards,
Dinko
Progress Telerik

[Jana]

Hi Dinko,

 

Thank you very much for all the infos and examples. They helped me a lot and I managed to create my own control panel for radWebCam and hide the native one :) 

I've just noticed one little thing:

myButton.Visibility = ...

does not work for me. But 

myButton.ButtonElement.Visibility = ...

worked for me. Just in case of someone else will find this thread later and would like to try out this solution :) 

 

So thank you very much again for your fast and professional response and have a nice day!

Regards,
Jana

[Dinko | Tech Support Engineer]

On my side, I have used RadButtonElement. I think that is the difference between my and your approach. If you are using RadButton, you can hide the button using its ButtonElement.Visibility property.

[Jana]

Hello again, 

The proposed solution works really fine and I'm very happy about the result.

I just got one more question: is it possible to enable/disable the flash of the camera and also the zoom?

 

Thank you again in advance and have a nice day!

[Dinko | Tech Support Engineer]

For the first question, what I can suggest is to subscribe to the Shown event of the SettingsDialog. The tricky part here is that you first will need to get the SettingsDialog. You can do that in the SettingsDialogShowing event handler of the RadWebCam control. In the following code snippet, we are accessing the Zoom control on the second page of the RadPageView control.

private void CameraView_Load(object sender, EventArgs e)
{
 . . . .
    this.radWebCam1.SettingsDialogShowing += RadWebCam1_SettingsDialogShowing;
}

private void RadWebCam1_SettingsDialogShowing(object sender, CameraSettingsDialogShowingEventArgs e)
{
    e.SettingsDialog.Shown += SettingsDialog_Shown;
}

private void SettingsDialog_Shown(object sender, EventArgs e)
{
    CameraSettingsDialog dialog = sender as CameraSettingsDialog;
    foreach (var item in dialog.Controls)
    {
        if (item is RadPageView)
        {
            var pageView = item as RadPageView;
            pageView.SelectedPage = pageView.Pages[1];
            pageView.Pages[1].Controls[2].Controls[0].Visible = false;
        }
    }
}

As for your second question, at this moment of writing out RadWebCam control does not provide an API to disable the flash of the camera device. Your suggestion is meaningful, that is why I have logged a Feature Request in our Feedback Portal where you can vote for its implementation and track its progress. I have updated your Telerik Points for bringing this to our attention.