Request permission to camera & microphone

permission.js

navigator.permissions.query({name: 'microphone'})
	.then((permissionObj) => {
		console.log(permissionObj.state);
	})
	.catch((error) => {
		console.log('Got error :', error);
	})

	navigator.permissions.query({name: 'camera'})
	.then((permissionObj) => {
		console.log(permissionObj.state);
	})
	.catch((error) => {
		console.log('Got error :', error);
	})

	var _scannerIsRunning = false;

	function startScanner() {
		Quagga.init({
			inputStream: {
				name: "Live",
				type: "LiveStream",
				target: document.querySelector('#barcode-picker')
			},
			decoder: {
				readers: [
				"code_128_reader",
				"ean_reader",
				"ean_8_reader",
				"code_39_reader",
				"code_39_vin_reader",
				"codabar_reader",
				"upc_reader",
				"upc_e_reader",
				"i2of5_reader"
				],
				debug: {
					showCanvas: true,
					showPatches: true,
					showFoundPatches: true,
					showSkeleton: true,
					showLabels: true,
					showPatchLabels: true,
					showRemainingPatchLabels: true,
					boxFromPatches: {
						showTransformed: true,
						showTransformedBox: true,
						showBB: true
					}
				}
			},

		}, function (err) {
			if (err) {
				console.log(err);
				return
			}

			console.log("Initialization finished. Ready to start");
			Quagga.start();

                // Set flag to is running
                _scannerIsRunning = true;
            });

		Quagga.onProcessed(function (result) {
			var drawingCtx = Quagga.canvas.ctx.overlay,
			drawingCanvas = Quagga.canvas.dom.overlay;

			if (result) {
				if (result.boxes) {
					drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
					result.boxes.filter(function (box) {
						return box !== result.box;
					}).forEach(function (box) {
						Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
					});
				}

				if (result.box) {
					Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
				}

				if (result.codeResult && result.codeResult.code) {
					Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
				}
			}
		});


		Quagga.onDetected(function (result) {
			if (!$(document).find('input[name="'+result.codeResult.code+'"]').length) {
				tambah_brg(result.codeResult.code)
			}
		});
	}

	startScanner();

	navigator.mediaDevices.getUserMedia({
		video: { 
			facingMode: 'environment',
			zoom: true 
		}
	})
	.then(mediaStream => {
		document.querySelector('video').srcObject = mediaStream;

		const [track] = mediaStream.getVideoTracks();
		const ts = mediaStream.getVideoTracks()[0];
		const capabilities = track.getCapabilities();
		const settings = track.getSettings();

		const input = document.querySelector('input[type="range"]');

	  // Check whether zoom is supported or not.
	  if (!('zoom' in settings)) {
	  	return Promise.reject('Zoom is not supported by ' + track.label);
	  }

	  $('.aaa').click(function(){

	  	$(this).toggleClass('click');

	  	if($(this).hasClass('click')){
	  		ts.applyConstraints({
	  			advanced: [{torch: true}]
	  		})
	  		.catch(e => alert(e));
	  	}else{
	  		track.applyConstraints({
	  			advanced: [{torch: false}]
	  		})
	  		.catch(e => alert(e));
	  	}
	  })

	  // Map zoom to a slider element.
	  input.min = capabilities.zoom.min;
	  input.max = capabilities.zoom.max;
	  input.step = capabilities.zoom.step;
	  input.value = settings.zoom;
	  input.oninput = function(event) {
	  	track.applyConstraints({advanced: [ {zoom: event.target.value} ]});
	  }
	  input.hidden = false;
	})
	.catch(error => console.log('Argh!', error.name || error));