{"id":15588602,"url":"https://github.com/brunoocasali/webcamjs-plus-rails","last_synced_at":"2025-04-24T05:20:59.615Z","repository":{"id":77548824,"uuid":"44945955","full_name":"brunoocasali/webcamjs-plus-rails","owner":"brunoocasali","description":"How to use https://github.com/jhuckaby/webcamjs with Rails and Carrierwave?","archived":false,"fork":false,"pushed_at":"2015-10-26T23:58:11.000Z","size":227,"stargazers_count":12,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-18T20:05:03.029Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brunoocasali.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-10-26T04:27:58.000Z","updated_at":"2019-12-22T18:48:27.000Z","dependencies_parsed_at":"2023-03-12T00:57:15.220Z","dependency_job_id":null,"html_url":"https://github.com/brunoocasali/webcamjs-plus-rails","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunoocasali%2Fwebcamjs-plus-rails","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunoocasali%2Fwebcamjs-plus-rails/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunoocasali%2Fwebcamjs-plus-rails/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunoocasali%2Fwebcamjs-plus-rails/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brunoocasali","download_url":"https://codeload.github.com/brunoocasali/webcamjs-plus-rails/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250567645,"owners_count":21451468,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T22:40:50.049Z","updated_at":"2025-04-24T05:20:59.596Z","avatar_url":"https://github.com/brunoocasali.png","language":"Ruby","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Webcam.js + Rails + Carrierwave\n\nWebcam.js: https://github.com/jhuckaby/webcamjs  \nRails: https://github.com/rails/rails  \nCarrierwave: https://github.com/carrierwaveuploader/carrierwave\n\n**To get working with Rails and Webcam use:**\n\n### 1°:\n\n- Generate a new rails app. `$ rails g new YOUR-APP-NAME`\n- Enter in this directory. `$ cd YOUR-APP-NAME/`\n\n### 2°:\n\n- Open https://github.com/jhuckaby/webcamjs and download as zip (or clone).\n- Copy the `webcam.min.js` and `webcam.swf` to `vendor/assets/javascripts`.\n\n### 3°:\n- Open `assets.rb` and add this line: `Rails.application.config.assets.precompile += %w( webcam.swf )`\n- Open `app/assets/javascripts/application.js` and add: `//= require webcam.min` between the turbolinks and . like this:\n\n  ```js\n  //= require turbolinks \n  //= require webcam.min\n  //= require_tree .\n  ```\n\n### 4°:\n\nAdd to your Gemfile this gem (I've removed all unused gems from this app): \n \n```rb\ngem 'carrierwave' \ngem 'carrierwave-base64' \ngem 'rmagick' # have any error? see this link: http://stackoverflow.com/a/5207041\n```\n\nAnd them bundle:\n\n`$ bundle install`\n\n### 5°:\n- Generate a new uploader: `$ rails g uploader ProductImage`\n- Generate a simple scaffold: `$ rails g scaffold product name image`\n- Open `config/routes.rb` and set the root url: `root 'products#index'`\n\n### 6°:\n- Create a new file inside `app/assets/javascripts` called `cam.js` with this content:\n```js\nfunction take_snapshot(){\n    Webcam.snap(function(data_uri) {\n        id = $('[id*=\"_image\"]');\n\n        if (id.length) {\n            id.val(data_uri);\n        }\n\n        document.getElementById('results').innerHTML = '\u003cimg src=\"' + data_uri + '\"/\u003e';\n    });\n}\n$(document).ready(function() {\n    if ($(\"#my_camera\").length) {\n        Webcam.set({\n            width: 320,\n            height: 240,\n            image_format: 'jpeg',\n            jpeg_quality: 90\n        });\n\n        Webcam.attach('#my_camera');\n    }\n});\n```\n- Now you have to add the calling inside the view:\n```erb\n\u003c%= form_for(@product) do |f| %\u003e\n  \u003cdiv id=\"my_camera\"\u003e\u003c/div\u003e\n\n  \u003cinput type=button value=\"Take Snapshot\" onClick=\"take_snapshot()\"\u003e\n\n  \u003cdiv class=\"field\"\u003e\n    \u003c%= f.hidden_field :image %\u003e\n    \u003c%= f.label :image %\u003e: \u003cbr /\u003e\n    \u003cdiv id=\"results\"\u003eYour captured image will appear here...\u003c/div\u003e\n  \u003c/div\u003e\n\n  ...\n  \u003c!-- Other fields and submit button --\u003e\n\u003c% end %\u003e\n```\n- Inside your model add the uploader:\n```rb\nclass Product \u003c ActiveRecord::Base\n  mount_base64_uploader :image, ProductImageUploader\nend\n```\n\nAny problem, please add a new [Issue](https://github.com/brunoocasali/webcamjs-plus-rails/issues).   \nDudes? See the source code.  \n**That is it! just use your rails application with a webcam in it!**  \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunoocasali%2Fwebcamjs-plus-rails","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrunoocasali%2Fwebcamjs-plus-rails","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunoocasali%2Fwebcamjs-plus-rails/lists"}