couz74
commented
4 years ago Hi, After multiples test I got this working:
In core.js
var pid;
public.startVideo = function () {
const data = {
play: "true"
};
if (!navigator.mediaDevices) {
return;
}
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) {
console.log('No user media');
return;
}`
if (config.previewCamFlipHorizontal) {
$('#video--view').addClass('flip-horizontal');
}
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.stopVideoAndTakePic = function (data) {
if (public.stream) {
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)
});
}
}
// take Picture
public.takePic = function (photoStyle) {
if (config.dev) {
console.log('Take Picture:' + photoStyle);
}
const data = {
filter: imgFilter,
style: photoStyle,
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();
if (config.previewCamFlipHorizontal) {
$('#video--view').removeClass('flip-horizontal');
}
// reset filter (selection) after picture was taken
imgFilter = config.default_imagefilter;
$('#mySidenav .activeSidenavBtn').removeClass('activeSidenavBtn');
$('#' + imgFilter).addClass('activeSidenavBtn');
if (result.error) {
public.errorPic(result);
} else if (result.success === 'collage' && (result.current + 1) < result.limit) {
currentCollageFile = result.file;
nextCollageNumber = result.current + 1;
$('.spinner').hide();
$('.loading').empty();
$('#video--sensor').hide();
if (config.continuous_collage) {
setTimeout(() => {
public.thrill('collage');
}, 1000);
} else {
$('<a class="btn" href="#">' + L10N.nextPhoto + '</a>').appendTo('.loading').click((ev) => {
ev.preventDefault();
public.thrill('collage');
});
$('.loading').append($('<a class="btn" style="margin-left:2px" href="./">').text(L10N.abort));
}
} else {
currentCollageFile = '';
nextCollageNumber = 0;
public.processPic(data.photoStyle, result);
}
}).fail(function (xhr, status, result) {
public.errorPic(result);
});
} in takeVideo.php
<?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);
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']
]));
}For it to work on startup I had to edit /etc/rc.local:
modprobe v4l2loopback exclusive_caps=1 card_label="GPhoto2 Webcam"
rmmod bcm2835-isp
rmmod bcm2835-isp was needed as chromium was taking this device instead of the V4l2 one.
How it work
We use v4l2loopback to create a virtual device and gphoto2 --stdout --capture-movie | ffmpeg -i - -vcodec rawvideo -pix_fmt yuv420p -threads 0 -f v4l2 /dev/video0 to send the photo preview to it.
On "take pic" button we start the process and end to before the picture is taken to free gphoto2.
It is a ugly draft, I hope I will improve it and post the update here.
andi34
florianmueller
Is your feature request related to a problem? Please describe. First, thank you so much for this project, it is the best photo booth project out there, I tried a lot. I am missing a preview for people in front of the photo box before or while the image is taken. I know you can utilize device cams, but I would only have the DSLR live preview feed available.
Describe the solution you'd like A way to pipe out the cameras gphoto2 --capture-movie stream directly into the webinterface background.
Describe alternatives you've considered I tried setup a seperate http stream on port 8080 and use it in the user interface settings as background URL, but it does not work. It seems chromium has problems with disyplaing mjpeg streams directly as a background.
Additional context Thank you very much for any suggestion and help you could provide me on that topic.