flutter_package / mobile_scanner

Go to a project
Toggle navigation Toggle navigation pinning
Julian Steenbakker
Committed by GitHub
009940c1 2 parents 01c69c04 dd827d58

Merge pull request #669 from moria-euc/master 

refactor: Removed JS library injection which breaks CSP.
Inline Side-by-side
Showing 7 changed files with 8 additions and 84 deletions
@@ -53,6 +53,12 @@ Ensure that you granted camera permission in XCode -> Signing & Capabilities: @@ -53,6 +53,12 @@ Ensure that you granted camera permission in XCode -> Signing & Capabilities:
53 53
54 <img width="696" alt="Screenshot of XCode where Camera is checked" src="https://user-images.githubusercontent.com/24459435/193464115-d76f81d0-6355-4cb2-8bee-538e413a3ad0.png"> 54 <img width="696" alt="Screenshot of XCode where Camera is checked" src="https://user-images.githubusercontent.com/24459435/193464115-d76f81d0-6355-4cb2-8bee-538e413a3ad0.png">
55 55
  56 +## Web
  57 +This package uses ZXing on web to read barcodes so it needs to be included in `index.html` as script.
  58 +```html
  59 +<script src="https://unpkg.com/@zxing/library@0.19.1" type="application/javascript"></script>
  60 +```
  61 +
56 ## Usage 62 ## Usage
57 63
58 Import `package:mobile_scanner/mobile_scanner.dart`, and use the widget with or without the controller. 64 Import `package:mobile_scanner/mobile_scanner.dart`, and use the widget with or without the controller.
@@ -30,6 +30,8 @@ @@ -30,6 +30,8 @@
30 <link rel="manifest" href="manifest.json"> 30 <link rel="manifest" href="manifest.json">
31 </head> 31 </head>
32 <body> 32 <body>
  33 + <script src="https://unpkg.com/@zxing/library@0.19.1" type="application/javascript"></script>
  34 +
