flutter_package / mobile_scanner

Go to a project
Toggle navigation Toggle navigation pinning
Julian Steenbakker
0cd88eca 1 parent c1abba22

feat: add web support

Inline Side-by-side
Showing 13 changed files with 465 additions and 22 deletions
<?xml version="1.0" encoding="UTF-8"?>
<Workspace
version = "1.0">
<FileRef
location = "group:Runner.xcodeproj">
</FileRef>
<FileRef
location = "group:Pods/Pods.xcodeproj">
</FileRef>
</Workspace>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>IDEDidComputeMac32BitWarning</key>
<true/>
</dict>
</plist>
<!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.4.0/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>
... ...
{
"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"
}
]
}
... ...
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:mobile_scanner/mobile_scanner.dart';
import 'mobile_scanner_arguments.dart';
import 'web/flutter_qr_web.dart';
enum Ratio { ratio_4_3, ratio_16_9 }
/// A widget showing a live camera preview.
... ... @@ -14,7 +17,7 @@ class MobileScanner extends StatefulWidget {
///
/// [barcode] The barcode object with all information about the scanned code.
/// [args] Information about the state of the MobileScanner widget
final Function(Barcode barcode, MobileScannerArguments args)? onDetect;
final Function(Barcode barcode, MobileScannerArguments? args)? onDetect;
/// TODO: Function that gets called when the Widget is initialized. Can be usefull
/// to check wether the device has a torch(flash) or not.
... ... @@ -66,6 +69,12 @@ class _MobileScannerState extends State<MobileScanner>
@override
Widget build(BuildContext context) {
if (kIsWeb) {
return createWebQrView(
onDetect: (barcode) => widget.onDetect!(barcode, null),
cameraFacing: CameraFacing.back,
);
} else {
return LayoutBuilder(builder: (context, BoxConstraints constraints) {
if (!onScreen) return const Text("Camera Paused.");
return ValueListenableBuilder(
... ... @@ -76,11 +85,18 @@ class _MobileScannerState extends State<MobileScanner>
return Container(color: Colors.black);
} else {
controller.barcodes.listen(
(a) => widget.onDetect!(a, value as MobileScannerArguments));
(a) =>
widget.onDetect!(a, value as MobileScannerArguments));
return ClipRect(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
width: MediaQuery
.of(context)
.size
.width,
height: MediaQuery
.of(context)
.size
.height,
child: FittedBox(
fit: widget.fit,
child: SizedBox(
... ... @@ -95,6 +111,7 @@ class _MobileScannerState extends State<MobileScanner>
});
});
}
}
@override
void dispose() {
... ...
// import 'package:flutter/material.dart';
// import 'package:qr_code_scanner/src/types/camera.dart';
//
// Widget createWebQrView({onPlatformViewCreated, CameraFacing? cameraFacing}) =>
// const SizedBox();
... ...
// ignore_for_file: avoid_web_libraries_in_flutter
import 'dart:async';
import 'dart:core';
import 'dart:html' as html;
import 'dart:js_util';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
import '../../mobile_scanner.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 Function(Barcode) onDetect;
final CameraFacing? cameraFacing;
const WebQrView(
{Key? key,
required this.onDetect,
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;
// QRViewControllerWeb? _controller;
late Size _size = const Size(0, 0);
Timer? timer;
String? code;
String? _errorMsg;
html.VideoElement video = html.VideoElement();
String viewID = 'QRVIEW-' + DateTime.now().millisecondsSinceEpoch.toString();
final StreamController<Barcode> _scanUpdateController =
StreamController<Barcode>();
late CameraFacing facing;
Timer? _frameIntervall;
@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(const Duration(milliseconds: 500), () {
start();
});
}
Future start() async {
await _makeCall();
_frameIntervall?.cancel();
_frameIntervall =
Timer.periodic(const 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) {
widget.onDetect(Barcode(rawValue: code.data));
// print('Barcode: ${code.data}');
// _scanUpdateController
// .add(Barcode(rawValue: code.data));
}
}
@override
Widget build(BuildContext context) {
if (_errorMsg != null) {
return Center(child: Text(_errorMsg!));
}
if (_localStream == null) {
return const 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;
// }
//
// @override
// Future<void> scanInvert(bool isScanInvert) {
// // TODO: implement scanInvert
// throw UnimplementedError();
// }
// }
Widget createWebQrView({required Function(Barcode) onDetect, CameraFacing? cameraFacing}) =>
WebQrView(
onDetect: onDetect,
cameraFacing: cameraFacing,
);
... ...
@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;
}
... ...
// 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});
}
... ...
... ... @@ -8,6 +8,7 @@ environment:
flutter: ">=2.5.0"
dependencies:
js: ^0.6.4
flutter:
sdk: flutter
... ...