RyanMinor Posted October 29, 2011 Share Posted October 29, 2011 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.