Skip to content
This repository was archived by the owner on Oct 10, 2020. It is now read-only.

Commit ce6100b

Browse files
fercarcedofercarcedo
committed
Web support
1 parent a4a010c commit ce6100b

File tree

6 files changed

+289
-2
lines changed

6 files changed

+289
-2
lines changed

‎flutter_barcode_reader_web/lib/assets/26096D5C9D4499FC412DE6D557CF4723.cache.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎flutter_barcode_reader_web/lib/assets/jsqrscanner.nocache.js‎

Lines changed: 26 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎flutter_barcode_reader_web/lib/assets/styles.css‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
body {
7+
overflow: hidden;
8+
}
9+
10+
#container {
11+
position: fixed;
12+
width: 100%;
13+
height: 100%;
14+
background-color: #2F2F2F;
15+
}
16+
17+
video {
18+
position: relative;
19+
top: 0;
20+
left: 0;
21+
height: 100vh;
22+
width: 100vw;
23+
object-fit: cover;
24+
}
25+
26+
#cover {
27+
position: absolute;
28+
top: 50%;
29+
left: 50%;
30+
width: 70vmin;
31+
height: 70vmin;
32+
transform: translateX(-50%) translateY(-50%);
33+
text-align: center;
34+
}
35+
36+
#cover:after {
37+
content:'';
38+
position: absolute;
39+
top: 0;
40+
left: 0;
41+
width: 100%;
42+
height: 100%;
43+
box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.4);
44+
}
45+
46+
#cover img {
47+
width: 100%;
48+
height: 100%;
49+
}
50+
51+
#cover > div {
52+
background-color: #BFE47B;
53+
}
54+
55+
#topleft, #lefttop {
56+
position: absolute;
57+
top: 0;
58+
left: 0;
59+
}
60+
61+
#topleft {
62+
width: 8vmin;
63+
height: 2vmin;
64+
}
65+
66+
#lefttop {
67+
width: 2vmin;
68+
height: 8vmin;
69+
}
70+
71+
#topright, #righttop {
72+
position: absolute;
73+
top: 0;
74+
right: 0;
75+
}
76+
77+
#topright {
78+
width: 8vmin;
79+
height: 2vmin;
80+
}
81+
82+
#righttop {
83+
width: 2vmin;
84+
height: 8vmin;
85+
}
86+
87+
#bottomleft, #leftbottom {
88+
position: absolute;
89+
bottom: 0;
90+
left: 0;
91+
}
92+
93+
#bottomleft {
94+
width: 8vmin;
95+
height: 2vmin;
96+
}
97+
98+
#leftbottom {
99+
width: 2vmin;
100+
height: 8vmin;
101+
}
102+
103+
#bottomright, #rightbottom {
104+
position: absolute;
105+
bottom: 0;
106+
right: 0;
107+
}
108+
109+
#bottomright {
110+
width: 8vmin;
111+
height: 2vmin;
112+
}
113+
114+
#rightbottom {
115+
width: 2vmin;
116+
height: 8vmin;
117+
}
118+
119+
#toolbar {
120+
background-color: #2F2F2F;
121+
}
122+
123+
#toolbar p {
124+
float: left;
125+
font-size: 24px;
126+
color: white;
127+
margin-left: 16px;
128+
padding: 16px;
129+
}
130+
131+
#clear {
132+
clear: both;
133+
}

