Jump to content

PhotoBooth Help

RyanMinor

By RyanMinor
in Third Party Scripts

 Share

Recommended Posts

RyanMinor Member

RyanMinor

Posted
Posted

I'm building a PhotoBooth application using CodeIgniter 2.0.3. I am having some problems figuring out how to send my data when someone posts their image and message to my controller with the JavaScript file that I am using. Basically I want to send the form input data along with the image snapped by the webcam to my events/post controller. Any help in doing this is greatly appreciated as I am stuck on this and have been for a few days now.

 

Here is my JS file:

$(document).ready(function(){

var camera = $('#camera'), 
	photos = $('#photos'), 
	screen =  $('#screen');

// I will need to specify the post picture path here.
var template = '<a href="uploads/original/{src}" rel="cam" ' + 'style="background-image:url(uploads/thumbs/{src})"></a>';


/**********************************************************************
 * Setup Webcam
 **********************************************************************/

webcam.set_swf_url('../../assets/webcam/webcam.swf');
webcam.set_api_url('/events/post');
webcam.set_quality(80);
webcam.set_shutter_sound(true, '../../assets/webcam/shutter.mp3');

screen.html(webcam.get_html(screen.width(), screen.height()));


/**********************************************************************
 * Binding Event Listeners
 **********************************************************************/	

var shootEnabled = false;

$('#shootButton').click(function(){
	if(!shootEnabled){
		return false;
	}
	webcam.freeze();
	togglePane();
	return false;
});

$('#cancelButton').click(function(){
	webcam.reset();
	togglePane();
	return false;
});

$('#uploadButton').click(function(){
	webcam.upload();
	webcam.reset();
	togglePane();
	return false;
});

camera.find('.settings').click(function(){
	if(!shootEnabled){
		return false;
	}
	webcam.configure('camera');
});


/**********************************************************************
 * Showing and Hiding Camera Panel
 **********************************************************************/

var shown = false;
$('.camTop').click(function(){

	$('.tooltip').fadeOut('fast');

	if(shown){
		camera.animate({
			bottom:-466
		});
	} else {
		camera.animate({
			bottom:-5
		}, 
		{
			easing:'easeOutExpo',
			duration:'slow'
		});
	}
	shown = !shown;
});

$('.tooltip').mouseenter(function(){
	$(this).fadeOut('fast');
});


/**********************************************************************
 * Callbacks
 **********************************************************************/

webcam.set_hook('onLoad',function(){
	// when the flash loads, enable the shoot and settings buttons
	shootEnabled = true;
});

webcam.set_hook('onComplete', function(msg){
	// this response is returned by upload.php and it holds the name of the image in a JSON object format
	msg = $.parseJSON(msg);
	if(msg.error){
		alert(msg.message);
	} else {
		// adding it to the page
		photos.prepend(templateReplace(template,{src:msg.filename}));
		initFancyBox();
	}
});

webcam.set_hook('onError',function(e){
	screen.html(e);
});


/**********************************************************************
 * Populate the Page with Images
 **********************************************************************/

var start = '';

function loadPics(){
	// This is true when loadPics is called as an event handler for the LoadMore button
	if(this != window){
		if($(this).html() == 'Loading..'){
			// Preventing more than one click
			return false;
		}
		$(this).html('Loading..');
	}
	// Issuing an AJAX request. The start parameter is either empty or holds the name of the first image to be displayed. Useful for pagination.		
	$.getJSON('browse.php',{'start':start},function(r){
		photos.find('a').show();
		var loadMore = $('#loadMore').detach();
		if(!loadMore.length){
			loadMore = $('<span>',{
				id			: 'loadMore',
				html		: 'Load More',
				click		: loadPics
			});
		}
		$.each(r.files,function(i,filename){
			photos.append(templateReplace(template,{src:filename}));
		});
		// If there is a next page with images.
		if(r.nextStart) {
			// r.nextStart holds the name of the image that comes after the last one shown currently.
			start = r.nextStart;
			photos.find('a:last').hide();
			photos.append(loadMore.html('Load More'));
		}
		// We have to re-initialize fancybox every time we add new photos to the page.
		initFancyBox();
	});
	return false;
}
// Automatically calling loadPics to populate the page onload.
loadPics();


/**********************************************************************
 * Helper Functions
 **********************************************************************/

// This function initializes the fancybox lightbox script.
function initFancyBox(filename){
	photos.find('a:visible').fancybox({
		'transitionIn'	: 'elastic',
		'transitionOut'	: 'elastic',
		'overlayColor'	: '#111'
	});
}

// This function toggles the two .buttonPane divs into visibility.
function togglePane(){
	var visible = $('#camera .buttonPane:visible:first');
	var hidden = $('#camera .buttonPane:hidden:first');		
	visible.fadeOut('fast',function(){
		hidden.show();
	});
}

// Helper function for replacing "{KEYWORD}" with the respectful values of an object.
function templateReplace(template,data){
	return template.replace(/{([^}]+)}/g,function(match,group){
		return data[group.toLowerCase()];
	});
}

});

 

