Mitesh Mehta's Blog: July 2012

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">

        <video id="sourcevid" autoplay>Install browser's latest version.</video>
   </div>

// Main API which makes webcam to communicate.

// 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>

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.

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.

Mitesh Mehta's Blog

Pages

Tuesday, 24 July 2012

Webcam in HTML5

Wednesday, 18 July 2012

HTML5 - Wrap Text in Canvas