Camera preview help with ID and mvvm implementation

Question

For the past month or so, I have been trying to use the camera

I did my own Implementation, but some there are some performance peeks that am not incredibly happy with

So, I decided to open the camera App and the user take a picture and return the picture to the app, that also did not work.

Get the camera preview, take a picture, and display it

So finally, I found this, but I do not have any idea of how to get my webcam id

I sincerely do not know how to make in run with my mvvm architecture and my user controls

I have a userImage control

<UserControl
    x:Class="Demy.UserContols.UserImageControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

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

        <Button
            Grid.Row="2"
            Margin="20,0,0,0"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Command="{x:Bind TakePictureCommand}"
            Content="Take picture" />

        <MediaPlayerElement
            x:Name="MediaElement"
            AutoPlay="True"
            Stretch="UniformToFill" />

        <Button
            Grid.Row="2"
            Margin="0,0,20,0"
            HorizontalAlignment="Right"
            Command="{x:Bind Register}"
            Content="Register" />

    </Grid>

I found out this (https://github.com/microsoft/microsoft-ui-xaml/issues/4710) at the botton

How I defined the XAML:

<MediaPlayerElement x:Name="mediaPlayerElement" Stretch="UniformToFill" AutoPlay="True" />
The code-behind:

public MediaFrameSourceGroup MediaFrameSourceGroup;
public MediaCapture MediaCapture;

// Snippet
var deviceid = "set this to your camera's unique device id";
MediaFrameSourceGroup = await MediaFrameSourceGroup.FromIdAsync(deviceid);
MediaCapture = new MediaCapture();
var mediaCaptureInitializationSettings = new MediaCaptureInitializationSettings()

  SourceGroup = this.MediaFrameSourceGroup,
  SharingMode = MediaCaptureSharingMode.SharedReadOnly,
  StreamingCaptureMode = StreamingCaptureMode.Video,
  MemoryPreference = MediaCaptureMemoryPreference.Cpu
};
await MediaCapture.InitializeAsync(mediaCaptureInitializationSettings);

// Set the UI MediaPlayerElement control's Source property to the MediaSource you desire
mediaPlayerElement.Source = MediaSource.CreateFromMediaFrameSource(MediaCapture.FrameSources[this.MediaFrameSourceGroup.SourceInfos[0].Id]);
I was also able to capture every frame and process it using a MediaFrameReader. This might be useful if, say, you want to show some bells and whistles over the camera preview, or to simply capture and save important frames to disk.

public MediaFrameReader MediaFrameReader;

// Snippet. Remember to only do this AFTER you have called MediaCapture's InitializeAsync
MediaFrameReader = await MediaCapture.CreateFrameReaderAsync(MediaCapture.FrameSources[MediaFrameSourceGroup.SourceInfos[0].Id], MediaEncodingSubtypes.Argb32);
MediaFrameReader.FrameArrived += MediaFrameReader_FrameArrived;
await this.MediaFrameReader.StartAsync();

private void MediaFrameReader_FrameArrived(MediaFrameReader sender, MediaFrameArrivedEventArgs args)
{
    var mediaframeReader = sender as MediaFrameReader;
    if (mediaframeReader != null)
    {
        var mfr = mediaframeReader.TryAcquireLatestFrame();

        // From this point on, follow Microsoft's 'CameraFrames' universal sample to process the frame and do what you want with it: https://github.com/microsoft/Windows-universal-samples
    }    
}

And what I want to do is to show the camera preview, and take a picture and show it in my register window

Register windows

    <usercontols:UserImageControl
                Register="{x:Bind ViewModel.RegisterCommand}"
                TakePictureCommand="{x:Bind ViewModel.TakePictureCommand}" />

RegisterWindowViewModel

  public partial class RegisterWindowViewModel : ObservableObject {

        private string _userLocation;

        [ObservableProperty]
        private BitmapImage _capturedImage;

        [ObservableProperty]
        private User user;

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

        [RelayCommand]
        private void Register(User user) {

        }

        [RelayCommand]
        private async Task TakePictureAsync() {

        }
    }

code

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

The best way is to open the camera App and return the pic to the app, but when I do that, I get null back