Here is my webcam file:

// Everything is under a 'webcam' Namespace
window.webcam = {
version: '1.0.9',

// globals
ie: !!navigator.userAgent.match(/MSIE/),
protocol: location.protocol.match(/https/i) ? 'https' : 'http',
callback: null, // user callback for completed uploads
swf_url: 'webcam.swf', // URI to webcam.swf movie (defaults to cwd)
shutter_url: 'shutter.mp3', // URI to shutter.mp3 sound
api_url: '/events/upload', // URL to upload script
loaded: false, // true when webcam movie finishes loading
quality: 90, // JPEG quality (1 - 100)
shutter_sound: true, // shutter sound effect on/off
stealth: false, // stealth mode (do not freeze image upon capture)
hooks: {
	onLoad: null,
	onComplete: null,
	onError: null
}, // callback hook functions

set_hook: function(name, callback) {
	// set callback hook
	// supported hooks: onLoad, onComplete, onError
	if (typeof(this.hooks[name]) == 'undefined')
		return alert("Hook type not supported: " + name);

	this.hooks[name] = callback;
},

fire_hook: function(name, value) {
	// fire hook callback, passing optional value to it
	if (this.hooks[name]) {
		if (typeof(this.hooks[name]) == 'function') {
			// callback is function reference, call directly
			this.hooks[name](value);
		}
		else if (typeof(this.hooks[name]) == 'array') {
			// callback is PHP-style object instance method
			this.hooks[name][0][this.hooks[name][1]](value);
		}
		else if (window[this.hooks[name]]) {
			// callback is global function name
			window[ this.hooks[name] ](value);
		}
		return true;
	}
	return false; // no hook defined
},

set_api_url: function(url) {
	// set location of upload API script
	this.api_url = url;
},

set_swf_url: function(url) {
	// set location of SWF movie (defaults to webcam.swf in cwd)
	this.swf_url = url;
},

get_html: function(width, height, server_width, server_height) {
	// Return HTML for embedding webcam capture movie
	// Specify pixel width and height (640x480, 320x240, etc.)
	// Server width and height are optional, and default to movie width/height
	if (!server_width) server_width = width;
	if (!server_height) server_height = height;

	var html = '';
	var flashvars = 'shutter_enabled=' + (this.shutter_sound ? 1 : 0) + 
		'&shutter_url=' + escape(this.shutter_url) + 
		'&width=' + width + 
		'&height=' + height + 
		'&server_width=' + server_width + 
		'&server_height=' + server_height;

	if (this.ie) {
		html += '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="'+this.protocol+'://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="'+width+'" height="'+height+'" id="webcam_movie" align="middle"><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="'+this.swf_url+'" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="'+flashvars+'"/></object>';
	}
	else {
		html += '<embed id="webcam_movie" src="'+this.swf_url+'" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="'+width+'" height="'+height+'" name="webcam_movie" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="'+flashvars+'" />';
	}

	this.loaded = false;
	return html;
},

get_movie: function() {
	// get reference to movie object/embed in DOM
	if (!this.loaded) return alert("ERROR: Movie is not loaded yet");
	var movie = document.getElementById('webcam_movie');
	if (!movie) alert("ERROR: Cannot locate movie 'webcam_movie' in DOM");
	return movie;
},

set_stealth: function(stealth) {
	// set or disable stealth mode
	this.stealth = stealth;
},

snap: function(url, callback, stealth) {
	// take snapshot and send to server
	// specify fully-qualified URL to server API script
	// and callback function (string or function object)
	if (callback) this.set_hook('onComplete', callback);
	if (url) this.set_api_url(url);
	if (typeof(stealth) != 'undefined') this.set_stealth( stealth );

	this.get_movie()._snap( this.api_url, this.quality, this.shutter_sound ? 1 : 0, this.stealth ? 1 : 0 );
},

freeze: function() {
	// freeze webcam image (capture but do not upload)
	this.get_movie()._snap('', this.quality, this.shutter_sound ? 1 : 0, 0 );
},

upload: function(url, callback) {
	// upload image to server after taking snapshot
	// specify fully-qualified URL to server API script
	// and callback function (string or function object)
	if (callback) this.set_hook('onComplete', callback);
	if (url) this.set_api_url(url);

	this.get_movie()._upload( this.api_url );
},

reset: function() {
	// reset movie after taking snapshot
	this.get_movie()._reset();
},

configure: function(panel) {
	// open flash configuration panel -- specify tab name:
	// "camera", "privacy", "default", "localStorage", "microphone", "settingsManager"
	if (!panel) panel = "camera";
	this.get_movie()._configure(panel);
},

set_quality: function(new_quality) {
	// set the JPEG quality (1 - 100)
	// default is 90
	this.quality = new_quality;
},

set_shutter_sound: function(enabled, url) {
	// enable or disable the shutter sound effect
	// defaults to enabled
	this.shutter_sound = enabled;
	this.shutter_url = url ? url : 'shutter.mp3';
},

flash_notify: function(type, msg) {
	// receive notification from flash about event
	switch (type) {
		case 'flashLoadComplete':
			// movie loaded successfully
			this.loaded = true;
			this.fire_hook('onLoad');
			break;

		case 'error':
			// HTTP POST error most likely
			if (!this.fire_hook('onError', msg)) {
				alert("JPEGCam Flash Error: " + msg);
			}
			break;

		case 'success':
			// upload complete, execute user callback function
			// and pass raw API script results to function
			this.fire_hook('onComplete', msg.toString());
			break;

		default:
			// catch-all, just in case
			alert("jpegcam flash_notify: " + type + ": " + msg);
			break;
	}
}
};

 

