andi34 · andi34 · Dec 21, 2020 · Nov 8, 2020 · Dec 6, 2020 · Dec 6, 2020
diff --git a/api/applyEffects.php b/api/applyEffects.php
@@ -33,7 +33,13 @@
 $thumb_size = substr($config['thumb_size'], 0, -2);
 $chroma_size = substr($config['chroma_size'], 0, -2);
 
-if (isset($_POST['isCollage']) && $_POST['isCollage'] === 'true') {
+if (!isset($_POST['style'])) {
+    die(json_encode([
+        'error' => 'No style provided'
+    ]));
+}
+
+if ($_POST['style'] === 'collage') {
     $collageBasename = substr($filename_tmp, 0, -4);
     $collageSrcImagePaths = [];
 
@@ -108,7 +114,7 @@
     $imageModified = true;
 }
 
-if ($config['take_frame'] && $_POST['isCollage'] !== 'true') {
+if ($config['take_frame'] && $_POST['style'] !== 'collage') {
     $frame = imagecreatefrompng($frame_path);
     $frame = resizePngImage($frame, imagesx($imageResource), imagesy($imageResource));
     $x = (imagesx($imageResource)/2) - (imagesx($frame)/2);
@@ -117,7 +123,7 @@
     $imageModified = true;
 }
 
-if ($config['chroma_keying']) {
+if ($config['chroma_keying'] || $_POST['style'] === 'chroma') {
     $chromaCopyResource = resizeImage($imageResource, $chroma_size, $chroma_size);
     imagejpeg($chromaCopyResource, $filename_keying, $config['jpeg_quality_chroma']);
     imagedestroy($chromaCopyResource);
@@ -155,11 +161,18 @@
 imagedestroy($imageResource);
 
 // insert into database
-appendImageToDB($file);
+if ($_POST['style'] !== 'chroma' || $_POST['style'] === 'chroma' && $config['live_keying_show_all'] === true) {
+    appendImageToDB($file);
+}
 
 // Change permissions
 chmod($filename_photo, octdec($picture_permissions));
 
+if ($_POST['style'] === 'chroma' && $config['live_keying_show_all'] === false) {
+    unlink($filename_photo);
+    unlink($filename_thumb);
+}
+
 echo json_encode([
     'file' => $file,
 ]);
diff --git a/api/deletePhoto.php b/api/deletePhoto.php
@@ -31,17 +31,15 @@
     ]));
 }
 
