From 37bd70a82a10aa91899291d185d91526e9ff6aea Mon Sep 17 00:00:00 2001
From: TheOneWithTheBraid <the-one@with-the-braid.cf>
Date: Tue, 20 Apr 2021 16:22:09 +0200
Subject: [PATCH] Added web support

---
 example/web/favicon.png          | Bin 0 -> 917 bytes
 example/web/icons/Icon-192.png   | Bin 0 -> 5292 bytes
 example/web/icons/Icon-512.png   | Bin 0 -> 8252 bytes
 example/web/index.html           |  46 +++++
 example/web/manifest.json        |  23 +++
 lib/src/web/flutter_qr_stub.dart |   5 +
 lib/src/web/flutter_qr_web.dart  | 334 +++++++++++++++++++++++++++++++
 lib/src/web/jsqr.dart            |  12 ++
 lib/src/web/media.dart           |  35 ++++
 9 files changed, 455 insertions(+)
 create mode 100644 example/web/favicon.png
 create mode 100644 example/web/icons/Icon-192.png
 create mode 100644 example/web/icons/Icon-512.png
 create mode 100644 example/web/index.html
 create mode 100644 example/web/manifest.json
 create mode 100644 lib/src/web/flutter_qr_stub.dart
 create mode 100644 lib/src/web/flutter_qr_web.dart
 create mode 100644 lib/src/web/jsqr.dart
 create mode 100644 lib/src/web/media.dart

