Wednesday, 1 August 2012

HTML5 Progress Bar runs in all browser

In the every HTML5 application which uses resources like images,video or any type of multimedia. Loading bar or The Progress Bar is barely required.

html5 progress tag is fully supported by Firefox, Chrome, Opera and other browsers like Safari 6.0, Internet Explorer 12.0 is going to support in near future.Below code will work in all browsers either it supports the progress tag or not.

See practical example of progress tag : Progress Bar Demo

Simple Code with its tutorial


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Progress Bar</title>
<script type="text/javascript" language="javascript">
var interval;
    function increaseNumber(step){
        var no = document.getElementById('no');
        var pid = document.getElementById('progress_bar');
        var curStep = parseInt(no.innerHTML);
// If progress is 100%, it should not continue progressing value.
        if (curStep < 100){
            no.innerHTML = curStep + step;
            pid.value = no.innerHTML;
        }
        else
        {
            clearInterval(interval);
        }
    }
    function call_increase(){
// Increase value in the progress bar. argument is no. of increment.
        increaseNumber(1);
    }
    interval=setInterval(call_increase,100);
</script>
</head>

<body onLoad="increaseNumber(0)">
<label>Loading <span id="no">0</span>%</label><br/>
<progress id="progress_bar" max="100"></progress>
</body>
</html>



 This code runs in all browsers except it supports progress tag or not. Progress graphics will not display in the browsers that do not support but it will still display progress in no.

Demo- HTML5 Progress Bar




Tuesday, 24 July 2012

Webcam in HTML5

On my new project I used to run webcam. Project itself will develop through HTML5 so there is no doubt that to run webcam I have to use HTML5.

I had something good for you that you can run webcam in website.
See below live example that runs in Opera 12 and above and Chrome 20.0 and above and Firefox Nightly.

Live Demo of webcam in HTML5

Mobile browser is also supporting this feature. like Firefox Mobile, Android 3.0, Opera for android, Chrome for android, iOS Safari 6.0 etc.,

Here I have given a simple basic code with explanation that is used in the complex live example.

Example code with tutorial


<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML5 Front Camera</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes">
    <meta name="author" content="Mitesh Maheta">
</head>
<body>
    <div role="main">
<!--Webcam's screen is video tag screen -->
        <video id="sourcevid" autoplay>Install browser's latest version.</video>
   </div>
// Main API which makes webcam to communicate.
   <script type="text/javascript" language="javascript">
       video = document.getElementById('sourcevid');
// Catch stream from the camera using getUserMedia. Syntax is different as per the borwser. for ex. webkitGetUserMedia - Chrome, mozGetUserMedia- Mozilla Firefox.
       navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||  navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
// Check if browser supports or not.
    if (navigator.getUserMedia) {
// specially used this syntax for chrome. Other browser supports {video:true,audio:true}
          var options = {video: true, toString: function(){return 'video';}};
//Main method call to run webcam
          navigator.getUserMedia(options, success, error);
//If Media streaming is success, This function will called.
          function success(stream) {
// Replace the source of the video element with the stream from the camera
            video.src = window.URL.createObjectURL(stream) || stream;
            video.play();
//If Media streaming is fail, This function will call.   
        function error(error) {
            console.error('An error occurred: [CODE ' + error.code + ']');
            video.play();
        }
    }
// When browser does not support getUserMedia.
    else {
        var errorMsg = '<p>Uh oh, it appears your browser doesn\'t support this feature.</p>';
        document.querySelector('[role=main]').innerHTML = errorMsg;
    }
</script>
</body>
</html>



Wednesday, 18 July 2012

HTML5 - Wrap Text in Canvas

It is very important feature that should be included with draft of new features of html5 canvas but unfortunately its not included. I have developed function that makes it possible to wrap text inside the canvas.

Here is the code that will wrap the text on end of the canvas width. It is written in javascript. So to use just add it to your javascript.

Parameter Details:

  • context = canvas context variable name.
  • text = Whole text string that to be added in the canvas.
  • x = starting x point of the text in the canvas.
  • y = starting y point of the text in the canvas.
  • maxWidth = canvas's width.
  • lineHeight = Distance between two lines.
function wrapText(context, text, x, y, maxWidth, lineHeight) {
        var words = text.split(" ");
        var line = "";
        for(var n = 0; n < words.length; n++) {
          var testLine = line + words[n] + " ";
          var metrics = context.measureText(testLine);
          var testWidth = metrics.width;
          if(testWidth > maxWidth) {
            context.fillText(line, x, y);
            line = words[n] + " ";
            y += lineHeight;
          }
          else {
            line = testLine;
          }
        }
        context.fillText(line, x, y);
}

For Ex. 
   var text = "HTML5 Wrap Text function in Javascript written here is helped me a lot.";
   var x = 20;
   var y = 20;
   wrapText(context, text, x, y, (canvas.width - 8), 25)

* line Height 25 because mine font size is 20.

Note : Single canvas for single paragraph is to be used.

Hope this will help you a lot to all HTML5 Developer. Give your comments to improve this article.