MediaWiki:CamScanner.js

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.

$(document).ready(function () {
	if ($('#cam-scanner').length === 0) return; //only on pages with a cam-scanner-div
	mw.loader.using( 'oojs-ui-core').done( function () {
	$.when(
		$.getScript("//rawgit.com/schmich/instascan-builds/master/instascan.min.js"),
		$.Deferred(function (deferred) {
			$(deferred.resolve);
		})
	).done(function () {
		var textInput = new OO.ui.TextInputWidget( {
			placeholder: 'Enter ID or scan QR code'
		} );
		var scan_button = new OO.ui.ButtonWidget( {
			label: 'Scan'
		} );
		var search_button = new OO.ui.ButtonWidget( {
			label: 'Search'
		} );
		var open_button = new OO.ui.ButtonWidget( {
			label: 'Open'
		} );
		var popup = new OO.ui.PopupWidget( {
		//style="width:400px;height:400px;"
		$content: $( '<div style="width:400px;height:400px;"><video width="400" height="400" id="cam-scanner-preview"></video></div>' ),
		padded: true,
		width: 450,
		height: 450,
		head: true,
		label: 'CamScanner'
		} );
		
		$('#cam-scanner').append(textInput.$element);
		$('#cam-scanner').append(scan_button.$element);
		$('#cam-scanner').append(search_button.$element);
		$('#cam-scanner').append(open_button.$element);
		$('#cam-scanner').append(popup.$element);
		var qr_detected = false;
		scan_button.on( 'click', function () {
			qr_detected = false;
			// To display the popup, toggle the visibility to 'true'.
			popup.toggle( true );
			textInput.setValue("Scanning...");
			let scanner = new Instascan.Scanner({
				video: document.getElementById('cam-scanner-preview')
			});
			scanner.addListener('scan', function (content) {
				console.log(content);
				textInput.setValue(content);
				qr_detected = true;
				popup.toggle( false );
			});
			Instascan.Camera.getCameras().then(function (cameras) {
				if (cameras.length > 0) {
					scanner.start(cameras[0]);
				} else {
					console.error('No cameras found.');
				}
			}).catch(function (e) {
				console.error(e);
			});
			popup.on( 'toggle', function (visible) {
				if (!visible){
					console.log("Stop scanner");
					if (!qr_detected) textInput.setValue("");
					scanner.stop();
				}
			});
		});
		search_button.on( 'click', function () {
			window.location = "/w/index.php?title=_Special:Search&search=" + textInput.getValue() + "&go=Page";
		});
		open_button.on( 'click', function () {
			window.location = textInput.getValue();
		});

	});
	});
});