How to design Quagga scanner?

Question

that my Quagga scanner

   Quagga.init(
  {
    inputStream: {
      name: "Live",
      type: "LiveStream",

      target: document.querySelector("#camera"),
    },
    decoder: {
      readers: [
        "code_128_reader",
        "ean_reader",
        "ean_8_reader",
        "code_39_reader",
        "code_39_vin_reader",
        "codabar_reader",
        "upc_reader",
        "upc_e_reader",
        "i2of5_reader",
        "2of5_reader",
        "code_93_reader",
      ],
    },
  },
  (err) => {
    if (err) {
      console.log(err);
      setRedirect(true);
      return;
    }
    Quagga.start();
  }
);



return <div id="camera"></div>;

that the return of the component. i cant fine a way to fix this. all the solutions in the web is not help, hope that someone here can help.

1. When i try to change the size of the camera scanner using css and its faild

2. I want to add a green border for the barcode when i try to scan.

3. When i open the scanner i have a horizontal camera, i want it to be vertical

try use the chat gpt, and I also searched the internet, all the information is not clear at all