Skip to content

Commit

Permalink
Add Preview From Photo
Browse files Browse the repository at this point in the history 
Add Preview From Photo
  • Loading branch information
@couz74
couz74 committed Jun 10, 2020
1 parent bff0765 commit 4b5ba4c
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 44 deletions.
30 changes: 30 additions & 0 deletions api/takeVideo.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
<?php
header('Content-Type: application/json');

require_once('../lib/config.php');

function isRunning($pid){
try{
$result = shell_exec(sprintf("ps %d", $pid));
if( count(preg_split("/\n/", $result)) > 2){
return true;
}
}catch(Exception $e){}

return false;
}

if ($_POST['play'] === "true" ) {
$pid = exec('gphoto2 --stdout --capture-movie | ffmpeg -i - -vcodec rawvideo -pix_fmt yuv420p -threads 0 -f v4l2 /dev/video0 > /dev/null 2>&1 & echo $!', $out);
sleep(3); //Allow the Gphoto2 process to start
die(json_encode([
'isRunning' => isRunning($pid),
'pid' => $pid - 1
]));
}elseif($_POST['play'] === "false") {
exec('kill -15 '.$_POST['pid']);
die(json_encode([
'isRunning' => isRunning($_POST['pid']),
'pid' => $_POST['pid']
]));
}
107 changes: 63 additions & 44 deletions resources/js/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,38 +97,61 @@ const photoBooth = (function () {
public.toggleNav = function () {
$('#mySidenav').toggleClass('sidenav--open');
}

var pid;
public.startVideo = function () {
const data = {
play: "true"
};

if (!navigator.mediaDevices) {
return;
}

const getMedia = (navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia || false);
jQuery.post('api/takeVideo.php', data).done(function (result) {
console.log('Start webcam',result);
pid=result.pid;
const getMedia = (navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia || false);

if (!getMedia) {
return;
}
if (!getMedia) {
console.log('No user media');
return;
}

if (config.previewCamFlipHorizontal) {
$('#video--view').addClass('flip-horizontal');
}
if (config.previewCamFlipHorizontal) {
$('#video--view').addClass('flip-horizontal');
}

getMedia.call(navigator.mediaDevices, webcamConstraints)
.then(function (stream) {
$('#video--view').show();
videoView.srcObject = stream;
public.stream = stream;
})
.catch(function (error) {
console.log('Could not get user media: ', error)
});
getMedia.call(navigator.mediaDevices, webcamConstraints)
.then(function (stream) {
console.log('Success getting user media')
$('#video--view').show();
videoView.srcObject = stream;
public.stream = stream;
})
.catch(function (error) {
console.log('Could not get user media: ', error)
});
}).fail(function (xhr, status, result) {
console.log('Could not start webcam',result)
});
}

public.stopVideo = function () {
public.stopVideoAndTakePic = function (data) {
if (public.stream) {
const track = public.stream.getTracks()[0];
track.stop();
$('#video--view').hide();
const dataVideo = {
play: "false",
pid: pid
};

jQuery.post('api/takeVideo.php', dataVideo).done(function (result) {
console.log('Stop webcam',result)
const track = public.stream.getTracks()[0];
track.stop();
$('#video--view').hide();
public.callTakePicApi(data);
}).fail(function (xhr, status, result) {
console.log('Could not stop webcam',result)
});
}
}

Expand Down Expand Up @@ -166,18 +189,9 @@ const photoBooth = (function () {
$('<p>').text(`${nextCollageNumber + 1} / ${config.collage_limit}`).appendTo('.cheese');
}

if (config.previewFromCam && config.previewCamTakesPic && !public.stream && !config.dev) {
console.log('No preview by device cam available!');

public.errorPic({
error: 'No preview by device cam available!'
});

} else {
setTimeout(() => {
public.takePic(photoStyle);
}, config.cheese_time);
}
setTimeout(() => {
public.takePic(photoStyle);
}, config.cheese_time);
}

// take Picture
Expand All @@ -186,26 +200,31 @@ const photoBooth = (function () {
console.log('Take Picture:' + photoStyle);
}

if (config.previewFromCam) {
if (config.previewCamTakesPic && !config.dev) {
videoSensor.width = videoView.videoWidth;
videoSensor.height = videoView.videoHeight;
videoSensor.getContext('2d').drawImage(videoView, 0, 0);
}
public.stopVideo();
}

const data = {
filter: imgFilter,
style: photoStyle,
canvasimg: videoSensor.toDataURL('image/jpeg'),
canvasimg: videoSensor.toDataURL('image/jpeg')
};

if (photoStyle === 'collage') {
data.file = currentCollageFile;
data.collageNumber = nextCollageNumber;
}

if (config.previewFromCam) {
if (config.previewCamTakesPic && !config.dev) {
videoSensor.width = videoView.videoWidth;
videoSensor.height = videoView.videoHeight;
videoSensor.getContext('2d').drawImage(videoView, 0, 0);
}
public.stopVideoAndTakePic(data);
}else {
public.callTakePicApi(data);
}
}

public.callTakePicApi =function (data) {
console.log(data);
jQuery.post('api/takePic.php', data).done(function (result) {
console.log('took picture', result);
$('.cheese').empty();
Expand Down Expand Up @@ -244,7 +263,7 @@ const photoBooth = (function () {
currentCollageFile = '';
nextCollageNumber = 0;

public.processPic(photoStyle, result);
public.processPic(data.photoStyle, result);

This comment has been minimized.

Sign in to view

Copy link
@andi34

andi34 Nov 17, 2020

data.style
}

}).fail(function (xhr, status, result) {
Expand Down

1 comment on commit 4b5ba4c

@andi34
Copy link

@andi34 andi34 commented on 4b5ba4c Nov 17, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey! I've done some adjustments on your code and merged it into my fork andi34#131

Please sign in to comment.