Give Image quality

While capturing image i am getting poor quality of image
My capture image code is

  private async Task CaptureImage()
  {
      Snackbar.Clear();
      Snackbar.Configuration.PositionClass = Defaults.Classes.Position.TopCenter;

      if (SavedImages.Count + selectedImagesFromSM.Count < 3)
      {
          var options = new DialogOptions
              {
                  FullWidth = true,
                  DisableBackdropClick = true,
                  Position = DialogPosition.Center
              };

          var result = await DialogService.Show<ImageCaptureDialog>("Capture Image", options).Result;

          if (!result.Cancelled)
          {
              string imageUri = result.Data.ToString();
              byte[] bytes = Convert.FromBase64String(imageUri.Split(',')[1]);

              if (bytes.Length > Constants.IMAGE_MAX_SIZE)
              {
                  Snackbar.Add($"The Captured image exceeds the maximum size limit : 20 MB.", Severity.Warning);
              }
              else
              {
                  byte[] imageStreamToBytes;

                  using (var image = SixLabors.ImageSharp.Image.Load(bytes))
                  {
                      using (MemoryStream outputStream = new MemoryStream())
                      {
                          var encoder = new SixLabors.ImageSharp.Formats.Jpeg.JpegEncoder { Quality = 100 };
                          image.Save(outputStream, encoder);

                          imageStreamToBytes = outputStream.ToArray();
                      }
                  }

                  selectedImagesFromSM.Add(new ITSImage { PartNumber = int.Parse(selectedPartNumber), Images = new List<Image> { new Image { Data = imageStreamToBytes } } });
              }

              await CheckPartNumberImageCount();
          }
      }
      else
      {
          Snackbar.Add("You can capture only 3 images.", Severity.Warning);
      }
  }

camera.js function is

async function startVideo(src) {
    try {
        const permission = await checkCameraPermission();
        if (permission === 'prompt' || permission === 'granted') {
            navigator.getUserMedia(
                { video: true, audio: false },
                function (localMediaStream) {
                    let video = document.getElementById(src);
                    video.srcObject = localMediaStream;
                    video.onloadedmetadata = function (e) {
                        video.play();
                    };
                },
                function (err) {
                    console.error('Error accessing camera:', err);
                    throw err; // Propagate the error
                }
            );
        } else {
            console.error('Camera permission denied.');
        }
    } catch (error) {
        console.error('Error starting video:', error);
    }
}

function getFrame(src, dest, dotnetHelper) {
    let video = document.getElementById(src);
    let canvas = document.getElementById(dest);

    // Check if the video and canvas elements exist before drawing the image
    if (video && canvas) {
        canvas.getContext('2d').drawImage(video, 0, 0, 150, 150);

        // Resize the image on the canvas
        let resizedCanvas = document.createElement('canvas');
        resizedCanvas.width = 200; // Set desired width
        resizedCanvas.height = 200; // Set desired height
        let ctx = resizedCanvas.getContext('2d');
        ctx.drawImage(canvas, 0, 0, resizedCanvas.width, resizedCanvas.height);

        // Convert the resized image to base64 JPEG format
        let dataUrl = resizedCanvas.toDataURL("image/jpeg");

        // Invoke the .NET method with the resized image data
        dotnetHelper.invokeMethodAsync('ProcessImage', dataUrl);
    } else {
        console.error('Video or canvas element not found.');
    }
}

I have Added the code please check where i am doing mistake

Although my camera produces good quality images, the captured images in my application appear low-quality. How can I improve the image quality?