{"id":28751,"date":"2017-03-10T03:01:44","date_gmt":"2017-03-09T17:01:44","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=28751"},"modified":"2017-03-10T05:54:02","modified_gmt":"2017-03-09T19:54:02","slug":"audiovideo-html5-form-input-capture-via-php-download-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/audiovideo-html5-form-input-capture-via-php-download-tutorial\/","title":{"rendered":"Audio\/Video HTML5 Form Input Capture via PHP Download Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Audio\/Video HTML5 Form Input Capture via PHP Download Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio_more.jpg\" title=\"Audio\/Video HTML5 Form Input Capture via PHP Download Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Audio\/Video HTML5 Form Input Capture via PHP Download Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Audio\/Video HTML5 Form Input Capture via PHP Email Tutorial' href='#avhficvpet'>Audio\/Video HTML5 Form Input Capture via PHP Email Tutorial<\/a> added an email attachment mode of sharing the media you upload, so that modes of display, as of yesterday were &#8230;<\/p>\n<ul>\n<li>links to the uploaded media display<\/li>\n<li>email attachments of the uploaded email<\/li>\n<\/ul>\n<p> &#8230; and today we add to those modes of sharing or modes of display, with &#8230;<\/p>\n<ul>\n<li>allowing the (relevant) HTML <i>video<\/i> and\/or <i>audio<\/i> elements, with the <i>control<\/i> parameter set and parameter <i>type<\/i> set to the <a target=_blank title='MIME information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/MIME'>mime type<\/a> (as mentioned above), be the display mechanism for the uploaded media<\/li>\n<li>display the uploaded media into an HTML iframe element &#8230; via <b>PHP<\/b> (where $ourmime is uploaded media&#8217;s mime type and $_GET[&#8216;mediafile&#8217;] is the name of upload media on the web server and $_GET[&#8216;download&#8217;]) existence flags a download scenario) &#8230;<br \/>\n<code><br \/>\nif (isset($_GET['mediafile'])) {<br \/>\n if (strpos(urldecode($_GET['mediafile']),\".\") !== false) {<br \/>\n  $parts=explode(\".\",urldecode($_GET['mediafile']));<br \/>\n  $uparts=explode(\"\/\",urldecode($_GET['mediafile']));<br \/>\n  for ($it=0; $it&lt;sizeof($exts); $it++) {<br \/>\n    if (\".\" . $parts[-1 + sizeof($parts)] == $exts[$it]) $ourmime=$exts[$it];<br \/>\n  }<br \/>\n  <b>header('Content-Type: ' . $ourmime);<\/b><br \/>\n  if (isset($_GET['download'])) {<br \/>\n    header('Content-Disposition: attachment; filename=\"' . $uparts[-1 + sizeof($uparts)] . '\"');<br \/>\n  } else {<br \/>\n    <b>header('Content-Disposition: inline');<\/b><br \/>\n  }<br \/>\n  <b>echo file_get_contents(urldecode($_GET['mediafile']));<\/b><br \/>\n  <b>exit;<\/b><br \/>\n }<br \/>\n}<\/code>\n<\/li>\n<li>download the uploaded media via an HTML iframe element &#8230; via <b>PHP<\/b> (where $ourmime is uploaded media&#8217;s mime type and $_GET[&#8216;mediafile&#8217;] is the name of upload media on the web server and $_GET[&#8216;download&#8217;]) existence flags a download scenario) &#8230;<br \/>\n<code><br \/>\nif (isset($_GET['mediafile'])) {<br \/>\n if (strpos(urldecode($_GET['mediafile']),\".\") !== false) {<br \/>\n  $parts=explode(\".\",urldecode($_GET['mediafile']));<br \/>\n  $uparts=explode(\"\/\",urldecode($_GET['mediafile']));<br \/>\n  for ($it=0; $it&lt;sizeof($exts); $it++) {<br \/>\n    if (\".\" . $parts[-1 + sizeof($parts)] == $exts[$it]) $ourmime=$exts[$it];<br \/>\n  }<br \/>\n  <b>header('Content-Type: ' . $ourmime);<\/b><br \/>\n  if (isset($_GET['download'])) {<br \/>\n    <b>header('Content-Disposition: attachment; filename=\"' . $uparts[-1 + sizeof($uparts)] . '\"');<\/b><br \/>\n  } else {<br \/>\n    header('Content-Disposition: inline');<\/b><br \/>\n  }<br \/>\n  <b>echo file_get_contents(urldecode($_GET['mediafile']));<\/b><br \/>\n  <b>exit;<\/b><br \/>\n }<br \/>\n}<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; none of which requires any more than, still, the one PHP code, in our books at least, because we can recall the code (maybe twice) in an HTML iframe, but with some $_GET[] URL parameters set to tell the web application of these last two modes of display requirement to just display the media, and nothing else &#8230; hence the <i>header: [mime type]<\/i> syntax.  HTML iframe elements are very useful here, as you can see &#8230; or perhaps hear <font size=1> &#8230; chortle, chortle<\/font>.<\/p>\n<p>So, as you can see (<font size=1>you can open your eyes now<\/font>), there are these, and probably other, modes of media usage, each with a peculiarity that could suit an application requirement you have, perhaps.<\/p>\n<p>That leaves us, after today&#8217;s work, with PHP <a target=_blank title='Click picture' href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio.php\">live run<\/a> associated with PHP code you could call <a target=_blank title='upload_audio.php' href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio.php--GETME\">upload_audio.php<\/a> that changed in <a target=_blank title='upload_audio.php' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio.php--GETME\">this way<\/a> to accomodate these new modes of display (or modes of sharing) uploaded media files originating from an HTML form element featuring an HTML <i>input<\/i> element &#8230;<\/p>\n<ul>\n<li>type=&#8221;file&#8221;<\/li>\n<li>accept=&#8221;video\/*,audio\/*&#8221;<\/li>\n<li>capture<\/li>\n<\/ul>\n<p> &#8230; showing a comma separated <i>accept<\/i> property listing feature, in a similar manner to the way we can, on an email, send to more than one emailee via a comma separated list in that HTML <i>input<\/i> &#8220;To&#8221; textbox we introduced yesterday.<\/p>\n<hr>\n<p id=\"avhficvpet\">Previous relevant <a target=_blank title='Audio\/Video HTML5 Form Input Capture via PHP Email Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/audiovideo-html5-form-input-capture-via-php-email-tutorial\/'>Audio\/Video HTML5 Form Input Capture via PHP Email Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Audio\/Video HTML5 Form Input Capture via PHP Email Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio_email.jpg\" title=\"Audio\/Video HTML5 Form Input Capture via PHP Email Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Audio\/Video HTML5 Form Input Capture via PHP Email Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Audio\/Video HTML5 Form Input Capture via PHP Primer Tutorial' href='#avhficvppt'>Audio\/Video HTML5 Form Input Capture via PHP Primer Tutorial<\/a> set us on our discovery &#8220;tour&#8221; of the HTML5 form element&#8217;s input element properties &#8230;<\/p>\n<ul>\n<li>accept<\/li>\n<li>capture<\/li>\n<\/ul>\n<p> &#8230; for audio and\/or video capture on a lot of modern mobile devices.  In addition to this <i>type=file<\/i> input element&#8217;s native capture mode on a mobile device, on a non-mobile device (or a mobile device) this same input element can be used to browse for an existant local file that &#8220;fits the bill&#8221; of whatever media type of data you are looking for with the web application you are writing.<\/p>\n<p>Today, we add into the mix, the ability to share your captured or browsed media data with an email recipient, in the form of an email attachment that can be &#8230;<\/p>\n<ul>\n<li>viewed by your computer&#8217;s default application for that media type &#8230; and\/or &#8230;<\/li>\n<li>downloaded to your computer and opened in a manner of your choosing<\/li>\n<\/ul>\n<p>The great thing about an email attachment form of sharing, especially for web servers, is that the &#8220;burden of storage&#8221; lies with those kind email companies (in my case, Google&#8217;s <a target=_blank title='Gmail' href='http:\/\/gmail.com'>Gmail<\/a>) rather than (having to hang around) on your web server (as a resident web server file).  And so we&#8217;re pretty keen about this concept.<\/p>\n<p>A lot of the extra PHP code today we got from the code of that previous <a target=_blank title='HTML5 Camera API Audio Video Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html5-camera-api-audio-video-tutorial\/'>HTML5 Camera API Audio Video Tutorial<\/a> that came at some of these ideas from a different approach.  Our approach here has no API basis in code, at least not yet?!<\/p>\n<p>And so we have a PHP <a target=_blank title='Click picture' href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio.php\">live run<\/a> associated with PHP code you could call <a target=_blank title='upload_audio.php' href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio.php-GETME\">upload_audio.php<\/a> that changed in <a target=_blank title='upload_audio.php' href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio.php-GETME\">this way<\/a>.<\/p>\n<hr>\n<p id=\"avhficvppt\">Previous relevant <a target=_blank title='Audio\/Video HTML5 Form Input Capture via PHP Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/audiovideo-html5-form-input-capture-via-php-primer-tutorial\/'>Audio\/Video HTML5 Form Input Capture via PHP 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\/ephemeral\/upload_audio.php\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Audio\/Video HTML5 Form Input Capture via PHP Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/upload_audio.jpg\" title=\"Audio\/Video HTML5 Form Input Capture via PHP Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Audio\/Video HTML5 Form Input Capture via PHP Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve spoken before about the wonderful HTML5, and its capabilities to upload audio and\/or videos to a web server (or, with Share functionalities onto public repositories like <a target=_blank title='YouTube' href='http:\/\/youtube.com'>YouTube<\/a>, should you wish).<\/p>\n<p>The key attributes to an HTML input element, as outlined at this W3C <a target=_blank title='W3C Media Capture' href='https:\/\/www.w3.org\/TR\/html-media-capture\/'>Media Capture<\/a> link, to be able, on many smart phones and tablets, to capture that audio and\/or video input are &#8230;<\/p>\n<ul>\n<li>accept<\/li>\n<li>capture<\/li>\n<\/ul>\n<p> &#8230; as per &#8230;<\/p>\n<blockquote cite=\"https:\/\/www.w3.org\/TR\/html-media-capture\/\"><p>\n The capture attribute is a boolean attribute that, if specified, indicates that the capture of media directly from the device&#8217;s environment using a media capture mechanism is preferred.<\/p>\n<p>The capture IDL attribute MUST reflect the respective content attribute of the same name.<\/p>\n<p>When the capture attribute is specified, the user agent SHOULD invoke a file picker of the specific capture control type.<\/p>\n<p>If the accept attribute&#8217;s value is set to a MIME type that has no associated capture control type, the user agent MUST act as if there was no capture attribute.\n<\/p><\/blockquote>\n<p> &#8230; as we use in our PHP code snippet &#8230;<\/p>\n<p><code><br \/>\n&lt;input onclick=\" document.getElementById('submit').style.display='block';  \"<br \/>\n           style=\"font-size:26px;height:60px;background-color: yellow;\"<br \/>\n           type=\"file\" name=\"upload\" <b>accept=\"audio\/*\" capture<\/b>&gt;&lt;\/input&gt;<br \/>\n<\/code><\/p>\n<p>And so we present this in an early days PHP web application that will only function for very short audio\/video captures, but testable on iOS iPhones or iPads and we think it will also work on Android mobile devices, as long as the captures are short.  So far, its functionality just goes towards uploading your work to our web server and playing it back to you.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/ilLrFrtjEaw\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>The PHP <a target=_blank title='Click picture' href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio.php\">live run<\/a> link is associated with PHP code you could call <a target=_blank title='upload_audio.php' href=\"http:\/\/www.rjmprogramming.com.au\/ephemeral\/upload_audio.php_GETME\">upload_audio.php<\/a> and download, as you wish.<\/p>\n<p>We hope this is more food for thought for you.<\/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='#d28696' onclick='var dv=document.getElementById(\"d28696\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/upload\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28696' 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='#d28723' onclick='var dv=document.getElementById(\"d28723\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28723' 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='#d28751' onclick='var dv=document.getElementById(\"d28751\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/download\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d28751' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Audio\/Video HTML5 Form Input Capture via PHP Email Tutorial added an email attachment mode of sharing the media you upload, so that modes of display, as of yesterday were &#8230; links to the uploaded media display email attachments of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/audiovideo-html5-form-input-capture-via-php-download-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,29,37],"tags":[76,111,113,2150,322,360,380,452,503,576,578,587,609,626,760,795,1969,932,997,1133,1319,1343,1369,1395,1493],"class_list":["post-28751","post","type-post","status-publish","format-standard","hentry","category-elearning","category-operating-system","category-tutorials","tag-android","tag-attachment","tag-audio","tag-capture","tag-device","tag-download","tag-email","tag-form","tag-gmail","tag-html","tag-html5","tag-iframe","tag-input","tag-ios","tag-media","tag-mobile","tag-mobile-device","tag-php","tag-programming","tag-share","tag-tutorial","tag-upload","tag-video","tag-w3c","tag-youtube"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28751"}],"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=28751"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28751\/revisions"}],"predecessor-version":[{"id":28776,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/28751\/revisions\/28776"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=28751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=28751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=28751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}