diff --git a/example/web/favicon.png b/example/web/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..8aaa46ac1ae21512746f852a42ba87e4165dfdd1
GIT binary patch
literal 917
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|I14-?iy0X7
zltGxWVyS%@P(fs7NJL45ua8x7ey(0(N`6wRUPW#JP&EUCO@$SZnVVXYs8ErclUHn2
zVXFjIVFhG^g!Ppaz)DK8ZIvQ?0~DO|i&7O#^-S~(l<c?^6clWVQqrt~T->1AfjnEK
zjFOT9D}DX)@^Za$W4-*MbbUihOG|wNBYh(yU7!lx;>x^|#0uTKVr7USFmqf|i<65o
z3raHc^AtelCMM;Vme?vOfh>Xph&xL%(-1c06+^uR^q@XSM&D4+Kp$>4P^%3{)XKjo
zGZknv$b36P8?Z_gF{nK@`XI}Z90TzwSQO}0J1!f2c(B=V`5aP@1P1a|PZ!4!3&Gl8
zTYqUsf!gYFyJnXpu0!n&N*<mM6;!yDy;iI!?0xZxS-@9o){@>SYAX-%d(5<QWisP%
zpKxJ^!zO{CB{zx^b({)M+}nHh%-rj7^M&&ZcU$j%zjx;LVyDXoIuhq|8P;5s=KHG5
z<JUB4<A0$RmNJizixz(PY{v3_`K1HjE{oV$3+pLbhDf-dGF^GSkNIsaZ^^?aj@RFX
zmI#!cuT=hV*<Wg+koNS~T)(gK8EvWbJGDN%Cgswi@;rmS$PYP}{^d1_2Ol_C#PhDD
zFw$(<^hU$>gVjrHJWqXQshj@!<B9Fv+a9JEO;0$m^uEygb*U`#RIBf=|21JrRHoLF
zSVqsI&*oWt$jm+Fz?pMwCX>Zm{!01WsQrH~9=kTxW#6SvuapgMqt>$=j#%eyGrQzr
zP{L-3gsMA^$I1&gsBAEL+vxi1*Igl=8#8`5?A-T5=z-sk46WA1IUT)AIZHx1rdUrf
zVJrJn<74DDw`j)Ki#gt}mIT-Q`XRa2-jQXQoI%w`nb|XblvzK${ZzlV)m-XcwC(od
z71_OEC5Bt9GEXosOXaPTYOia#R4ID2TiU~`zVMl08TV_C%DnU4^+HE>9(CE4D6?Fz
oujB08i7adh9xk7*FX66dWH6F5TM;?E2b5PlUHx3vIVCg!0Dx9vYXATM

literal 0
HcmV?d00001

diff --git a/example/web/icons/Icon-192.png b/example/web/icons/Icon-192.png
new file mode 100644
index 0000000000000000000000000000000000000000..b749bfef07473333cf1dd31e9eed89862a5d52aa
GIT binary patch
literal 5292
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

literal 0
HcmV?d00001

diff --git a/example/web/icons/Icon-512.png b/example/web/icons/Icon-512.png
new file mode 100644
index 0000000000000000000000000000000000000000..88cfd48dff1169879ba46840804b412fe02fefd6
GIT binary patch
literal 8252
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

literal 0
HcmV?d00001

diff --git a/example/web/index.html b/example/web/index.html
new file mode 100644
index 0000000..f243f37
--- /dev/null
+++ b/example/web/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <!--
+    If you are serving your web app in a path other than the root, change the
+    href value below to reflect the base path you are serving from.
+
+    The path provided below has to start and end with a slash "/" in order for
+    it to work correctly.
+
+    Fore more details:
+    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
+  -->
+  <base href="/">
+
+  <meta charset="UTF-8">
+  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
+  <meta name="description" content="A new Flutter project.">
+
+  <!-- iOS meta tags & icons -->
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
+  <meta name="apple-mobile-web-app-title" content="example">
+  <link rel="apple-touch-icon" href="icons/Icon-192.png">
+
+  <!-- Favicon -->
+  <link rel="icon" type="image/png" href="favicon.png"/>
+
+  <title>example</title>
+  <link rel="manifest" href="manifest.json">
+  <script src="https://cdn.jsdelivr.net/npm/jsqr@1.3.1/dist/jsQR.min.js"></script>
+</head>
+<body>
+  <!-- This script installs service_worker.js to provide PWA functionality to
+       application. For more information, see:
+       https://developers.google.com/web/fundamentals/primers/service-workers -->
+  <script>
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('flutter-first-frame', function () {
+        navigator.serviceWorker.register('flutter_service_worker.js');
+      });
+    }
+  </script>
+  <script src="main.dart.js" type="application/javascript"></script>
+</body>
+</html>
diff --git a/example/web/manifest.json b/example/web/manifest.json
new file mode 100644
index 0000000..8c01291
--- /dev/null
+++ b/example/web/manifest.json
@@ -0,0 +1,23 @@
+{
+    "name": "example",
+    "short_name": "example",
+    "start_url": ".",
+    "display": "standalone",
+    "background_color": "#0175C2",
+    "theme_color": "#0175C2",
+    "description": "A new Flutter project.",
+    "orientation": "portrait-primary",
+    "prefer_related_applications": false,
+    "icons": [
+        {
+            "src": "icons/Icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "icons/Icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}
diff --git a/lib/src/web/flutter_qr_stub.dart b/lib/src/web/flutter_qr_stub.dart
new file mode 100644
index 0000000..1193cf4
--- /dev/null
+++ b/lib/src/web/flutter_qr_stub.dart
@@ -0,0 +1,5 @@
+import 'package:flutter/widgets.dart';
+import 'package:qr_code_scanner/src/types/camera.dart';
+
+Widget createWebQrView({onPlatformViewCreated, CameraFacing? cameraFacing}) =>
+    throw UnimplementedError();
diff --git a/lib/src/web/flutter_qr_web.dart b/lib/src/web/flutter_qr_web.dart
new file mode 100644
index 0000000..22896ae
--- /dev/null
+++ b/lib/src/web/flutter_qr_web.dart
@@ -0,0 +1,334 @@
+import 'dart:async';
+import 'dart:core';
+import 'dart:html' as html;
+import 'dart:js_util';
+import 'dart:ui' as ui;
+
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+
+import '../../qr_code_scanner.dart';
+import '../qr_code_scanner.dart';
+import '../types/camera.dart';
+import 'jsqr.dart';
+import 'media.dart';
+
+/// Even though it has been highly modified, the origial implementation has been
+/// adopted from https://github.com:treeder/jsqr_flutter
+///
+/// Copyright 2020 @treeder
+/// Copyright 2021 The one with the braid
+
+class WebQrView extends StatefulWidget {
+  final QRViewCreatedCallback onPlatformViewCreated;
+  final CameraFacing? cameraFacing;
+
+  const WebQrView(
+      {Key? key,
+      required this.onPlatformViewCreated,
+      this.cameraFacing = CameraFacing.front})
+      : super(key: key);
+
+  @override
+  _WebQrViewState createState() => _WebQrViewState();
+
+  static html.DivElement vidDiv =
+      html.DivElement(); // need a global for the registerViewFactory
+
+  static Future<bool> cameraAvailable() async {
+    final sources =
+        await html.window.navigator.mediaDevices!.enumerateDevices();
+    // List<String> vidIds = [];
+    var hasCam = false;
+    for (final e in sources) {
+      if (e.kind == 'videoinput') {
+        // vidIds.add(e['deviceId']);
+        hasCam = true;
+      }
+    }
+    return hasCam;
+  }
+}
+
+class _WebQrViewState extends State<WebQrView> {
+  html.MediaStream? _localStream;
+  // html.CanvasElement canvas;
+  // html.CanvasRenderingContext2D ctx;
+  bool _currentlyProcessing = false;
+  html.MediaRecorder? _mediaRecorder;
+
+  QRViewControllerWeb? _controller;
+
+  late Size _size = Size(0, 0);
+  Timer? timer;
+  String? code;
+  String? _errorMsg;
+  var video;
+  String viewID = 'QRVIEW-' + DateTime.now().millisecondsSinceEpoch.toString();
+
+  final StreamController<Barcode> _scanUpdateController =
+      StreamController<Barcode>();
+  late CameraFacing facing;
+
+  Timer? _frameIntervall;
+
+  final _canvasKey = GlobalKey();
+
+  double _scaleFactor = 1;
+
+  @override
+  void initState() {
+    super.initState();
+
+    facing = widget.cameraFacing ?? CameraFacing.front;
+
+    video = html.VideoElement();
+    WebQrView.vidDiv.children = [video];
+    // ignore: UNDEFINED_PREFIXED_NAME
+    ui.platformViewRegistry
+        .registerViewFactory(viewID, (int id) => WebQrView.vidDiv);
+    // giving JavaScipt some time to process the DOM changes
+    Timer(Duration(milliseconds: 500), () {
+      start();
+    });
+  }
+
+  Future start() async {
+    await _makeCall();
+    _frameIntervall?.cancel();
+    _frameIntervall = Timer.periodic(Duration(milliseconds: 200), (timer) {
+      _captureFrame2();
+    });
+  }
+
+  void cancel() {
+    if (timer != null) {
+      timer!.cancel();
+      timer = null;
+    }
+    if (_currentlyProcessing) {
+      _stopStream();
+    }
+  }
+
+  @override
+  void dispose() {
+    cancel();
+    super.dispose();
+  }
+
+  // Platform messages are asynchronous, so we initialize in an async method.
+  Future<void> _makeCall() async {
+    if (_localStream != null) {
+      return;
+    }
+
+    try {
+      var constraints = UserMediaOptions(
+          video: VideoOptions(
+        facingMode: (facing == CameraFacing.front ? 'user' : 'environment'),
+      ));
+      // dart style, not working properly:
+      // var stream =
+      //     await html.window.navigator.mediaDevices.getUserMedia(constraints);
+      // straight JS:
+      var stream = await promiseToFuture(getUserMedia(constraints));
+      _localStream = stream;
+      video.srcObject = _localStream;
+      video.setAttribute('playsinline',
+          'true'); // required to tell iOS safari we don't want fullscreen
+      if (_controller == null) {
+        _controller = QRViewControllerWeb(this);
+        widget.onPlatformViewCreated(_controller!);
+      }
+      await video.play();
+    } catch (e) {
+      cancel();
+      setState(() {
+        _errorMsg = e.toString();
+      });
+      return;
+    }
+    if (!mounted) return;
+
+    setState(() {
+      _currentlyProcessing = true;
+    });
+  }
+
+  Future<void> _stopStream() async {
+    try {
+      // await _localStream.dispose();
+      _localStream!.getTracks().forEach((track) {
+        if (track.readyState == 'live') {
+          track.stop();
+        }
+      });
+      // video.stop();
+      video.srcObject = null;
+      _localStream = null;
+      // _localRenderer.srcObject = null;
+      // ignore: empty_catches
+    } catch (e) {}
+  }
+
+  Future<dynamic> _captureFrame2() async {
+    if (_localStream == null) {
+      return null;
+    }
+    final canvas =
+        html.CanvasElement(width: video.videoWidth, height: video.videoHeight);
+    final ctx = canvas.context2D;
+    // canvas.width = video.videoWidth;
+    // canvas.height = video.videoHeight;
+    ctx.drawImage(video, 0, 0);
+    final imgData = ctx.getImageData(0, 0, canvas.width!, canvas.height!);
+
+    final size =
+        Size(canvas.width?.toDouble() ?? 0, canvas.height?.toDouble() ?? 0);
+    if (size != _size) {
+      setState(() {
+        _setCanvasSize(size);
+      });
+    }
+
+    final code = jsQR(imgData.data, canvas.width, canvas.height);
+    // ignore: unnecessary_null_comparison
+    if (code != null) {
+      _scanUpdateController
+          .add(Barcode(code.data, BarcodeFormat.qrcode, code.data.codeUnits));
+    }
+  }
+
+  Future<String?> _captureImage() async {
+    if (_localStream == null) {
+      return null;
+    }
+    final canvas =
+        html.CanvasElement(width: video.videoWidth, height: video.videoHeight);
+    final ctx = canvas.context2D;
+    // canvas.width = video.videoWidth;
+    // canvas.height = video.videoHeight;
+    ctx.drawImage(video, 0, 0);
+    var dataUrl = canvas.toDataUrl('image/jpeg', 0.9);
+    return dataUrl;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (_errorMsg != null) {
+      return Center(child: Text(_errorMsg!));
+    }
+    if (_localStream == null) {
+      return Center(child: CircularProgressIndicator());
+    }
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        var zoom = 1.0;
+
+        if (_size.height != 0) zoom = constraints.maxHeight / _size.height;
+
+        if (_size.width != 0) {
+          final horizontalZoom = constraints.maxWidth / _size.width;
+          if (horizontalZoom > zoom) {
+            zoom = horizontalZoom;
+          }
+        }
+
+        return SizedBox(
+          width: constraints.maxWidth,
+          height: constraints.maxHeight,
+          child: Center(
+            child: SizedBox.fromSize(
+              size: _size,
+              child: Transform.scale(
+                alignment: Alignment.center,
+                scale: zoom,
+                child: HtmlElementView(viewType: viewID),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  void _setCanvasSize(ui.Size size) {
+    setState(() {
+      _size = size;
+    });
+  }
+}
+
+class QRViewControllerWeb implements QRViewController {
+  final _WebQrViewState _state;
+
+  QRViewControllerWeb(this._state);
+  @override
+  void dispose() => _state.cancel();
+
+  @override
+  Future<CameraFacing> flipCamera() async {
+    // TODO: improve error handling
+    _state.facing = _state.facing == CameraFacing.front
+        ? CameraFacing.back
+        : CameraFacing.front;
+    await _state.start();
+    return _state.facing;
+  }
+
+  @override
+  Future<CameraFacing> getCameraInfo() async {
+    return _state.facing;
+  }
+
+  @override
+  Future<bool?> getFlashStatus() async {
+    // TODO: flash is simply not supported by JavaScipt. To avoid issuing applications, we always return it to be off.
+    return false;
+  }
+
+  @override
+  Future<SystemFeatures> getSystemFeatures() {
+    // TODO: implement getSystemFeatures
+    throw UnimplementedError();
+  }
+
+  @override
+  // TODO: implement hasPermissions. Blocking: WebQrView.cameraAvailable() returns a Future<bool> whereas a bool is required
+  bool get hasPermissions => throw UnimplementedError();
+
+  @override
+  Future<void> pauseCamera() {
+    // TODO: implement pauseCamera
+    throw UnimplementedError();
+  }
+
+  @override
+  Future<void> resumeCamera() {
+    // TODO: implement resumeCamera
+    throw UnimplementedError();
+  }
+
+  @override
+  Stream<Barcode> get scannedDataStream => _state._scanUpdateController.stream;
+
+  @override
+  Future<void> stopCamera() {
+    // TODO: implement stopCamera
+    throw UnimplementedError();
+  }
+
+  @override
+  Future<void> toggleFlash() async {
+    // TODO: flash is simply not supported by JavaScipt
+    return;
+  }
+}
+
+Widget createWebQrView({onPlatformViewCreated, CameraFacing? cameraFacing}) =>
+    WebQrView(
+      onPlatformViewCreated: onPlatformViewCreated,
+      cameraFacing: cameraFacing,
+    );
diff --git a/lib/src/web/jsqr.dart b/lib/src/web/jsqr.dart
new file mode 100644
index 0000000..0c7a36f
--- /dev/null
+++ b/lib/src/web/jsqr.dart
@@ -0,0 +1,12 @@
+@JS()
+library jsqr;
+
+import 'package:js/js.dart';
+
+@JS("jsQR")
+external Code jsQR(var data, int? width, int? height);
+
+@JS()
+class Code {
+  external String get data;
+}
diff --git a/lib/src/web/media.dart b/lib/src/web/media.dart
new file mode 100644
index 0000000..f1a4175
--- /dev/null
+++ b/lib/src/web/media.dart
@@ -0,0 +1,35 @@
+// This is here because dart doesn't seem to support this properly
+// https://stackoverflow.com/questions/61161135/adding-support-for-navigator-mediadevices-getusermedia-to-dart
+
+@JS("navigator.mediaDevices")
+library media_devices;
+
+import 'package:js/js.dart';
+
+@JS("getUserMedia")
+external Future<dynamic> getUserMedia(UserMediaOptions constraints);
+
+@JS()
+@anonymous
+class UserMediaOptions {
+  external VideoOptions get video;
+
+  external factory UserMediaOptions({VideoOptions? video});
+}
+
+@JS()
+@anonymous
+class VideoOptions {
+  external String get facingMode;
+  // external DeviceIdOptions get deviceId;
+
+  external factory VideoOptions({String? facingMode, DeviceIdOptions? deviceId});
+}
+
+@JS()
+@anonymous
+class DeviceIdOptions {
+  external String get exact;
+
+  external factory DeviceIdOptions({String? exact});
+}