Created
April 23, 2015 06:31
-
-
Save gangadharjannu/fb2108e6e904eefd5733 to your computer and use it in GitHub Desktop.
Camera API // source http://jsbin.com/qaxayi
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Camera API</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Camera API</h1> | |
| <section class="main-content"> | |
| <p>A demo of the Camera API, currently implemented in Firefox and Google Chrome on Android. Choose to take a picture with your device's camera and a preview will be shown through createObjectURL or a FileReader object (choosing local files supported too).</p> | |
| <p> | |
| <input type="file" id="take-picture" accept="image/*"> | |
| </p> | |
| <h2>Preview:</h2> | |
| <p> | |
| <img src="about:blank" alt="" id="show-picture"> | |
| </p> | |
| <p id="error"></p> | |
| </section> | |
| <p class="footer">All the code is available in the <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| (function () { | |
| var takePicture = document.querySelector("#take-picture"), | |
| showPicture = document.querySelector("#show-picture"); | |
| if (takePicture && showPicture) { | |
| // Set events | |
| takePicture.onchange = function (event) { | |
| // Get a reference to the taken picture or chosen file | |
| var files = event.target.files, | |
| file; | |
| if (files && files.length > 0) { | |
| file = files[0]; | |
| try { | |
| // Get window.URL object | |
| var URL = window.URL || window.webkitURL; | |
| // Create ObjectURL | |
| var imgURL = URL.createObjectURL(file); | |
| console.log(imgURL); | |
| // Set img src to ObjectURL | |
| showPicture.src = imgURL; | |
| // Revoke ObjectURL | |
| URL.revokeObjectURL(imgURL); | |
| } | |
| catch (e) { | |
| try { | |
| // Fallback if createObjectURL is not supported | |
| var fileReader = new FileReader(); | |
| fileReader.onload = function (event) { | |
| showPicture.src = event.target.result; | |
| }; | |
| fileReader.readAsDataURL(file); | |
| } | |
| catch (er) { | |
| // | |
| var error = document.querySelector("#error"); | |
| if (error) { | |
| error.innerHTML = "Neither createObjectURL or FileReader are supported"; | |
| } | |
| } | |
| } | |
| } | |
| }; | |
| } | |
| })(); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">(function () { | |
| var takePicture = document.querySelector("#take-picture"), | |
| showPicture = document.querySelector("#show-picture"); | |
| if (takePicture && showPicture) { | |
| // Set events | |
| takePicture.onchange = function (event) { | |
| // Get a reference to the taken picture or chosen file | |
| var files = event.target.files, | |
| file; | |
| if (files && files.length > 0) { | |
| file = files[0]; | |
| try { | |
| // Get window.URL object | |
| var URL = window.URL || window.webkitURL; | |
| // Create ObjectURL | |
| var imgURL = URL.createObjectURL(file); | |
| console.log(imgURL); | |
| // Set img src to ObjectURL | |
| showPicture.src = imgURL; | |
| // Revoke ObjectURL | |
| URL.revokeObjectURL(imgURL); | |
| } | |
| catch (e) { | |
| try { | |
| // Fallback if createObjectURL is not supported | |
| var fileReader = new FileReader(); | |
| fileReader.onload = function (event) { | |
| showPicture.src = event.target.result; | |
| }; | |
| fileReader.readAsDataURL(file); | |
| } | |
| catch (er) { | |
| // | |
| var error = document.querySelector("#error"); | |
| if (error) { | |
| error.innerHTML = "Neither createObjectURL or FileReader are supported"; | |
| } | |
| } | |
| } | |
| } | |
| }; | |
| } | |
| })();</script></body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function () { | |
| var takePicture = document.querySelector("#take-picture"), | |
| showPicture = document.querySelector("#show-picture"); | |
| if (takePicture && showPicture) { | |
| // Set events | |
| takePicture.onchange = function (event) { | |
| // Get a reference to the taken picture or chosen file | |
| var files = event.target.files, | |
| file; | |
| if (files && files.length > 0) { | |
| file = files[0]; | |
| try { | |
| // Get window.URL object | |
| var URL = window.URL || window.webkitURL; | |
| // Create ObjectURL | |
| var imgURL = URL.createObjectURL(file); | |
| console.log(imgURL); | |
| // Set img src to ObjectURL | |
| showPicture.src = imgURL; | |
| // Revoke ObjectURL | |
| URL.revokeObjectURL(imgURL); | |
| } | |
| catch (e) { | |
| try { | |
| // Fallback if createObjectURL is not supported | |
| var fileReader = new FileReader(); | |
| fileReader.onload = function (event) { | |
| showPicture.src = event.target.result; | |
| }; | |
| fileReader.readAsDataURL(file); | |
| } | |
| catch (er) { | |
| // | |
| var error = document.querySelector("#error"); | |
| if (error) { | |
| error.innerHTML = "Neither createObjectURL or FileReader are supported"; | |
| } | |
| } | |
| } | |
| } | |
| }; | |
| } | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment