{"id":26354,"date":"2016-11-14T03:01:16","date_gmt":"2016-11-13T17:01:16","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=26354"},"modified":"2016-11-14T05:19:48","modified_gmt":"2016-11-13T19:19:48","slug":"html5-camera-api-audio-video-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-camera-api-audio-video-tutorial\/","title":{"rendered":"HTML5 Camera API Audio Video Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/camera_api.htm\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML5 Camera API Audio Video Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/camera_api_vai.jpg\" title=\"HTML5 Camera API Audio Video Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML5 Camera API Audio Video Tutorial<\/p><\/div>\n<p>Yesterday we started down the line of examining the Camera API in HTML5 with <a title='HTML5 Camera API Primer Tutorial' href='#hcapt'>HTML5 Camera API Primer Tutorial<\/a> as shown below.<\/p>\n<p>There we thought of the &#8220;Camera&#8221; being a camera of &#8220;Images&#8221;, but most modern smart phones or tablets have a Camera app that can capture &#8230;<\/p>\n<ul>\n<li>Video<\/li>\n<li>Audio<\/li>\n<li>Image<\/li>\n<\/ul>\n<p> &#8230; media sources.<\/p>\n<p>These two new media sources &#8220;Audio&#8221; and &#8220;Video&#8221; above need the intervention of a PHP server side emailer functionality in order to send out HTML emails with data URI &#8220;src=&#8221; HTML elements for these two types of media data.<\/p>\n<p>How do we work this for the user using this web application?  We allow the &#8220;media sources&#8221; above be part of an HTML &#8220;select&#8221; dropdown and separate the choices in the predominantly Javascript DOM &#8220;client feeling&#8221; code via the use of &#8220;document.URL&#8221; logic control (of Javascript DOM <a target=_blank title='Javascript DOM document.write method information from w3schools' href='http:\/\/www.w3schools.com\/jsref\/met_doc_write.asp'>document.write()<\/a> method) as per this &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n  if (document.URL.toLowerCase().indexOf('video') != -1) {<br \/>\n     \/\/ Video specific logic ... eg. ...<br \/>\n    document.write('&lt;input onclick=\"document.getElementById(' + \"'\" + 'aemail' + \"'\" + ').style.display=' + \"'\" + 'inline' + \"'\" + ';\" type=\"file\" id=\"take_photograph\" accept=\"video\/*\"&gt;');<br \/>\n  } else if (document.URL.toLowerCase().indexOf('audio') != -1) {<br \/>\n     \/\/ Audio specific logic ... eg. ...<br \/>\n    document.write('&lt;input onclick=\"document.getElementById(' + \"'\" + 'aemail' + \"'\" + ').style.display=' + \"'\" + 'inline' + \"'\" + ';\" type=\"file\" id=\"take_photograph\" accept=\"audio\/*\"&gt;');<br \/>\n  } else {<br \/>\n     \/\/ Image specific logic ... eg. ...<br \/>\n    document.write('&lt;input onclick=\"document.getElementById(' + \"'\" + 'aemail' + \"'\" + ').style.display=' + \"'\" + 'inline' + \"'\" + ';\" type=\"file\" id=\"take_photograph\" accept=\"image\/*\"&gt;');<br \/>\n  }<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; skeletal HTML code design approach.  This approach is only an easy thing to implement when it is driven in its logic by something that exists intact before the document.body <i>onload<\/i> event, that being <i>document.URL<\/i> that equates to the web browser address bar URL.<\/p>\n<p>So this led us to the HTML parent web application you could call <a target=_blank title='camera_api.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/camera_api.html-GETME'>camera_api.htm<\/a> that you can try with this <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/camera_api.htm'>live run<\/a> link, and that changed in <a target=_blank title='camera_api.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/camera_api.html-GETME'>this way<\/a> to be able to process those newly introduced Audio and Video media sources that get emailed via our new PHP server side emailer <a target=_blank title='camera_api.php' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/camera_api.php_GETME'>camera_api.php<\/a> but bear in mind that long running Audio and\/or Video media captures are not welcome.  Otherwise, please feel free to try out this web application working with your Camera app.<\/p>\n<hr>\n<p id='hcapt'>Previous relevant <a target=_blank title='HTML5 Camera API Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-camera-api-primer-tutorial\/'>HTML5 Camera API Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/camera_api.html\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"HTML5 Camera API Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/camera_api.jpg\" title=\"HTML5 Camera API Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">HTML5 Camera API Primer Tutorial<\/p><\/div>\n<p>Okay, so more HTML5 awaits, and we start down the track today with some research and development regarding the Camera API, and point you towards a few unbelievably great resources that have been put before us &#8230;<\/p>\n<ul>\n<li><a target=_blank title='camera-api' href='https:\/\/github.com\/robnyman\/robnyman.github.com\/tree\/master\/camera-api'>robnyman\/robnyman.github.com<\/a> &#8230; we got onto, via &#8230;<\/li>\n<li><a target=_blank title='camera-api' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Mozilla\/B2G_OS\/API\/Camera_API\/Introduction'>Camera API introduction<\/a> &#8230; via <a target=_blank title='camera-api' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/HTML\/HTML5'>HTML5 &#8211; Web developer guides | MDN<\/a> &#8230; and got helped with blob to data URI conversion ideas from <a target=_blank title='Convert Image to Data URI with JavaScript' href='https:\/\/davidwalsh.name\/convert-image-data-uri-javascript'>Convert Image to Data URI with JavaScript<\/a><\/li>\n<\/ul>\n<p> &#8230; and this led us to this proof of concept web application you could call <a target=_blank title='camera_api.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/camera_api.html_GETME'>camera_api.html<\/a> that you can try with this <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/camera_api.html'>live run<\/a> link.  The fly in the ointment, however, is browser and platform compatibility here.  The web application &#8230;<\/p>\n<ul>\n<li>asks the user for permission to use the camera to take photographs with the device&#8217;s camera &#8230; and\/or<\/li>\n<li>asks the user to point to a local (photograph) file &#8230; and then we &#8230;<\/li>\n<li>interface either of these photographic data source and funnel it through email (client) functionality, optionally<\/li>\n<\/ul>\n<p>Browser and platform wise, that first bit of functionality above is only supported, notionally, on Firefox and Google Chrome web browsers on Android, though we also found it worked on an (iOS) iPad.  Most browsers and platforms work with the latter two features above.<\/p>\n<p>So what are the Javascript syntax highlights of making the first two of the list above &#8230; ie. the Camera API (in HTML5) &#8230; to work.  You need &#8230;<\/p>\n<ul>\n<li>capturing the data via the device camera, <b>via<\/b><br \/>\n<code><br \/>\n&lt;input onclick=\"document.getElementById('aemail').style.display='inline';\" type=\"file\" id=\"take_photograph\" <b>accept=\"image\/*\"<\/b>&gt;<br \/>\n<\/code>\n<\/li>\n<li>use of as <a target=_blank title='createObjectURL' href='https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/URL\/createObjectURL'>createObjectURL<\/a> method <b>as per<\/b><br \/>\n<code><br \/>\nvar imgURL = window.URL.<b>createObjectURL<\/b>(file);<br \/>\n<\/code>\n<\/li>\n<li>or alternatively, the use of the <a target=_blank title='FileReader' href='https:\/\/developer.mozilla.org\/en\/docs\/Web\/API\/FileReader'>FileReader<\/a> object <b>as per<\/b><br \/>\n<code><br \/>\nvar fileReader = new <b>FileReader<\/b>();<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Try it out yourself to get this web application into context.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d26343' onclick='var dv=document.getElementById(\"d26343\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/camera\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26343' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d26354' onclick='var dv=document.getElementById(\"d26354\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26354' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday we started down the line of examining the Camera API in HTML5 with HTML5 Camera API Primer Tutorial as shown below. There we thought of the &#8220;Camera&#8221; being a camera of &#8220;Images&#8221;, but most modern smart phones or tablets &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-camera-api-audio-video-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,37],"tags":[76,88,113,2051,183,2050,1654,297,352,1840,576,578,652,870,932,997,1319,1369],"class_list":["post-26354","post","type-post","status-publish","format-standard","hentry","category-elearning","category-tutorials","tag-android","tag-api","tag-audio","tag-blob","tag-camera","tag-createobjecturl","tag-data-uri","tag-data-url","tag-document-write","tag-filereader","tag-html","tag-html5","tag-javascript","tag-onload","tag-php","tag-programming","tag-tutorial","tag-video"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26354"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=26354"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26354\/revisions"}],"predecessor-version":[{"id":26369,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/26354\/revisions\/26369"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=26354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=26354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=26354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}