CAM & FileReader API Demo

Demo that uses CAM and FileReader API for uploading your files.

by Avinash_R

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <meta name="viewport" content="width=device-width">
        <meta charset=utf-8 />
        <title>CAM Api</title>
    </head>
    
    <body>
        <div id="#message"></div>
        <form enctype="multipart/form-data" method="post">
             <h2>Regular file upload</h2>

            <input type="file" id="regular" />
             <h2>capture=camera</h2>

            <input type="file" accept="image/*;capture=camera" />
            <img/>
             <h2>capture=camcorder</h2> 
            <input type="file" accept="video/*;capture=camcorder" />
            <video></video>
             <h2>capture=microphone</h2> 
            <input type="file" accept="audio/*;capture=microphone" />
            <audio></audio>
        </form>
    </body>

</html>

JavaScript

(function ($) {
    var img, body;
    img = $('<img style="user-select: none;position:fixed;z-index:999999" src="http://chart.googleapis.com/chart?cht=qr&amp;chs=150x150&amp;chl=' + escape(window.location.href) + '">');
    body = $(document.body);
    img.prependTo(body)
        .hide()
        .click(function () {
        img.fadeOut(function () {
            img.remove();
        })
    })
        .on("load", function () {
        img.show().css({
            left: $(window).width() / 2 - img.width() / 2,
            top: $(window).height() / 2 - img.height() / 2
        })
    });
    if (img.prop("complete")) {
        img.load();
    }
})(jQuery);
$("input[accept]").val("").on("change", function (event) {
    var element, files, file, URL, url, fileReader;
    element = $(this).next();
    // Get a reference to the taken picture or chosen file
    files = event.target.files;
    if (files && files.length > 0) {
        file = files[0];
        if (element.is("img")) {
            try {
                // Get window.URL object
                URL = window.URL || window.webkitURL;

                // Create ObjectURL
                url = URL.createObjectURL(file);

                // Set img src to ObjectURL
                element.attr("src", url);

                element.one("load", function () {
                    $("#message").text("image size:", [element.prop("naturalHeight"), element.prop("naturalWidth")]);
                });

                // Revoke ObjectURL
                URL.revokeObjectURL(url);
            } catch (e) {
                try {
                    // Fallback if createObjectURL is not supported
                    fileReader = new FileReader();
                    fileReader.onload = function (event) {
                        element.attr("src", event.target.result);
                    };
                    fileReader.readAsDataURL(file);
                } catch (e) {
                    // Display error message
           ...