fitness-web/frontend/web/js/customer.js

function Customer(o){
	
	var defaults =  {
			'image_data' : 'customerupdate-photo_data'
			
	};
	
	init();
	
	function init(){

        defaults = $.extend(defaults,o);
        var url = location.href;
        // var initCamera;
        console.info(url);
        // if ( url.indexOf("https") >= 0){
        //     initCamera = true;
        // }else if ( url.indexOf("localhost") >= 0 ){
        //     initCamera = true;
        // }
        // if ( initCamera ){
           /* Webcam.set({
                width: 160,
                height: 120,
                dest_width: 320,
                dest_height: 240,
                image_format: 'jpeg',
                jpeg_quality: 90
            });
            Webcam.attach( '#my_camera' );
            $("#snap").click(snap);*/
        // }else{
            //$("#snap").hide();
        // }



        preventSubmit( '#customerupdate-replacementcardnumber' );
        preventSubmit( '#customercreate-cardnumber' );
	}
	
	 function preventSubmit($selector){
		$($selector).keydown(function(e) {
			  if(e.keyCode == 13) { // enter key was pressed
				  e.preventDefault();
//				  e.stopImmediatePropagation();
//				  e.stopPropagation();
			    // run own code
			    return false; // prevent execution of rest of the script + event propagation / event bubbling + prevent default behaviour
			  }
			});
		$($selector).keyup(function(e) {
			if(e.keyCode == 13) { // enter key was pressed
				e.preventDefault();
//				  e.stopImmediatePropagation();
//				  e.stopPropagation();
				// run own code
				return false; // prevent execution of rest of the script + event propagation / event bubbling + prevent default behaviour
			}
		});
		$($selector).keypress(function(e) {
			if(e.keyCode == 13) { // enter key was pressed
				e.preventDefault();
//				  e.stopImmediatePropagation();
//				  e.stopPropagation();
				// run own code
				return false; // prevent execution of rest of the script + event propagation / event bubbling + prevent default behaviour
			}
		});
	}
	
	// function snap(){
	// 	Webcam.snap( function(data_uri) {
	//         document.getElementById('my_result').innerHTML = '<img width="160" height="120" src="'+data_uri+'"/>';
	//
	//         var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
	//
	//         document.getElementById(defaults.image_data ).value = raw_image_data;
	//
	//     } );
	// }



	(() => {
		// The width and height of the captured photo. We will set the
		// width to the value defined here, but the height will be
		// calculated based on the aspect ratio of the input stream.

		const width = 320; // We will scale the photo width to this
		let height = 0; // This will be computed based on the input stream

		// |streaming| indicates whether or not we're currently streaming
		// video from the camera. Obviously, we start at false.

		let streaming = false;

		// The various HTML elements we need to configure or control. These
		// will be set by the startup() function.

		let video = null;
		let canvas = null;
		let photo = null;
		// let startbutton = null;
		let snapButton = null;

		function showViewLiveResultButton() {
			if (window.self !== window.top) {
				// Ensure that if our document is in a frame, we get the user
				// to first open it in its own tab or window. Otherwise, it
				// won't be able to request permission for camera access.
				document.querySelector(".contentarea").remove();
				const button = document.createElement("button");
				button.textContent = "View live result of the example code above";
				document.body.append(button);
				button.addEventListener("click", () => window.open(location.href));
				return true;
			}
			return false;
		}

		function startup() {
			if (showViewLiveResultButton()) {
				return;
			}
			video = document.getElementById("video");
			canvas = document.getElementById("canvas");
			photo = document.getElementById("photo");
			// startbutton = document.getElementById("startbutton");
			snapButton = document.getElementById("snap");

			navigator.mediaDevices
				.getUserMedia({ video: true, audio: false })
				.then((stream) => {
					video.srcObject = stream;
					video.play();
				})
				.catch((err) => {
					console.error(`An error occurred: ${err}`);
				});

			video.addEventListener(
				"canplay",
				(ev) => {
					if (!streaming) {
						height = video.videoHeight / (video.videoWidth / width);

						// Firefox currently has a bug where the height can't be read from
						// the video, so we will make assumptions if this happens.

						if (isNaN(height)) {
							height = width / (4 / 3);
						}

						video.setAttribute("width", width);
						video.setAttribute("height", height);
						canvas.setAttribute("width", width);
						canvas.setAttribute("height", height);
						streaming = true;
					}
				},
				false
			);

			// startbutton.addEventListener(
			// 	"click",
			// 	(ev) => {
			// 		takepicture();
			// 		ev.preventDefault();
			// 	},
			// 	false
			// );


			snapButton.addEventListener(
				"click",
				(ev) => {
					takepicture();
					ev.preventDefault();
				},
				false
			);
			clearphoto();
		}

		// Fill the photo with an indication that none has been
		// captured.

		function clearphoto() {
			const context = canvas.getContext("2d");
			context.fillStyle = "#AAA";
			context.fillRect(0, 0, canvas.width, canvas.height);

			const data = canvas.toDataURL("image/png");
			photo.setAttribute("src", data);
		}

		// Capture a photo by fetching the current contents of the video
		// and drawing it into a canvas, then converting that to a PNG
		// format data URL. By drawing it on an offscreen canvas and then
		// drawing that to the screen, we can change its size and/or apply
		// other changes before drawing it.

		function takepicture() {
			const context = canvas.getContext("2d");
			if (width && height) {
				canvas.width = width;
				canvas.height = height;
				context.drawImage(video, 0, 0, width, height);

				const dataURL = canvas.toDataURL("image/jpg");
				photo.setAttribute("src", dataURL);

				// console.info("datauri",dataURL);
				// document.getElementById('my_result').innerHTML = '<img width="160" height="120" src="'+data_uri+'"/>';

				var raw_image_data = dataURL.replace(/^data\:image\/\w+\;base64\,/, '');

				document.getElementById(defaults.image_data ).value = raw_image_data;

			} else {
				clearphoto();
			}
		}

		// Set up our event listener to run the startup process
		// once loading is complete.
		window.addEventListener("load", startup, false);
	})();


}