Here is the function that does the work from my controller:

/** 
* This function displays the post form to allow a user to post to an event
*/
public function post($event_id) {
$this->load->model('Events_model');
$data['pageInfo'] = $this->Global_model->pageInfo($this->_page);
$this->load->library(array('form_validation', 'email'));

if($this->input->post('post')) {
	// set form validation rules
	$this->form_validation->set_rules('postEmail', 'Email Address', 'trim|required|valid_email');
	$this->form_validation->set_rules('postName', 'Name', 'trim|required');
	$this->form_validation->set_rules('postImage', 'Image', 'trim|required');
	$this->form_validation->set_rules('postMessage', 'Message', 'trim|required');
	// run form validations
	if($this->form_validation->run() == FALSE) {

	} else {
		// assign post data to variables
		$email = $this->input->post('postEmail');
		$name = $this->input->post('postName');
		$image = $this->input->post('postImage');
		$message = $this->input->post('postMessage');
		$event_id = $this->input->post('postEventId');

		// upload the image to the post_images folder
		if ($this->Events_model->upload($image)) {

			// if the upload was successful insert it into the database
			if ($this->Events_model->post($email, $name, $image, $message, $event_id)) {
				// get event admin's email address
				// send email to event admin notifying them that they have a new post
				$toEmail = $this->input->post('');
				$body = "";
				$this->email->from('no-reply@ebooth.com', 'eBooth, LLC');
				$this->email->to($toEmail);
				$this->email->cc('');
				$this->email->subject('New eBooth Post');
				$this->email->message($body);
				$this->email->send();
				$data['postSuccess'] = TRUE;
			} else {
				$data['postSuccess'] = FALSE;
			}

		} // can display error here
	}
}

$this->load->view('post_view', $data);
}

 

Here are the post and upload functions from my model (I may need to tweak them a bit):

public function post($event_id, $email, $name, $image, $message) {
// upload the image
$query = "INSERT INTO post 
			(post_email, post_name, post_image, post_message, post_event_id)
	VALUES 
		(?, ?, ?, ?, ?)";
$this->db->query($query, array($email, $name, $image, $message, $event_id));
}

public function upload() {
$config['upload_path'] = realpath(APPPATH . '../post_images/');
$config['allowed_types'] = 'gif|jpg|jpeg|png';
$config['max_width']  = '500';

$this->load->library('upload', $config);

if (!$this->upload->do_upload('post_image')) {
	$error = array('error' => $this->upload->display_errors());
} else {
	$data = array('upload_data' => $this->upload->data());
}
}

 

Here is the tutorial I am following to make this happen: http://tutorialzine.com/2011/04/jquery-webcam-photobooth/. Thanks in advance!

Link to comment
https://forums.phpfreaks.com/topic/250057-photobooth-help/
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.