help with camera preview

Eduardo Gomez 3,431

I don't Know what to do, I am really struggling.

I need to use the webcam, to take a picture of the user, I need to add the camera preview here.

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <demy:AppTitleBarControl
            x:Name="AppBar"
            ShowIcon="false"
            Text="Register" />

        <StackPanel
            Grid.Row="1"
            Width="600"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Spacing="20">

            <TextBox
                PlaceholderText="First name"
                Text="{x:Bind ViewModel.User.Name}" />

            <TextBox
                PlaceholderText="Second name"
                Text="{x:Bind ViewModel.User.SecondName}" />

            <TextBox PlaceholderText="Phone Number"
                     Text="{x:Bind ViewModel.User.Phone}"/>

            <TextBox
                PlaceholderText="Email Address"
                Text="{x:Bind ViewModel.User.Email}" />

            <PasswordBox
                Password="{x:Bind ViewModel.User.Password}"
                PasswordRevealMode="Peek"
                PlaceholderText="Password" />

            <PasswordBox Password="{x:Bind ViewModel.User.ConfirmPassword}"
                         PasswordRevealMode="Peek"
                         PlaceholderText="Confirm password" />

//webcam

        </StackPanel>

    </Grid>

and this is my vm

        [ObservableProperty]
        private User user;

        public RegisterWindowViewModel(ILocation _location) {

        }

        [RelayCommand]
        private async void RegisterAsync(User user) {

            //take picture
        }

I tried to use one of these workarounds

https://github.com/microsoft/microsoft-ui-xaml/issues/4710

but that did not work for me or I am doing something wrong

I even tried to use CommunityToolkit.WinUI which has a CameraPreview but I could not get it to work

code: https://github.com/eduardoagr/Demy-AI

Xiaopo Yang - MSFT 12,726 Reputation points Microsoft Vendor

2023-07-05T02:33:33.85+00:00

@TamBuiWork 's MediaCapture Class workaround and @castorix 's DirectShow workaround both work definitely and Windows Community Toolkit CameraPreview also shows its example.

1 answer

Castorix31 86,976

I just uploaded a test with another method, by using IMFCaptureEngine :

WinUI3_MFCaptureEngine

(only tested on Windows 10)

Eduardo Gomez 3,431 Reputation points

2023-07-07T12:01:39.09+00:00

Is this on c#
Castorix31 86,976 Reputation points

2023-07-07T12:07:03.3933333+00:00

You can see extensions with .cs...
Castorix31 86,976 Reputation points

2023-07-11T07:38:29.6433333+00:00

So, 1 week later... did you test it ?
Castorix31 86,976 Reputation points

2023-07-24T07:31:23.2066667+00:00

and so ?
Eduardo Gomez 3,431 Reputation points

2023-07-24T07:39:31.46+00:00

It works unpacked only, and but sometimes it breaks

Eduardo Gomez 3,431

I tried the DirectShow workaround and I get the error

internal static void AccessWindowsAppSDK()
        {
            uint majorMinorVersion = global::Microsoft.WindowsAppSDK.Release.MajorMinor;
            string versionTag = global::Microsoft.WindowsAppSDK.Release.VersionTag;
            var minVersion = new PackageVersion(global::Microsoft.WindowsAppSDK.Runtime.Version.UInt64);
            var options = Options;
            int hr = 0;
            if (!global::Microsoft.Windows.ApplicationModel.DynamicDependency.Bootstrap.TryInitialize(majorMinorVersion, versionTag, minVersion, options, out hr))
            {
                global::System.Environment.Exit(hr);
            }
        }

User's image ant the other one only works in winUI (Unpackaged)

And I need to bind that picture to the UI

User's image

There has to be a way to call the camera built it to windows, and return the photo back

Eduardo Gomez 3,431

I am trying this, but it doesn't do

anything, and the photo is null

