Webcam picture straight to file attachment

Question

So I have a form, and in this form a user can upload a picture. As an alternative, I want them to be able to take a picture and upload that instead.

---

Now I figure

Answer 1

I'd used this: http://www.xarg.org/project/jquery-webcam-plugin/ in my rails application for capturing an image from a webcam. You can download this jQuery-webcam here: https://github.com/infusion/jQuery-webcam

Here is a roughly done implementation, sorry for the messy code:

class PicturesController < ApplicationController
  require 'base64'
    def capture
      # do something
      render :layout => "webcam"
    end

    def save_image
      image = params[:capture][:image]
      File.open("#{Rails.root}/public/path_you_want_to_image/image_name.png", 'wb') do |f|
        f.write(Base64.decode64(image))
      end
      # Or use paperclip to save image for a model instead!!
    end
end

views/layouts/webcam.html.erb:

  
  <%= stylesheet_link_tag :all %>
  <%= javascript_include_tag :defaults %>
  <%= javascript_include_tag "http://www.google-analytics.com/ga.js"%>
  <%= javascript_include_tag "http://code.jquery.com/jquery-1.4.2.min.js"%>
  <%= javascript_include_tag "jquery.webcam"%>
  
  <%= csrf_meta_tag %>

 
  <%= yield %>

views/pictures/capture.html.erb:

  

   
Capture image here!
  

  <%= form_for(save_image_pictures_path, :method => "post", :remote => true) do |f|%>
    <%= hidden_field(:item, :sku)%>
    

    <%= submit_tag "Capture Image", :onClick=>"javascript:capture_image();"%>  
  <% end %>     
  <%= link_to "Back", root_path %>
   

     
   

Just make sure that, "jscam.swf" file referenced in jquery.webcam.js is loaded on page properly.

routes you can define in your routes.rb are:

resources :pictures do
  collection do 
    get 'capture'
    post 'save_image'
  end
end

From here, you can then use this: https://github.com/blueimp/jQuery-File-Upload for uploading it using an Ajax form submission!!

Do let me know if you have any questions.