‎flutter_barcode_reader_web/lib/barcode_web.dart‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
@JS()
2+
library jsqrscanner;
3+
4+
import 'dart:async';
5+
import 'dart:html';
6+
7+
import 'package:flutter/services.dart';
8+
import 'package:js/js.dart';
9+
import 'package:js/js_util.dart';
10+
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
11+
12+
class BarcodeScanPlugin {
13+
Completer<String> _completer;
14+
15+
static void registerWith(Registrar registrar) {
16+
final MethodChannel channel = MethodChannel(
17+
'de.mintware.barcode_scan',
18+
const StandardMethodCodec(),
19+
registrar.messenger
20+
);
21+
final BarcodeScanPlugin instance = new BarcodeScanPlugin();
22+
channel.setMethodCallHandler(instance.handleMethodCall);
23+
}
24+
25+
Future<String> handleMethodCall(MethodCall call) async {
26+
_createCSS();
27+
var script = document.createElement('script');
28+
script.setAttribute('type', 'text/javascript');
29+
document.querySelector('head').append(script);
30+
script.setAttribute('src', 'packages/barcode_scan_web/assets/jsqrscanner.nocache.js');
31+
_createHTML();
32+
document.querySelector('#toolbar p').addEventListener('click', (event) => _close());
33+
setProperty(window, 'JsQRScannerReady', allowInterop(this.scannerReady));
34+
_completer = new Completer<String>();
35+
return _completer.future;
36+
}
37+
38+
void _createCSS() {
39+
var link = document.createElement('link');
40+
link.setAttribute('rel', 'stylesheet');
41+
link.setAttribute('href', 'packages/barcode_scan_web/assets/styles.css');
42+
document.querySelector('head').append(link);
43+
}
44+
45+
void _createHTML() {
46+
var containerDiv = document.createElement('div');
47+
containerDiv.id = 'container';
48+
containerDiv.innerHtml = '''
49+
<div id="toolbar">
50+
<p>X</p>
51+
<div id="clear"></div>
52+
</div>
53+
<div id="scanner"></div>
54+
<div id="cover">
55+
<div id="topleft"></div>
56+
<div id="lefttop"></div>
57+
<div id="topright"></div>
58+
<div id="righttop"></div>
59+
<div id="bottomleft"></div>
60+
<div id="leftbottom"></div>
61+
<div id="bottomright"></div>
62+
<div id="rightbottom"></div>
63+
</div>
64+
''';
65+
document.body.append(containerDiv);
66+
}
67+
68+
void onQRCodeScanned(String scannedText) {
69+
_completer.complete(scannedText);
70+
_close();
71+
}
72+
73+
void _close() {
74+
document.getElementById('container').remove();
75+
}
76+
77+
void scannerReady() {
78+
var scanner = JsQRScanner(onQRCodeScanned, provideVideo);
79+
scanner.setSnapImageMaxSize(300);
80+
var scannerParentElement = document.getElementById('scanner');
81+
scanner.appendTo(scannerParentElement);
82+
}
83+
84+
Promise<MediaStream> provideVideo() {
85+
return new Promise<MediaStream>(allowInterop((resolve, reject) {
86+
window.navigator.getUserMedia(video: true).then(resolve, onError: reject);
87+
}));
88+
}
89+
}
90+
91+
@JS()
92+
class JsQRScanner {
93+
external factory JsQRScanner(Function onQRCodeScanned, Function provideVideo);
94+
external setSnapImageMaxSize(int maxSize);
95+
external appendTo(Element element);
96+
}
97+
98+
@JS()
99+
class Promise<T> {
100+
external Promise(void executor(void resolve(T result), Function reject));
101+
external Promise then(void onFulfilled(T result), [Function onRejected]);
102+
}

‎flutter_barcode_reader_web/pubspec.yaml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
name: barcode_scan_web
2+
description: A flutter plugin for scanning 2D barcodes and QRCodes via camera.
3+
version: 2.0.1
4+
homepage: https://github.com/mintware-de/flutter_barcode_reader
5+
6+
dependencies:
7+
flutter:
8+
sdk: flutter
9+
flutter_web_plugins:
10+
sdk: flutter
11+
js: ^0.6.0
12+
13+
environment:
14+
sdk: ">=2.0.0-dev.58.0 <3.0.0"
15+
flutter: ^1.10.0
16+
17+
flutter:
18+
plugin:
19+
platforms:
20+
web:
21+
pluginClass: BarcodeScanPlugin
22+
fileName: barcode_web.dart

‎pubspec.yaml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ dependencies:
77
flutter:
88
sdk: flutter
99

10-
environment:
11-
sdk: ">=2.0.0-dev.58.0 <3.0.0"
10+
environment:
11+
sdk: ">=2.0.0-dev.58.0 <3.0.0"
1212

1313
flutter:
1414
plugin:

0 commit comments

Comments
 (0)