RegisterViewModel

     private string _userLocation;

        [ObservableProperty]
        private BitmapImage _capturedImage;

        [ObservableProperty]
        private Models.User user;

        public RegisterWindowViewModel(string UserLocation) {
            _userLocation = UserLocation;
        }

        [RelayCommand]
        private void Register(Models.User user) {

        }

        [RelayCommand]
        private async Task TakePictureAsync() {

            var cameraCapture = new CameraCaptureUI();
            cameraCapture.PhotoSettings.Format = CameraCaptureUIPhotoFormat.Jpeg;

            // Launch the CameraCaptureUI and await the result
            var photoResult = await cameraCapture.CaptureFileAsync(CameraCaptureUIMode.Photo);

            if (photoResult != null) {
                var imageStream = await photoResult.OpenReadAsync();
                await HandleCameraCaptureResultAsync(imageStream);
            }
        }

        // Handle the captured image
        public async Task HandleCameraCaptureResultAsync(IRandomAccessStream imageStream) {
            await SaveCapturedImageAsync(imageStream);
            await LoadAndDisplayImageAsync();
        }

        private static async Task SaveCapturedImageAsync(IRandomAccessStream imageStream) {
            StorageFile photoFile = await ApplicationData.Current.LocalFolder.CreateFileAsync(
                "CapturedPhoto.jpg", CreationCollisionOption.GenerateUniqueName);

            using IRandomAccessStream fileStream = await photoFile.OpenAsync(FileAccessMode.ReadWrite);
            await imageStream.AsStream().CopyToAsync(fileStream.AsStream());
            await fileStream.FlushAsync();
        }

        private async Task LoadAndDisplayImageAsync() {
            try {
                StorageFile photoFile = await ApplicationData.Current.LocalFolder.GetFileAsync("CapturedPhoto.jpg");
                using IRandomAccessStream fileStream = await photoFile.OpenAsync(FileAccessMode.Read);
                BitmapImage bitmapImage = new();
                await bitmapImage.SetSourceAsync(fileStream);
                CapturedImage = bitmapImage;
            } catch (FileNotFoundException) {
                // Handle the case when the file is not found (e.g., if the user didn't capture an image).
            }
        }

User Control

  <StackPanel Spacing="20">
        <Image
            Source="{x:Bind UserImage, Mode=OneWay}"
            Stretch="Uniform" />
        <Button
            Click="OnTakePictureButtonClicked"
            Content="Take Picture" />
        <Button
            Command="{x:Bind Register}"
            Content="Register" />
    </StackPanel>

   public UserImageControl() {
            InitializeComponent();
            DataContext = this;
        }


        public IAsyncRelayCommand TakePictureCommand {
            get { return (IAsyncRelayCommand)GetValue(TakePictureCommandProperty); }
            set { SetValue(TakePictureCommandProperty, value); }
        }

        public BitmapImage UserImage {
            get { return (BitmapImage)GetValue(UserImageProperty); }
            set { SetValue(UserImageProperty, value); }
        }

        private void OnTakePictureButtonClicked(object sender, RoutedEventArgs e) {
            TakePictureCommand?.Execute(null); // Execute the TakePictureCommand bound in XAML
        }



        public IRelayCommand Register {
            get { return (IRelayCommand)GetValue(RegisterProperty); }
            set { SetValue(RegisterProperty, value); }
        }


        public static readonly DependencyProperty TakePictureCommandProperty =
        DependencyProperty.Register(
            "TakePictureCommand",
            typeof(IAsyncRelayCommand),
            typeof(UserImageControl),
            new PropertyMetadata(null));


        // Using a DependencyProperty as the backing store for UserImage.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty UserImageProperty =
            DependencyProperty.Register("UserImage",
                typeof(BitmapImage),
                typeof(UserImageControl),
                new PropertyMetadata(null));


        // Using a DependencyProperty as the backing store for Register.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty RegisterProperty =
            DependencyProperty.Register("Register",
                typeof(IRelayCommand),
                typeof(UserImageControl),
                new PropertyMetadata(null));
    }

Share via

help with camera preview

1 answer

Your answer