<?php 




Route::isJs(function(){
ce("qrcode")
->tpl(function(){
?>
<div class="qrcodescaner">
	<style type="text/css">
		.qrcodescaner{
			position: relative;
			background: #000;
		}
		.qrcodescaner video{
			background: #000;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
		}
	</style>
	<video autoplay="true"></video>
	<canvas id="qr-canvas" style="display:none;" width="800" height="600"></canvas>
</div>
<?php
})
->js(function(){
?>
<script>
	app.directive('qrcode', function () {
		return {
			restrict: 'EA',
			template:{{inject-tpl}},
			scope:{detect:"&?",sendApi:"@"},
			replace:true,
			transclude:true,
			controller:function($scope){
			},
			link: function ($scope, iElement, iAttrs) {
				function handleVideo(stream) {
					video.src = window.URL.createObjectURL(stream);
					qrcode.callback = function(code){
						if ($scope.sendApi) {
							api($scope.sendApi,{code:code});
						}
						$scope.detect({code:code});
					}
					setInterval(function(){
						gCtx.drawImage(video,0,0);
						try{
						    qrcode.decode();
						}catch(e){
						};
					},300);
				}
				var video = $("video",iElement).get(0);
				var gCanvas = $("#qr-canvas",iElement).get(0);
				var w = 800,h=600;
					gCanvas.style.width = w + "px";
					gCanvas.style.height = h + "px";
					gCanvas.width = w;
					gCanvas.height = h;
				var gCtx = gCanvas.getContext("2d");
					gCtx.clearRect(0, 0, w, h);
					navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
					loadjs(false,{js:["//webqr.com/llqrcode.js","//apis.google.com/js/plusone.js"]},function(){
						if (navigator.getUserMedia) {       
							navigator.getUserMedia({video: true}, handleVideo, videoError);
						}
					});
				function videoError(e) {
				   navigator.getUserMedia({video: true}, handleVideo, videoError);
				}
			}
		};
	});
</script>
<?php
});
});