-if ($config['chroma_keying']) {
-    if (is_readable($filePathKeying)) {
-        if (!unlink ($filePathKeying)) {
-            die(json_encode([
-                'error' => 'Could not delete keying file',
-            ]));
-        }
+if (is_readable($filePathKeying)) {
+    if (!unlink ($filePathKeying)) {
+        die(json_encode([
+            'error' => 'Could not delete keying file',
+        ]));
     }
 }
 
-if ($config['keep_images']) {
+if (!$config['keep_images']) {
     if (is_readable($filePathTmp)) {
         if (!unlink ($filePathTmp)) {
             die(json_encode([

diff --git a/api/takePic.php b/api/takePic.php
@@ -110,6 +110,13 @@ function takePicture($filename)
         'current' => $number,
         'limit' => $config['collage_limit'],
     ]));
+} elseif ($_POST['style'] === 'chroma') {
+    takePicture($filename_tmp);
+    die(json_encode([
+        'success' => 'chroma',
+        'file' => $file,
+    ]));
+
 } else {
     die(json_encode([
         'error' => 'Invalid photo style provided',

diff --git a/chromakeying.php b/chromakeying.php
@@ -53,13 +53,13 @@
 <body data-main-image="<?=$mainimage?>">
 	<div class="chromawrapper">
 	<?php if ($keying_possible): ?>
-		<div class="canvasWrapper">
+		<div class="canvasWrapper initial">
 			<canvas id="mainCanvas"></canvas>
 		</div>
 
 		<div style="padding-top:10px;text-align:center;">
 			<?php
-				$dir = join(DIRECTORY_SEPARATOR, ['resources', 'img', 'background']) . DIRECTORY_SEPARATOR;
+				$dir = $config['keying_background_path'] . DIRECTORY_SEPARATOR;
 				$cdir = scandir($dir);
 				foreach ($cdir as $key => $value) {
 					if (!in_array($value, array(".","..")) && !is_dir($dir.$value)) {

diff --git a/config/config.inc.php b/config/config.inc.php
@@ -52,11 +52,6 @@
 $config['polaroid_rotation'] = '0';
 $config['take_frame'] = false;
 $config['take_frame_path'] = '../resources/img/frames/frame.png';
-$config['chroma_keying'] = false;
-// possible chroma_keying_variant values: 'marvinj', 'seriouslyjs'
-$config['chroma_keying_variant'] = 'marvinj';
-// possible chroma_size values: '1000px', '1500px', '2000px', '2500px'
-$config['chroma_size'] = '1500px';
 $config['use_collage'] = true;
 $config['take_collage_frame'] = false;
 $config['take_collage_frame_always'] = false;
@@ -148,6 +143,17 @@
 $config['event']['symbol'] = 'fa-heart-o';
 
 
+// K E Y I N G
+$config['chroma_keying'] = false;
+// possible chroma_keying_variant values: 'marvinj', 'seriouslyjs'
+$config['chroma_keying_variant'] = 'marvinj';
+// possible chroma_size values: '1000px', '1500px', '2000px', '2500px'
+$config['chroma_size'] = '1500px';
+$config['keying_background_path'] = 'resources/img/background';
+$config['live_keying_show_all'] = false;
+$config['use_live_keying'] = false;
+
+
 // P R I N T
 $config['use_print_result'] = false;
 $config['use_print_gallery'] = false;

diff --git a/index.php b/index.php
@@ -7,6 +7,10 @@
 
 $images = getImagesFromDB();
 $imagelist = ($config['newest_first'] === true) ? array_reverse($images) : $images;
+
+if ($config['use_live_keying']):
+header("location: livechroma.php");
+endif;
 ?>
 <!DOCTYPE html>
 <html>

diff --git a/lib/configsetup.inc.php b/lib/configsetup.inc.php
@@ -236,33 +236,6 @@
 			'name' => 'take_frame_path',
 			'value' => htmlentities($config['take_frame_path'])
 		],
-		'chroma_keying' => [
-			'type' => 'checkbox',
-			'name' => 'chroma_keying',
-			'value' => $config['chroma_keying']
-		],
-		'chroma_keying_variant' => [
-			'type' => 'select',
-			'name' => 'chroma_keying_variant',
-			'placeholder' => $defaultConfig['chroma_keying_variant'],
-			'options' => [
-				'marvinj' => 'MarvinJ',
-				'seriouslyjs' => 'Seriously.js'
-			],
-			'value' => $config['chroma_keying_variant']
-		],
-		'chroma_size' => [
-			'type' => 'select',
-			'name' => 'chroma_size',
-			'placeholder' => $defaultConfig['chroma_size'],
-			'options' => [
-				'1000px' => 'S',
-				'1500px' => 'M',
-				'2000px' => 'L',
-				'2500px' => 'XL'
-			],
-			'value' => $config['chroma_size']
-		],
 		'use_collage' => [
 			'type' => 'checkbox',
 			'name' => 'use_collage',
@@ -690,6 +663,51 @@
 			'value' => $config['event']['symbol']
 		]
 	],
+	'keying' => [
+		'chroma_keying' => [
+			'type' => 'checkbox',
+			'name' => 'chroma_keying',
+			'value' => $config['chroma_keying']
+		],
+		'chroma_keying_variant' => [
+			'type' => 'select',
+			'name' => 'chroma_keying_variant',
+			'placeholder' => $defaultConfig['chroma_keying_variant'],
+			'options' => [
+				'marvinj' => 'MarvinJ',
+				'seriouslyjs' => 'Seriously.js'
+			],
+			'value' => $config['chroma_keying_variant']
+		],
+		'chroma_size' => [
+			'type' => 'select',
+			'name' => 'chroma_size',
+			'placeholder' => $defaultConfig['chroma_size'],
+			'options' => [
+				'1000px' => 'S',
+				'1500px' => 'M',
+				'2000px' => 'L',
+				'2500px' => 'XL'
+			],
+			'value' => $config['chroma_size']
+		],
+		'background_path' => [
+			'type' => 'input',
+			'placeholder' => $defaultConfig['keying_background_path'],
+			'name' => 'keying_background_path',
+			'value' => htmlentities($config['keying_background_path'])
+		],
+		'live_keying_show_all' => [
+			'type' => 'checkbox',
+			'name' => 'live_keying_show_all',
+			'value' => $config['live_keying_show_all']
+		],
+		'use_live_keying' => [
+			'type' => 'checkbox',
+			'name' => 'use_live_keying',
+			'value' => $config['use_live_keying']
+		]
+	],
 	'print' => [
 		'use_print_result' => [
 			'type' => 'checkbox',

diff --git a/livechroma.php b/livechroma.php
@@ -0,0 +1,147 @@
+<?php
+require_once('lib/config.php');
+require_once('lib/db.php');
+
+$images = getImagesFromDB();
+$imagelist = ($config['newest_first'] === true) ? array_reverse($images) : $images;
+?>
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=no">
+		<meta name="msapplication-TileColor" content="<?=$config['colors']['primary']?>">
+		<meta name="theme-color" content="<?=$config['colors']['primary']?>">
+
+		<!-- Favicon + Android/iPhone Icons -->
+		<link rel="apple-touch-icon" sizes="180x180" href="resources/img/apple-touch-icon.png">
+		<link rel="icon" type="image/png" sizes="32x32" href="resources/img/favicon-32x32.png">
+		<link rel="icon" type="image/png" sizes="16x16" href="resources/img/favicon-16x16.png">
+		<link rel="manifest" href="resources/img/site.webmanifest">
+		<link rel="mask-icon" href="resources/img/safari-pinned-tab.svg" color="#5bbad5">
+
+		<!-- Fullscreen Mode on old iOS-Devices when starting photobooth from homescreen -->
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+		<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />
+		<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
+		<link rel="stylesheet" href="vendor/PhotoSwipe/dist/photoswipe.css" />
+		<link rel="stylesheet" href="vendor/PhotoSwipe/dist/default-skin/default-skin.css" />
+		<link rel="stylesheet" href="resources/css/live_chromakeying.css" />
+		<?php if ($config['gallery_bottom_bar']): ?>
+		<link rel="stylesheet" href="resources/css/photoswipe-bottom.css" />
+		<?php endif; ?>
+		<?php if ($config['rounded_corners']): ?>
+		<link rel="stylesheet" href="resources/css/rounded.css" />
+		<?php endif; ?>
+	</head>
+<body>
+	<div class="chromawrapper">
+		<div class="top-bar">
+			<?php if (!$config['use_live_keying']): ?>
+			<a href="index.php" class="btn btn--small btn--flex home"><i class="fa fa-times"></i></a>
+			<?php endif; ?>
+
+			<?php if ($config['show_gallery']): ?>
+			<a class="gallerybtn btn btn--small btn--flex" href="#"><i class="fa fa-th"></i> <span data-i18n="gallery"></span></a>
+			<?php endif; ?>
+
+		</div>
+
+		<div class="canvasWrapper initial">
+			<canvas id="mainCanvas"></canvas>
+		</div>
+
+		<div class="chromaNote">
+			<span data-i18n="chromaInfoBefore"></span>
+		</div>
+
+		<div class="stages" id="loader">
+			<div class="loaderInner">
+				<div class="spinner">
+					<i class="fa fa-cog fa-spin"></i>
+				</div>
+
+				<div id="ipcam--view"></div>
+
+				<video id="video--view" autoplay playsinline></video>
+
+				<div id="counter">
+					<canvas id="video--sensor"></canvas>
+				</div>
+				<div class="cheese"></div>
+				<div class="loading"></div>
+			</div>
+		</div>
+
+		<!-- Result Page -->
+		<div class="stages" id="result"></div>
+
+		<div class="backgrounds"> 
+			<?php
+				$dir = $config['keying_background_path'] . DIRECTORY_SEPARATOR;
+				$cdir = scandir($dir);
+				foreach ($cdir as $key => $value) {
+					if (!in_array($value, array(".","..")) && !is_dir($dir.$value)) {
+						echo '<img src="'.$dir.$value.'" class="backgroundPreview" onclick="setBackgroundImage(this.src)">';
+					}
+				}
+			?>
+		</div>
+
+		<div class="chroma-control-bar">
+			<a href="#" class="btn takeChroma"><i class="fa fa-camera"></i> <span data-i18n="takePhoto"></span></a>
+			<?php if ($config['allow_delete']): ?>
+			<a href="#" class="btn deletebtn"><i class="fa fa-trash"></i> <span data-i18n="delete"></span></a>
+			<?php endif; ?>
+			<a href="#" class="btn reloadPage"><i class="fa fa-refresh"></i> <span data-i18n="reload"></span></a>
+		</div>
+	<div>
+
+	<div id="wrapper">
+		<?php include('template/gallery.template.php'); ?>
+	</div>
+	<?php include('template/pswp.template.php'); ?>
+
+	<div class="send-mail">
+		<i class="fa fa-times" id="send-mail-close"></i>
+		<p data-i18n="insertMail"></p>
+		<form id="send-mail-form" style="margin: 0;">
+			<input class="mail-form-input" size="35" type="email" name="sendTo">
+			<input id="mail-form-image" type="hidden" name="image" value="">
+
+			<?php if ($config['send_all_later']): ?>
+				<input type="checkbox" id="mail-form-send-link" name="send-link" value="yes">
+				<label data-i18n="sendAllMail" for="mail-form-send-link"></label>
+			<?php endif; ?>
+
+			<button class="mail-form-input btn" name="submit" type="submit" value="Send"><span data-i18n="send"></span></button>
+		</form>
+
+		<div id="mail-form-message" style="max-width: 75%"></div>
+	</div>
+
+	<div class="modal" id="print_mesg">
+		<div class="modal__body"><span data-i18n="printing"></span></div>
+	</div>
+
+	<script src="node_modules/whatwg-fetch/dist/fetch.umd.js"></script>
+	<script type="text/javascript" src="api/config.php"></script>
+	<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
+	<script type="text/javascript" src="vendor/PhotoSwipe/dist/photoswipe.min.js"></script>
+	<script type="text/javascript" src="vendor/PhotoSwipe/dist/photoswipe-ui-default.min.js"></script>
+	<script type="text/javascript" src="resources/js/photoinit.js"></script>
+	<script type="text/javascript" src="resources/js/core.js"></script>
+	<?php if ($config['chroma_keying_variant'] === 'marvinj'): ?>
+	<script type="text/javascript" src="node_modules/marvinj/marvinj/release/marvinj-1.0.js"></script>
+	<?php else:?>
+	<script type="text/javascript" src="vendor/Seriously/seriously.js"></script>
+	<script type="text/javascript" src="vendor/Seriously/effects/seriously.chroma.js"></script>
+	<?php endif; ?>
+	<script type="text/javascript" src="resources/js/livechroma.js"></script>
+	<script type="text/javascript" src="resources/js/theme.js"></script>
+	<script src="node_modules/@andreasremdt/simple-translator/dist/umd/translator.min.js"></script>
+	<script type="text/javascript" src="resources/js/i18n.js"></script>
+</body>
+</html>