Chrome and safari in ios 18.1.1 cannot show widget

[yeewan98]

I had test in other version of ios for chrome and safari, it does not have the problem as below, but only in ios 18.1.1 it show the error below.

Flutter ver 3.27.1

class ScanScreen extends StatefulWidget {
  final OnScanned onScanned;
  final VoidCallback onClose;
  final bool isBusyScanning;
  ScanScreen({required this.onScanned, required this.onClose, super.key, this.isBusyScanning = false});

  @override
  State<ScanScreen> createState() => _ScanScreenState();
}

class _ScanScreenState extends State<ScanScreen> {
  final MobileScannerController controller = MobileScannerController(
    formats: const [BarcodeFormat.qrCode],
  );
  final AudioPlayer player = AudioPlayer();

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
    player.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
          child: Container(color: Colors.white),
        ),
        Align(
          alignment: Alignment.center,
          child: SizedBox(
            height: 300,
            width: 300,
            child: MobileScanner(
              controller: controller,
              onDetect: (BarcodeCapture capture)  {
                if (!widget.isBusyScanning) {
                    String? rawValue = capture.barcodes.isNotEmpty ? capture.barcodes[0].rawValue : null;
                    if (rawValue != null) {
                      List<String> splitValue = rawValue.split('_');
                      widget.onScanned(splitValue[1]);
                    }
                 }
              },
              errorBuilder: (context, error, child) {
                return errorWidget(context, error);
              },
            ),
          ),
        ),
      ],
    );
  }

  Widget errorWidget(BuildContext context, MobileScannerException? error) {
    String errorMessage;

    switch (error?.errorCode) {
      case MobileScannerErrorCode.controllerUninitialized:
        errorMessage = 'Controller not ready.';
      case MobileScannerErrorCode.permissionDenied:
        errorMessage = 'Permission denied';
      case MobileScannerErrorCode.unsupported:
        errorMessage = 'Scanning is unsupported on this device';
      default:
        errorMessage = 'Generic Error';
    }

    return ColoredBox(
      color: Colors.black,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Padding(
              padding: EdgeInsets.only(bottom: 16),
              child: Icon(Icons.error, color: Colors.white),
            ),
            Text(
              errorMessage,
              style: const TextStyle(color: Colors.white),
            ),
            Text(
              error?.errorDetails?.message ?? '',
              style: const TextStyle(color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

May be may someone let me know what will cause that error.

[navaronbracke]

That's odd, this is only reported when window.navigator.mediaDevices is undefined or null.

https://github.com/juliansteenbakker/mobile_scanner/blob/develop/lib/src/web/mobile_scanner_web.dart#L167-L175

This seems like a bug in iOS ? https://stackoverflow.com/questions/79379356/navigator-mediadevices-is-undefined-safari-ios-18-served-via-https

[navaronbracke]

Are you serving your app over https?

[yeewan98]

Are you serving your app over https?

Yes.

Btw, thanks for providing some link for me to refer, after check with multiple device with same ios version, it seems like certain device have no this problem.