Jump to content

PhotoBooth Help

RyanMinor

By RyanMinor
in Third Party Scripts

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('[email protected]', '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

Archived

This topic is now archived and is closed to further replies.

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.