Optimzied camera app css and added switch front back camera button

web/Camera/img/icons/camswitch.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><g><path d="M0,0h24v24H0V0z" fill="none"/></g><g><g><path d="M16,7h-1l-1-1h-4L9,7H8C6.9,7,6,7.9,6,9v6c0,1.1,0.9,2,2,2h8c1.1,0,2-0.9,2-2V9C18,7.9,17.1,7,16,7z M16,15H8V9h1.83l1-1 h2.34l1,1H16V15z"/><circle cx="12" cy="12" r="2"/><path d="M8.57,0.52L13.05,5l1.41-1.41l-1.54-1.54C17.7,2.46,21.53,6.24,22,11h2C23.36,3.3,15.79-1.67,8.57,0.52z"/><path d="M9.54,20.41l1.54,1.54C6.3,21.54,2.47,17.76,2,13H0c0.64,7.7,8.21,12.67,15.43,10.48L10.95,19L9.54,20.41z"/></g></g></svg>

web/Camera/index.html

@@ -16,11 +16,17 @@
 			body{
 				background-color: #000000;
 			}
+
 			.previewer{
 				width: 100%;
 				max-height: 100%;
 			}
 
+			.previewer.mirror{
+				-webkit-transform: scaleX(-1);
+  				transform: scaleX(-1);
+			}
+
 			#controls{
 				position: fixed;
 				left: 0px;
@@ -40,6 +46,27 @@
 				width: 5em;
 			}
 
+			#verticalUI .settingButton{
+				position: absolute;
+				bottom: 2em;
+				left: 1em;
+			}
+
+			#verticalUI .cameraFunctionPanel{
+				position: fixed;
+				width: 100%;
+				top:0px;
+				left: 0px;
+			}
+
+			#verticalUI .cameraFunctionPanel .camswitch{
+				position: absolute;
+				top: 1em;
+				right: 1em;
+				box-shadow: none;
+				background-color: transparent !important;
+			}
+
 			#sidewayUI .shutterContainer{
 				position: fixed;
 				right: 0px;
@@ -57,6 +84,28 @@
 				transform: translateY(-50%);
 			}
 
+			#sidewayUI .settingButton{
+				position: fixed;
+				top: 2em;
+				right: 1em;
+			}
+
+			#sidewayUI .cameraFunctionPanel{
+				position: fixed;
+				height: 100%;
+				top:0px;
+				left: 0px;
+			}
+
+			#sidewayUI .cameraFunctionPanel .camswitch{
+				position: absolute;
+				top: 1em;
+				left: 1em;
+				box-shadow: none;
+				background-color: transparent !important;
+			}
+
+
 			#shutterCover{
 				position: fixed;
 				top:0px;
@@ -69,18 +118,17 @@
 
 			#albumn{
 				position: fixed;
-				bottom: 20px;
-				right: 12px;
-				width: 6em;
+				bottom: 2em;
+				right: 1em;
 			}
 
 			.ablumnpreview{
-				width: 5em;
+				width: 3em;
 			}
 
 			.latestPreview{
-				width: 5em !important;
-				height: 5em !important;
+				width: 3em !important;
+				height: 3em !important;
 			}
 
 			.zoombarcontainer{
@@ -117,25 +165,48 @@
 			<div class="zoombarcontainer">
 				<input id="zoombar" type="range" min="1" max="100" value="50">
 			</div>
+			<div></div>
 			<div id="verticalUI">
+				<div class="cameraFunctionPanel">
+					<div class="ui button small icon basic camswitch" onclick="switchCamera();">
+						<img src="img/icons/camswitch.svg">
+					</div>
+				</div>
 				<div class="shutterContainer">
 					<div onclick="takePicture();" ontouchdown="takePicture();">
 						<img class="ui shutter image" src="img/shutter.png">
 					</div>
 				</div>
+				<div class="settingButton">
+					<button onclick="toggleSettings();" class="circular inverted ui icon large button">
+						<i class="setting icon"></i>
+					</button>
+				</div>
 			</div>
 			<div id="sidewayUI">
+				<div class="cameraFunctionPanel">
+					<div class="ui button small icon basic camswitch" onclick="switchCamera();">
+						<img src="img/icons/camswitch.svg">
+					</div>
+				</div>
 				<div class="shutterContainer">
 					<div onclick="takePicture();" ontouchdown="takePicture();">
 						<img class="ui shutter image" src="img/shutter.png">
 					</div>
 				</div>
+				<div class="settingButton">
+					<button onclick="toggleSettings();" class="circular inverted ui icon large button">
+						<i class="setting icon"></i>
+					</button>
+				</div>
 			</div>
 
 		</div>
 		<script>
 			let isMobile = false;
 			let saveFolder = "user:/Photo/DCIM";
+			let cameraFacingBackground = true;
+			let videoStream = null;
 			if( /Android|webOS|iPhone|iPad|Mac|Macintosh|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 				isMobile = true;
 			}
@@ -146,6 +217,7 @@
 					initcamera();
 				});
 				loadAblumnPreview();
+				initVideoDeviceConstraints();
 			});
 
 			$(window).on("resize", function(){
@@ -177,7 +249,7 @@
 				ao_module_agirun("Camera/backend/loadLatestPhoto.js", {savetarget: saveFolder}, function(data){
 					if (data.error !== undefined){
 						console.log(data.error);
-					}else{
+					}else if (data != ""){
 						$(".latestPreview").attr("src", `../media/?file=${data}`);
 						console.log(data);
 					}
@@ -250,33 +322,65 @@
 				uploadFile(imageFile, "user:/Photo/DCIM", callback);
 			}
 
-			function initcamera(){
+			function initVideoDeviceConstraints(){
+				let supports = navigator.mediaDevices.getSupportedConstraints();
+				console.log(supports);
+				if( supports['facingMode'] == false ) {
+					$(".camswitch").addClass("disabled");
+				}
+			}
+
+			function switchCamera(){
+				//Stop all the previous streams
+				videoStream.getTracks().forEach(t => {
+					t.stop();
+				});
+
+				//Toggle the new camera
+				cameraFacingBackground = !cameraFacingBackground;
+				if (cameraFacingBackground){
+					//Use environment
+					$(".previewer").removeClass("mirror");
+					initcamera();
+				}else{
+					//Use user
+					$(".previewer").addClass("mirror");
+					initcamera('user');
+				}
+			}
+
+			function initcamera(facingmode = 'environment'){
 				//Define the camera constraints
 				const constraints = {
 					video: {
 						width: { ideal: 2048 },
 						height: { ideal: 1080 }, 
 						zoom: true,
-						facingMode: 'environment'
+						facingMode: facingmode
 					},
 					audio: false
 				};
+				
+				let video = document.querySelector("video");
+				//Just to make sure it is oaused when starting 
+				video.pause()
+				video.srcObject = null
 
-				const video = document.querySelector("video");
 				navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
 					const [track] = stream.getVideoTracks();
+					videoStream = stream;
 					try{
 						const capabilities = track.getCapabilities();
 						const settings = track.getSettings();
 						console.log(track, settings);
 						video.srcObject = stream;
+						video.play();
 
 						//Check if zoom exists. If yes, allow zoom
 						if (!('zoom' in settings)) {
 							$("#zoombar").hide();
 						}else{
 							var input = $("#zoombar")[0];
-							
 							input.min = capabilities.zoom.min;
 							input.max = capabilities.zoom.max;
 							input.step = capabilities.zoom.step;