{"id":4070,"date":"2014-11-29T02:07:58","date_gmt":"2014-11-29T02:07:58","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=4070"},"modified":"2018-05-31T15:33:33","modified_gmt":"2018-05-31T19:33:33","slug":"access-camera-and-audio-recorder-of-mobile-device-in-visualforce-and-upload-as-chatter-file","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/access-camera-and-audio-recorder-of-mobile-device-in-visualforce-and-upload-as-chatter-file\/","title":{"rendered":"Access Camera and Audio recorder of Mobile device in Visualforce and upload as chatter file"},"content":{"rendered":"

In this article we will see how to use Camera and Audio recorder of mobile device in Visualforce and upload as chatter file. It may look that it is very tricky to access device camera and audio control in Visualforce however you may be right if there were no HTML5. Thanks to HTML5 for magic.<\/p>\n

\"Visualforce<\/a>
Visualforce Camera Access – Front Page<\/figcaption><\/figure>\n
\"Visualforce<\/a>
Visualforce Camera Access – Use Camera Prompt<\/figcaption><\/figure>\n

<\/p>\n

\"Visualforce<\/a>
Visualforce Camera Access – Camera Mode<\/figcaption><\/figure>\n
\"Visualforce<\/a>
Visualforce Camera Access – Recently clicked image selected<\/figcaption><\/figure>\n
\"Visualforce<\/a>
Visualforce Camera Access – Redirected to Chatter File<\/figcaption><\/figure>\n

All we have to do is to use “accept” attribute of “apex:inputfile”. accept=”image\/*;capture=camera” will inform device that current application (in our case Salesforce1) needs to access Camera of device.<\/p>\n

\/\/To take snap from Camera
\naccept=”image\/*;capture=camera”<\/p>\n

\/\/To record Video
\naccept=”video\/*;capture=camcorder”<\/p>\n

\/\/To record Audio
\naccept=”audio\/*;capture=microphone”<\/p>\n

Note : Safari \/ Iphone does not support microphone recording<\/strong><\/p><\/blockquote>\n

Apex Controller :<\/strong><\/p>\n

\r\n\/**\r\n * Created By   :   Jitendra Zaa\r\n * Date         :   28 Nov 2014\r\n * Description  :   Demo of accessing Camera using Visualforce and uploading file in Chatter.\r\n *              :   Article on https:\/\/jitendrazaa.com\r\n * *\/\r\npublic class CameraAccess{\r\n    public ContentVersion cont {get;set;}\r\n\r\n    public CameraAccess() {\r\n        cont = new ContentVersion();\r\n    }      \r\n\r\n    public PageReference saveFile()\r\n    {\r\n        \/\/PathOnClient is Mandatory\r\n        cont.PathOnClient = cont.title;\r\n\r\n        \/\/By default Origin value is "C" that means Content must be enabled in Org, so we need to explicitly set Origin as H\r\n        cont.Origin = 'H';\r\n        insert cont;\r\n\r\n        \/\/redirect to path where file is saved\r\n        return new PageReference('\/'+cont.id);\r\n    }\r\n}\r\n<\/pre>\n
Visualforce Page :<\/strong><\/p>\n
\r\n<apex:page controller="CameraAccess" standardStylesheets="false" showHeader="false">\r\n\r\n <apex:stylesheet value="{!URLFOR($Resource.BootStrap3, '\/bootstrap-3.1.1-dist\/css\/bootstrap.css')}" \/>\r\n <div class="container">\r\n    <div class="row clearfix">\r\n        <div class="col-md-12 column">\r\n            <div class="jumbotron">\r\n                <h1> Camera Access in Visualforce using HTML 5 <\/h1>\r\n                <a href="https:\/\/jitendrazaa.com">https:\/\/jitendrazaa.com<\/a>\r\n            <\/div>\r\n            <div class="panel panel-warning">\r\n                <div class="panel-heading">\r\n                    <apex:form>\r\n                     <p>\r\n                        <apex:inputFile value="{!cont.VersionData}"  accept="image\/*;capture=camera" filename="{!cont.Title}" \/>\r\n                     <\/p>\r\n\r\n                     <p>\r\n                        <apex:commandButton StyleClass="btn btn-danger" action="{!saveFile}" value="Save File" \/>\r\n                     <\/p>\r\n                    <\/apex:form>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<\/apex:page>\r\n<\/pre>\n
This <\/a>is very good article by Eric <\/a>on html5rocks.com which covers this topic in very detail.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this article we will see how to use Camera and Audio recorder of mobile device in Visualforce and upload as chatter file. It may look that it is very tricky to access device camera and audio control in Visualforce however you may be right if there were no HTML5. Thanks to HTML5 for magic.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[26,9],"tags":[337,56,114,331,175,336],"class_list":["post-4070","post","type-post","status-publish","format-standard","hentry","category-web","category-salesforce","tag-apex","tag-chatter-files","tag-html-5","tag-salesforce","tag-salesforce-1","tag-visualforce"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4618,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/most-frequently-used-code-snippets-for-salesforce-developers-faq-part-21\/","url_meta":{"origin":4070,"position":0},"title":"Salesforce Developers interview questions – Most commonly used code snippets – part 21","author":"Jitendra","date":"July 7, 2015","format":false,"excerpt":"Salesforce interview questions - Most frequently used Apex and visualforce code used by Salesforce developers like \"How to query and abort scheduled job using Apex\", \"Defining VF page as HTML5\", \"Visualforce page as JSON\" , \"Handling colon in element Id for Jquery\" , \"Chatter using Apex\" and many more.","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4107,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-drag-and-drop-file-uploader-component-with-progress-bar-html5-and-pure-javascript-based\/","url_meta":{"origin":4070,"position":1},"title":"Salesforce – Drag and Drop File Uploader Component with Progress Bar – HTML5 and Pure Javascript Based","author":"Jitendra","date":"December 19, 2014","format":false,"excerpt":"You may find many ways to upload attachments in Salesforce using\u00a0visualforce\u00a0however most of them uses some Javascript libraries (means either you need to depend on static resources or add CDN in remote site settings) or they do not have progress bar or they are not drag and drop. I thought\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"HTML5 Drag And Drop File","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/12\/HTML5-Drag-And-Drop-File-1024x205.jpg?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/12\/HTML5-Drag-And-Drop-File-1024x205.jpg?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/12\/HTML5-Drag-And-Drop-File-1024x205.jpg?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":4709,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/using-curl-with-salesforce-rest-api\/","url_meta":{"origin":4070,"position":2},"title":"using cURL with Salesforce Rest API","author":"Jitendra","date":"July 16, 2015","format":false,"excerpt":"Workbench is one of widely used tool in Salesforce when it comes to exploring REST API of Salesforce. However\u00a0I wanted to export REST API response\u00a0in Binary format and therefore used cURL. cURL is open source command line library mostly used to test\u00a0http request. It can be downloaded from here\u00a0and official\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce visualforce security check using cURL","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Salesforce-visualforce-security-check-using-cURL.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Salesforce-visualforce-security-check-using-cURL.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Salesforce-visualforce-security-check-using-cURL.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Salesforce-visualforce-security-check-using-cURL.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":4667,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/barcode-decoder-in-salesforce1-very-fast-and-simple\/","url_meta":{"origin":4070,"position":3},"title":"Javascript based Barcode decoder in Salesforce1 – Very fast and Simple","author":"Jitendra","date":"July 10, 2015","format":false,"excerpt":"Very fast and Simple Barcode decoder in Salesforce1 using quaggaJS javascript library","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Barcode decoder sample in Salesforce 1","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/download-1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/download-1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/download-1.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":4807,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-to-salesforce-integration-using-canvas\/","url_meta":{"origin":4070,"position":4},"title":"Salesforce to Salesforce integration using Canvas","author":"Jitendra","date":"September 14, 2015","format":false,"excerpt":"After writing this article Salesforce has enabled CSP (Content Security Policy) which restricts adding Salesforce in iFrame. We can add MyDomain URL as CSP whitelisting and it works only if user already logged into other Salesforce instance. However, if user is not logged into other instance , internally OAuth navigates\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Force.com Canvas Application Demo with Complete Source code","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/09\/Force.com-Canvas-Application-Demo-with-Complete-Source-code.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/09\/Force.com-Canvas-Application-Demo-with-Complete-Source-code.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/09\/Force.com-Canvas-Application-Demo-with-Complete-Source-code.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":2649,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/get-dom-elementid-of-the-visualforce-components\/","url_meta":{"origin":4070,"position":5},"title":"Get DOM ElementID of the Visualforce components","author":"Jitendra","date":"January 19, 2012","format":false,"excerpt":"How to get the DOM ElementID of the Visualforce components in Salesforce","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4070","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=4070"}],"version-history":[{"count":7,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4070\/revisions"}],"predecessor-version":[{"id":6479,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4070\/revisions\/6479"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=4070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=4070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=4070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}