What is New in HTML5
What is New in HTML5

What is New in HTML5

What is New in HTML5

HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.

HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

preview

This is a Heading

This is a paragraph.

 

very important elements

New semantic elements like

<header><footer><article>, and <section>.

New attributes of form elements like number, date, time, calendar, and range.

New graphic elements<svg> and <canvas>.

New multimedia elements<audio> and <video>

HTML5 APIs (Application Programming Interfaces)

  • HTML Geolocation
  • HTML Drag and Drop
  • HTML Local Storage
  • HTML Application Cache
  • HTML Web Workers
  • HTML SSE

HTML5 Camera API

Note:- Camera API allows applications to manage the camera of the device. It allows them to take photographs, record videos, and get information like the focus, the zoom, the white balance, the flash, … It is a priviledged API and can only be used by certified applications.

the taken picture

With the help of the File API you can then access the taken picture or chosen file:

var takePicture = document.querySelector("#take-picture");
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];
    }
};

 picture in the web page

Once you have a reference to the taken picture (i.e., file),

you can then use  to create a URL referencing the picture and setting it as the src of an image:

// Image reference
var showPicture = document.querySelector("#show-picture");

// Create ObjectURL
var imgURL = window.URL.createObjectURL(file);

// Set img src to ObjectURL
showPicture.src = imgURL;

// For performance reasons, revoke used ObjectURLs
URL.revokeObjectURL(imgURL);

If createObjectURL() isn’t supported, an alternative is to fallback to FileReader:

// Fallback if createObjectURL is not supported
var fileReader = new FileReader();
fileReader.onload = function (event) {
    showPicture.src = event.target.result;
};
fileReader.readAsDataURL(file);

HTML5 Code
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Camera API</title>
        <link rel="stylesheet" href="css/base.css" 
type="text/css" media="screen">
    </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 src="js/base.js"></script>


    </body>
</html>

This Post Has One Comment

  1. Rapid tabs cialis

    Thanks a lot for the article post.Much thanks again. Fantastic.rapid tabs cialis

Leave a Reply