webcam support

lam/lib/html.inc

@@ -3078,7 +3078,13 @@ class htmlStatusMessage extends htmlElement {
 	 * @return array List of input field names and their type (name => type)
 	 */
 	public function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) {
+		if (!empty($this->cssClasses)) {
+			echo '<div class="' . implode(' ', $this->cssClasses) . '">';
+		}
 		StatusMessage($this->type, $this->title, $this->text, $this->params);
+		if (!empty($this->cssClasses)) {
+			echo '</div>';
+		}
 		return array();
 	}
 

lam/lib/modules/inetOrgPerson.inc

@@ -1629,7 +1629,7 @@ class inetOrgPerson extends baseModule implements passwordService {
 		if ($this->isAdminReadOnly('jpegPhoto')) {
 			return array();
 		}
-		if (isset($_POST['form_subpage_' . get_class($this) . '_photo_upload'])) {
+		if (isset($_POST['form_subpage_' . get_class($this) . '_photo_upload']) || isset($_POST['webcamData'])) {
 			return $this->uploadPhoto();
 		}
 		if (isset($_POST['form_subpage_' . get_class($this) . '_attributes_crop'])) {
@@ -1656,7 +1656,11 @@ class inetOrgPerson extends baseModule implements passwordService {
 	 */
 	private function uploadPhoto() {
 		$messages = array();
-		if ($_FILES['photoFile'] && ($_FILES['photoFile']['size'] > 0)) {
+		if ((empty($_FILES['photoFile']) || ($_FILES['photoFile']['size'] <= 0)) && empty($_POST['webcamData'])) {
+			$messages[] = $this->messages['file'][0];
+			return $messages;
+		}
+		if (!empty($_FILES['photoFile']['tmp_name'])) {
 			$handle = fopen($_FILES['photoFile']['tmp_name'], "r");
 			$data = fread($handle, 100000000);
 			if (!empty($this->moduleSettings['inetOrgPerson_jpegPhoto_maxSize'][0]) && (strlen($data) > (1024 * $this->moduleSettings['inetOrgPerson_jpegPhoto_maxSize'][0]))) {
@@ -1666,6 +1670,12 @@ class inetOrgPerson extends baseModule implements passwordService {
 				return array($errMsg);
 			}
 			fclose($handle);
+		}
+		elseif (isset($_POST['webcamData'])) {
+			$data = $_POST['webcamData'];
+			$data = str_replace('data:image/png;base64,', '', $data);
+			$data = base64_decode($data);
+		}
 		// convert to JPG
 		try {
 			include_once dirname(__FILE__) . '/../imageutils.inc';
@@ -1686,10 +1696,6 @@ class inetOrgPerson extends baseModule implements passwordService {
 			return $messages;
 		}
 		$this->attributes['jpegPhoto'][0] = $data;
-		}
-		else {
-			$messages[] = $this->messages['file'][0];
-		}
 		return $messages;
 	}
 
@@ -1710,16 +1716,23 @@ class inetOrgPerson extends baseModule implements passwordService {
 			$container->addVerticalSpacer('1rem');
 			$webcamContent = new htmlResponsiveRow();
 			$webcamContent->add(new htmlSubTitle(_('Get from webcam')), 12);
-			$webcamContent->addLabel(new htmlOutputText(_('Image')));
+			$errorMessage = new htmlStatusMessage('ERROR', '');
-			$webcamContent->addField(new htmlVideo('lam-webcam-video'));
+			$errorMessage->setCSSClasses(array('hidden', 'lam-webcam-message'));
-			$webcamContent->addLabel(new htmlOutputText('&nbsp;', false));
+			$webcamContent->add($errorMessage, 12);
-			$webcamButtonGroup = new htmlGroup();
+			$captureButton = new htmlButton('lam-webcam-capture', _('Start capture'));
-			$captureButton = new htmlButton('lam-webcam-capture', _('Capture'));
 			$captureButton->setOnClick('window.lam.tools.startWebcamCapture(event);');
-			$webcamButtonGroup->addElement($captureButton);
+			$webcamContent->add($captureButton, 12, 12, 12, 'text-center');
-			$webcamButtonGroup->addElement(new htmlAccountPageButton(get_class($this), 'photo', 'upload', _('Upload')));
+			$video = new htmlVideo('lam-webcam-video');
-			$webcamButtonGroup->addElement(new htmlCanvas('lam-webcam-canvas'));
+			$video->setCSSClasses(array('hidden'));
-			$webcamContent->addField($webcamButtonGroup);
+			$webcamContent->add($video, 12, 12, 12, 'text-center');
+			$webcamContent->addVerticalSpacer('0.5rem');
+			$webcamUploadButton = new htmlButton('uploadWebcam', _('Upload'));
+			$webcamUploadButton->setCSSClasses(array('btn-lam-webcam-upload', 'hidden'));
+			$webcamUploadButton->setOnClick('window.lam.tools.startWebcamUpload();');
+			$webcamContent->add($webcamUploadButton, 12, 12, 12, 'text-center');
+			$canvas = new htmlCanvas('lam-webcam-canvas');
+			$canvas->setCSSClasses(array('hidden'));
+			$webcamContent->add($canvas, 12);
 			$webcamDiv = new htmlDiv('lam_webcam_div', $webcamContent, array('hidden'));
 			$container->add($webcamDiv, 12);
 			$container->addVerticalSpacer('1rem');

lam/style/500_layout.css

@@ -314,6 +314,11 @@ table.collapse {
 	font-weight: bold;
 }
 
+#lam-webcam-video {
+	max-width: 200px;
+	max-height: 200px;
+}
+
 /** buttons */
 .saveButton {
 	background-image: url(../graphics/save.png) !important;

lam/templates/lib/500_lam.js

@@ -959,8 +959,9 @@ window.lam.tools.initWebcamCapture = function() {
  */
 window.lam.tools.startWebcamCapture = function(event) {
 	event.preventDefault();
-	var canvas = document.getElementById('lam-webcam-canvas');
+	var video = document.getElementById('lam-webcam-video');
-	var video = document.getElementById('lam-webcam-videofor');
+	var msg = jQuery('.lam-webcam-message');
+	msg.hide();
 	navigator.mediaDevices.getUserMedia({
 			video: {
 				facingMode: 'user',
@@ -972,13 +973,45 @@ window.lam.tools.startWebcamCapture = function(event) {
 		.then(function(stream) {
 			video.srcObject = stream;
 			video.play();
+			window.lam.tools.webcamStream = stream;
+			jQuery('#btn_lam-webcam-capture').hide();
+			jQuery('.btn-lam-webcam-upload').show();
+			jQuery('#lam-webcam-video').show();
 		})
 		.catch(function(err) {
-			console.log("An error occurred: " + err);
+			msg.find('.statusTitle').text(err);
+			msg.show();
 		});
 	return false;
 }
 
+/**
+ * Starts the webcam upload.
+ */
+window.lam.tools.startWebcamUpload = function() {
+	var canvas = document.getElementById('lam-webcam-canvas');
+	var video = document.getElementById('lam-webcam-video');
+	var form = jQuery('#lam-webcam-canvas').closest('form');
+	canvas.setAttribute('width', video.videoWidth);
+	canvas.setAttribute('height', video.videoHeight);
+	var context = canvas.getContext('2d');
+	context.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+	var canvasData = canvas.toDataURL("image/png");
+	var canvasDataInput = jQuery("<input></input>");
+	canvasDataInput.attr('name', 'webcamData');
+	canvasDataInput.attr('type', 'hidden');
+	canvasDataInput.attr('value', canvasData);
+	video.pause();
+	window.lam.tools.webcamStream.getTracks().forEach(function(track) {
+		track.stop();
+	});
+	form.append(canvasDataInput);
+	jQuery(canvas).remove();
+	jQuery(video).remove();
+	form.submit();
+	return true;
+}
+
 window.lam.tools.schema = window.lam.tools.schema || {};
 
 /**