33 <!-- This script installs service_worker.js to provide PWA functionality to 35 <!-- This script installs service_worker.js to provide PWA functionality to
34 application. For more information, see: 36 application. For more information, see:
35 https://developers.google.com/web/fundamentals/primers/service-workers --> 37 https://developers.google.com/web/fundamentals/primers/service-workers -->
@@ -8,7 +8,6 @@ import 'package:mobile_scanner/mobile_scanner_web.dart'; @@ -8,7 +8,6 @@ import 'package:mobile_scanner/mobile_scanner_web.dart';
8 import 'package:mobile_scanner/src/barcode_utility.dart'; 8 import 'package:mobile_scanner/src/barcode_utility.dart';
9 import 'package:mobile_scanner/src/enums/camera_facing.dart'; 9 import 'package:mobile_scanner/src/enums/camera_facing.dart';
10 import 'package:mobile_scanner/src/objects/barcode.dart'; 10 import 'package:mobile_scanner/src/objects/barcode.dart';
11 -import 'package:mobile_scanner/src/web/utils.dart';  
12 11
13 /// This plugin is the web implementation of mobile_scanner. 12 /// This plugin is the web implementation of mobile_scanner.
14 /// It only supports QR codes. 13 /// It only supports QR codes.
@@ -26,8 +25,6 @@ class MobileScannerWebPlugin { @@ -26,8 +25,6 @@ class MobileScannerWebPlugin {
26 ); 25 );
27 final MobileScannerWebPlugin instance = MobileScannerWebPlugin(); 26 final MobileScannerWebPlugin instance = MobileScannerWebPlugin();
28 27
29 - _jsLibrariesLoadingFuture = injectJSLibraries(barCodeReader.jsLibraries);  
30 -  
31 channel.setMethodCallHandler(instance.handleMethodCall); 28 channel.setMethodCallHandler(instance.handleMethodCall);
32 event.setController(instance.controller); 29 event.setController(instance.controller);
33 } 30 }
@@ -55,11 +52,8 @@ class MobileScannerWebPlugin { @@ -55,11 +52,8 @@ class MobileScannerWebPlugin {
55 ZXingBarcodeReader(videoContainer: vidDiv); 52 ZXingBarcodeReader(videoContainer: vidDiv);
56 StreamSubscription? _barCodeStreamSubscription; 53 StreamSubscription? _barCodeStreamSubscription;
57 54
58 - static late Future _jsLibrariesLoadingFuture;  
59 -  
60 /// Handle incomming messages 55 /// Handle incomming messages
61 Future<dynamic> handleMethodCall(MethodCall call) async { 56 Future<dynamic> handleMethodCall(MethodCall call) async {
62 - await _jsLibrariesLoadingFuture;  
63 switch (call.method) { 57 switch (call.method) {
64 case 'start': 58 case 'start':
65 return _start(call.arguments as Map); 59 return _start(call.arguments as Map);
@@ -39,9 +39,6 @@ abstract class WebBarcodeReaderBase { @@ -39,9 +39,6 @@ abstract class WebBarcodeReaderBase {
39 int get videoWidth; 39 int get videoWidth;
40 int get videoHeight; 40 int get videoHeight;
41 41
42 - /// JS libraries to be injected into html page.  
43 - List<JsLibrary> get jsLibraries;  
44 -  
45 /// Starts streaming video 42 /// Starts streaming video
46 Future<void> start({ 43 Future<void> start({
47 required CameraFacing cameraFacing, 44 required CameraFacing cameraFacing,
@@ -20,12 +20,6 @@ class Code { @@ -20,12 +20,6 @@ class Code {
20 external Uint8ClampedList get binaryData; 20 external Uint8ClampedList get binaryData;
21 } 21 }
22 22
23 -const jsqrLibrary = JsLibrary(  
24 - contextName: 'jsQR',  
25 - url: 'https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.min.js',  
26 - usesRequireJs: true,  
27 -);  
28 -  
29 /// Barcode reader that uses jsQR library. 23 /// Barcode reader that uses jsQR library.
30 /// jsQR supports only QR codes format. 24 /// jsQR supports only QR codes format.
31 class JsQrCodeReader extends WebBarcodeReaderBase 25 class JsQrCodeReader extends WebBarcodeReaderBase
@@ -36,9 +30,6 @@ class JsQrCodeReader extends WebBarcodeReaderBase @@ -36,9 +30,6 @@ class JsQrCodeReader extends WebBarcodeReaderBase
36 bool get isStarted => localMediaStream != null; 30 bool get isStarted => localMediaStream != null;
37 31
38 @override 32 @override
39 - List<JsLibrary> get jsLibraries => [jsqrLibrary];  
40 -  
41 - @override  
42 Future<void> start({ 33 Future<void> start({
43 required CameraFacing cameraFacing, 34 required CameraFacing cameraFacing,
44 List<BarcodeFormat>? formats, 35 List<BarcodeFormat>? formats,
1 -import 'dart:async';  
2 -import 'dart:html' as html;  
3 -import 'dart:js' show JsObject, context;  
4 -  
5 -import 'package:mobile_scanner/src/web/base.dart';  
6 -  
7 -Future<void> loadScript(JsLibrary library) async {  
8 - dynamic amd;  
9 - dynamic define;  
10 - // ignore: avoid_dynamic_calls  
11 - if (library.usesRequireJs && context['define']?['amd'] != null) {  
12 - // In dev, requireJs is loaded in. Disable it here.  
13 - // see https://github.com/dart-lang/sdk/issues/33979  
14 - define = JsObject.fromBrowserObject(context['define'] as Object);  
15 - // ignore: avoid_dynamic_calls  
16 - amd = define['amd'];  
17 - // ignore: avoid_dynamic_calls  
18 - define['amd'] = false;  
19 - }  
20 - try {  
21 - await loadScriptUsingScriptTag(library.url);  
22 - } finally {  
23 - if (amd != null) {  
24 - // Re-enable requireJs  
25 - // ignore: avoid_dynamic_calls  
26 - define['amd'] = amd;  
27 - }  
28 - }  
29 -}  
30 -  
31 -Future<void> loadScriptUsingScriptTag(String url) {  
32 - final script = html.ScriptElement()  
33 - ..async = true  
34 - ..defer = false  
35 - ..crossOrigin = 'anonymous'  
36 - ..type = 'text/javascript'  
37 - // ignore: unsafe_html  
38 - ..src = url;  
39 -  
40 - html.document.head!.append(script);  
41 -  
42 - return script.onLoad.first;  
43 -}  
44 -  
45 -/// Injects JS [libraries]  
46 -///  
47 -/// Returns a [Future] that resolves when all of the `script` tags `onLoad` events trigger.  
48 -Future<void> injectJSLibraries(List<JsLibrary> libraries) {  
49 - final List<Future<void>> loading = [];  
50 -  
51 - for (final library in libraries) {  
52 - final future = loadScript(library);  
53 - loading.add(future);  
54 - }  
55 -  
56 - return Future.wait(loading);  
57 -}  
@@ -168,12 +168,6 @@ extension JsZXingBrowserMultiFormatReaderExt @@ -168,12 +168,6 @@ extension JsZXingBrowserMultiFormatReaderExt
168 external MediaStream? stream; 168 external MediaStream? stream;
169 } 169 }
170 170
171 -const zxingJsLibrary = JsLibrary(  
172 - contextName: 'ZXing',  
173 - url: 'https://unpkg.com/@zxing/library@0.19.1',  
174 - usesRequireJs: true,  
175 -);  
176 -  
177 /// Barcode reader that uses zxing-js library. 171 /// Barcode reader that uses zxing-js library.
178 class ZXingBarcodeReader extends WebBarcodeReaderBase 172 class ZXingBarcodeReader extends WebBarcodeReaderBase
179 with InternalStreamCreation, InternalTorchDetection { 173 with InternalStreamCreation, InternalTorchDetection {
@@ -185,9 +179,6 @@ class ZXingBarcodeReader extends WebBarcodeReaderBase @@ -185,9 +179,6 @@ class ZXingBarcodeReader extends WebBarcodeReaderBase
185 bool get isStarted => localMediaStream != null; 179 bool get isStarted => localMediaStream != null;
186 180
187 @override 181 @override
188 - List<JsLibrary> get jsLibraries => [zxingJsLibrary];  
189 -  
190 - @override  
191 Future<void> start({ 182 Future<void> start({
192 required CameraFacing cameraFacing, 183 required CameraFacing cameraFacing,
193 List<BarcodeFormat>? formats, 184 List<BarcodeFormat>? formats,