Apply Filter to Web Cam Feed using Css3

This tutorial explains how to "Apply Filter to your web cam using css3".If you want to know more information about how to  "Get your Web Camera Live Feed in Web Browser using getUserMedia" follow this link.

Following are some of the filter that you can apply to your webcam feed.

CSS: 
.grayscale{
    -webkit-filter:grayscale(1);
    filter:grayscale(99%);
}

.blur{
    -webkit-filter:blur(9px);
    filter:blur(9px);
}

.contrast {
    -webkit-filter:contrast(2);
    filter:contrast(2);
}

Html Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Html 5 Web Cam Demo</title>          
    <link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Camera Access using HTML 5</p>
    <div class="video-container">
        <video id="stream" class="contrast" width="500" autoplay controls></video>      
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/camera.js"></script>
</body>

</html>

Output:




Download Source Code


No comments :

Post a Comment