Хотите открыть сканер штрих-кода/QR-кода в контейнере

Я использую библиотеку сканирования штрих-кодов, которая при вызове открывает сканер во всем окне браузера. Однако я хотел бы изменить это поведение, чтобы сканер открывался в определенном контейнере на веб-странице, а не занимал всю страницу.

По сути, я хочу, чтобы камера телефона пользователя функционировала как сканер продукта в определенной области веб-страницы, подобно тому, как сканирование штрих-кода работает во многих мобильных приложениях для покупок.

Как я могу этого добиться? Существуют ли какие-либо конкретные библиотеки или методы Flutter, которые мне следует использовать для встраивания сканера штрих-кода в контейнер на моей веб-странице? образ .

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_barcode_scanner/flutter_barcode_scanner.dart';
import 'package:simple_barcode_scanner/simple_barcode_scanner.dart';

class Scanner extends StatefulWidget {
  final double width;
  final double height;
  final int borderRadius;
  final int borderWidth;
  final Color borderColor;

  const Scanner({
    super.key,
    required this.width,
    required this.height,
    required this.borderRadius,
    required this.borderWidth,
    required this.borderColor,
  });

  @override
  _ScannerState createState() => _ScannerState();
}

class _ScannerState extends State {
  String _result = '';

  // late String _barcodeResult;

  @override
  void initState() {
    super.initState();
  }

  Future<void> ScanCode() async {
    String barcodeScanResult;
    try {
      barcodeScanResult = await FlutterBarcodeScanner.scanBarcode(
          "#FF6666", "cancelButtonText", true, ScanMode.BARCODE);
    } on PlatformException {
      barcodeScanResult = 'Hello';
    }
    setState(() {
      _result = barcodeScanResult;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          height: 400,
          width: MediaQuery.of(context).size.width * 0.95,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            border: Border.all(color: Colors.black, width: 3),
          ),
          child: ElevatedButton(
            onPressed: () async {
              var res = await Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const SimpleBarcodeScannerPage(),
                  ));
              setState(() {
                if (res is String) {
                  _result = res;
                }
              });
            },
            child: const Text('Open Scanner'),
          ),
        ),
      ],
    );
  }
}

Пробовал поставить сканер прямо в контейнер(не получилось). Я попробовал использовать простой сканер штрих-кода, сканер штрих-кода AI и сканер штрих-кода Flutter.