none
How to Blur a specific area while previewing from a camera ?

    Question

  • Hi ,

    I'm developing a UWP with VS2017 XAML C#

    I have in my XAML the below

    <Canvas x:Name="previewCanvas2" Tapped="PreviewCanvas2_Tapped" Width="380" Height="350" Background="Gray"     HorizontalAlignment="Center" VerticalAlignment="Center"   >
                                                           
                                                           
                                                           
                                                            <CaptureElement  x:Name="previewElement2" Height="350"  Width="380"  HorizontalAlignment="Center"  VerticalAlignment="Center" Canvas.ZIndex="-1"  />
                                                            <Canvas     Background="Transparent" >
                                                                <Border BorderThickness="1" VerticalAlignment="Bottom" x:Name="Border2" Width="385" Background="Transparent">
                                                                    <TextBlock Margin="8,250,0,0" FontWeight="Bold" TextAlignment="Center"  x:Name="BusyText2" Text="TAP TO SCAN"
                                                                        VerticalAlignment="Bottom" Height="30" Width="360" Opacity="0.6" Canvas.ZIndex="1"
                                                                            Foreground="#00205b" >

                                                                    </TextBlock>
                                                                </Border>
                                                            </Canvas>
                                                        </Canvas>

    I can initialize the camera and make it work so my question is not how to do this.

    I'm creating dynamically a Rectangle inside my preview element

     double x = 300;
                    double y = 300;

                    Windows.Foundation.Point p;
                    Windows.Foundation.Point MyPoint = Get_Position();
                    p.X = MyPoint.X + 130;
                    p.Y = MyPoint.Y + 50;
                    rand.NextBytes(rgb);
                    System.Drawing.Color c = System.Drawing.Color.FromArgb(0xFF, rgb[0], rgb[1], rgb[2]);

                    Button MyRect1 = new Button { Width = 135, Height = 130 };
                    MyRect1.BorderThickness = new Thickness(3);
                    MyRect1.BorderBrush = new SolidColorBrush(Colors.Red);
                    MyRect1.Background = new SolidColorBrush(Colors.Transparent);
                    MyRect1.Foreground = new SolidColorBrush(Colors.Red);
                    //MyRect1.Content = ".";

                    Canvas.SetLeft(MyRect1, p.X + 10 - radius);
                    Canvas.SetTop(MyRect1, p.Y + 70 - radius);
                    previewCanvas2.Children.Add(MyRect1);

    Everything is working fine .

    My question is How can I make the background blur without including the rectangle area?

    Meaning that the camera must show without blur only the area inside the rectangle.

    Everything else should be blurred.

    How can I do it ?

    Appreciate your help on this

    Friday, February 8, 2019 1:23 PM

Answers

  • The problem not to make all the preview element with blur but parts of it.

    So what I did was to separate the screen with canvas  and broders , adjusting Margins , width and Height ,from left , from right etc and blur the borders

    for eg . This is from top until it meets the first top line of the Rectangle.

    And according to this I have created 4 different areas fixing each time the widths and the heights and the Margins and finally I have managed to succeeded with this.

    <Canvas  Background="Transparent">
                                                                <Border Margin="0,65" BorderBrush="Transparent"  Height="35" BorderThickness="0" VerticalAlignment="Top"   Width="380" Background="#073464" Opacity="0.5" Canvas.ZIndex="1">
                                                                    <Interactivity:Interaction.Behaviors>
                                                                        <behaviors1:Blur x:Name="BlurBehavior"  Value="5" Duration="0"
                                                                            Delay="0" AutomaticallyStart="True"/>
                                                                    </Interactivity:Interaction.Behaviors>
                                                                </Border>
                                                               
                                                               
                                                            </Canvas>


    • Marked as answer by zakkar Monday, February 11, 2019 1:37 PM
    Monday, February 11, 2019 1:37 PM

All replies

  • @zakkar,

    I'm not aware of such a way to modify only part of stream. If we apply effect we may have to apply for the whole stream like mentioned here:

    https://docs.microsoft.com/en-us/windows/uwp/audio-video-camera/effects-for-video-capture

    Do you mind to add some controls which will overlap the preview capture element? This seems to be a workaround and I'm not so sure whether this makes sense to you.

    Best regards,

    Barry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Monday, February 11, 2019 7:57 AM
    Moderator
  • Hi Barry ,

    I will give it a try

    Thank you

    Monday, February 11, 2019 8:11 AM
  • The problem not to make all the preview element with blur but parts of it.

    So what I did was to separate the screen with canvas  and broders , adjusting Margins , width and Height ,from left , from right etc and blur the borders

    for eg . This is from top until it meets the first top line of the Rectangle.

    And according to this I have created 4 different areas fixing each time the widths and the heights and the Margins and finally I have managed to succeeded with this.

    <Canvas  Background="Transparent">
                                                                <Border Margin="0,65" BorderBrush="Transparent"  Height="35" BorderThickness="0" VerticalAlignment="Top"   Width="380" Background="#073464" Opacity="0.5" Canvas.ZIndex="1">
                                                                    <Interactivity:Interaction.Behaviors>
                                                                        <behaviors1:Blur x:Name="BlurBehavior"  Value="5" Duration="0"
                                                                            Delay="0" AutomaticallyStart="True"/>
                                                                    </Interactivity:Interaction.Behaviors>
                                                                </Border>
                                                               
                                                               
                                                            </Canvas>


    • Marked as answer by zakkar Monday, February 11, 2019 1:37 PM
    Monday, February 11, 2019 1:37 PM