Webcam.js: https://github.com/jhuckaby/webcamjs Rails: https://github.com/rails/rails Carrierwave: https://github.com/carrierwaveuploader/carrierwave
To get working with Rails and Webcam use:
$ rails g new YOUR-APP-NAME
$ cd YOUR-APP-NAME/
webcam.min.js
and webcam.swf
to vendor/assets/javascripts
.Open assets.rb
and add this line: Rails.application.config.assets.precompile += %w( webcam.swf )
Open app/assets/javascripts/application.js
and add: //= require webcam.min
between the turbolinks and . like this:
//= require turbolinks
//= require webcam.min
//= require_tree .
Add to your Gemfile this gem (I've removed all unused gems from this app):
gem 'carrierwave'
gem 'carrierwave-base64'
gem 'rmagick' # have any error? see this link: http://stackoverflow.com/a/5207041
And them bundle:
$ bundle install
$ rails g uploader ProductImage
$ rails g scaffold product name image
config/routes.rb
and set the root url: root 'products#index'
app/assets/javascripts
called cam.js
with this content:function take_snapshot(){
Webcam.snap(function(data_uri) {
id = $('[id*="_image"]');
if (id.length) {
id.val(data_uri);
}
document.getElementById('results').innerHTML = '<img src="' + data_uri + '"/>';
});
}
$(document).ready(function() {
if ($("#my_camera").length) {
Webcam.set({
width: 320,
height: 240,
image_format: 'jpeg',
jpeg_quality: 90
});
Webcam.attach('#my_camera');
}
});
<%= form_for(@product) do |f| %>
<div id="my_camera"></div>
<input type=button value="Take Snapshot" onClick="take_snapshot()">
<div class="field">
<%= f.hidden_field :image %>
<%= f.label :image %>: <br />
<div id="results">Your captured image will appear here...</div>
</div>
...
<!-- Other fields and submit button -->
<% end %>
class Product < ActiveRecord::Base
mount_base64_uploader :image, ProductImageUploader
end
Any problem, please add a new Issue. Dudes? See the source code. That is it! just use your rails application with a webcam in it!