{"id":19065,"date":"2017-11-15T16:15:42","date_gmt":"2017-11-15T14:15:42","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=19065"},"modified":"2017-12-19T12:57:16","modified_gmt":"2017-12-19T10:57:16","slug":"html5-webcam-tutorial","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/","title":{"rendered":"HTML5 Webcam Tutorial"},"content":{"rendered":"

<\/a>1. Introduction<\/h2>\n

In this article, we will look at how to capture images as well as video from user’s webcam. There have been several iterations to enable access to devices from JavaScript. Starting from special attributes for existing input tags to getUserMedia<\/code> part of the WebRTC APIs. We will look at how to use these and leverage them for accessing devices, specifically, webcam from the browser.
\n 
\n 
\n 
\n 
\n[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n

\n

Table of Contents<\/h3>\n
\n
1. Introduction<\/a><\/dt>\n
2. Tools & Technologies<\/a><\/dt>\n
3. Project Layout<\/a><\/dt>\n
4. Capture Webcam<\/a><\/dt>\n
5. Take a Snap<\/a><\/dt>\n
6. Applying Filters<\/a><\/dt>\n
7. Run the Project<\/a><\/dt>\n
8. Download the Source Code<\/a><\/dt>\n<\/dl>\n<\/div>\n

<\/a>2. Tools & Technologies<\/h2>\n

The toolset for the project that we are going to build is as follows:<\/p>\n

    \n
  1. Nodejs v6.3.0<\/a><\/li>\n
  2. Express<\/a><\/li>\n
  3. Visual Studio Code IDE<\/a><\/li>\n<\/ol>\n

    We use Nodejs and the express module to quickly spin up a bare minimum Web Server to serve our HTML files. I have used the Integrated Development Environment that I’m most comfortable with, i.e., Visual Studio Code.<\/p>\n

    <\/a>3. Project Layout<\/h2>\n

    Our project has the layout as shown below:<\/p>\n

    \"\"<\/a>
    Project Layout<\/figcaption><\/figure>\n

    css folder<\/strong><\/em>
    \nThis folder stores our css files that we create and use for the UI of the project.
    \njs folder<\/strong><\/em>
    \nThis folder has the client side JavaScript files we write for this project.
    \nindex.html<\/strong><\/em>
    \nThis is our main landing page with all the HTML markup.
    \nindex.js<\/strong><\/em>
    \nThis is our server side JavaScript file where our barebones web server resides and is the starting point of the application.<\/p>\n

    <\/a>4. Capture Webcam<\/h2>\n

    To capture the video from the Webcam we will use getUserMedia<\/code> HTML5 API. Firstly, we stream the Webcam video to a video<\/code> element on our page. This does require permission from the user and as soon as we try to access the Webcam the user is asked to approve the same. We also use the constraints object to modify the default video from the Webcam.
    \nTo begin with, we place a video<\/code> Html tag in our index.html<\/code> page. This is where we will show the video feed from the Webcam. The markup looks like below:<\/p>\n

    index.html<\/em><\/span><\/p>\n

    <video height=\"480px\" width=\"640px\" id=\"webcamfeed\" autoplay controls><\/video>\r\n<\/pre>\n
    Two things to note in the above markup is the autoplay<\/code> and controls<\/code> attributes. The autoplay<\/code> causes the video to start playing once we wire things up like you will see below. The controls<\/code> attribute specifies that video controls be displayed like play\/pause buttons.
    \nNow that we have the markup in place let us look at how to request access to the webcam and wire it to our video<\/code> element. We use the getUserMedia<\/code> API call to request access on the click of the capturewebcam<\/code> button like below:<\/p>\n
    html5.webcam.demo.js<\/em><\/span><\/p>\n
    var captureWebcam = document.getElementById(\"capturewebcam\");\r\nfunction getUserMedia(){\r\n    if(navigator.getUserMedia){\r\n        navigator.getUserMedia=navigator.getUserMedia||navigator.webkitGetUserMedia\r\n        ||navigator.mozGetUserMedia||navigator.msGetUserMedia;\r\n\r\n    }else{\r\n        navigator.getUserMedia=navigator.mediaDevices.getUserMedia;\r\n    }\r\n    return navigator.getUserMedia;\r\n}\r\n\r\ncaptureWebcam.addEventListener(\"click\", function(){\r\n    var media = getUserMedia();\r\n    if(media){\r\n        navigator.getUserMedia({video: { width: 640, height: 480}, audio: false}, function(stream){\r\n            \r\n            videoElement.src = window.URL.createObjectURL(stream);\r\n            \r\n        }, function(error){\r\n            \/\/Catch errors and print to the console\r\n            console.log(\"There was an error in GetUserMedia!!!\");\r\n            console.log(error);\r\n        });\r\n    }\r\n});\r\n<\/pre>\n
    We set the src<\/code> attribute of the video element to an ObjectURL<\/code> created from the stream object returned by the call to getUserMedia<\/code> attribute. The URL.createObjectURL()<\/code> static method creates a DOM containing the URL of the BLOB object passed to it, that is the stream object here from getUserMedia<\/code> API call. The result would look like below, with video from your Webcam, of course.<\/p>\n
    <\/a>5. Take a Snap<\/h2>\n
    Let us take a look to an interesting feature where we allow the user to take snapshots from the Webcam. To start with this we will add a canvas<\/code> element to our HTML. This element will host the snap captured on click of a button by the user. The HTML markup we need to add looks like below:<\/p>\n
    \"\"<\/a>
    Screenshot – Index.html<\/figcaption><\/figure>\n
    index.html<\/em><\/span><\/p>\n
    <canvas height=\"480px\" width=\"640px\" id=\"snap\"><\/canvas>\r\n<\/pre>\n
    To take a snap we will get the 2d context<\/code> of the canvas<\/code> element which allows us to draw an image onto it. Once we have the context all we need to do is to call drawImage<\/code> method on the context and pass it the video element that is displaying the video from the webcam. We need to add the following:<\/p>\n
    html5.webcam.demo.js<\/em><\/span><\/p>\n
    var videoElement = document.getElementById(\"webcamfeed\");\r\nvar captureWebcam = document.getElementById(\"capturewebcam\");\r\nvar captureSnap = document.getElementById(\"takesnap\");\r\nvar canvas = document.getElementById(\"snap\");\r\n\r\ncaptureSnap.addEventListener(\"click\", function(){\r\n    var context = canvas.getContext('2d');\r\n    context.drawImage(videoElement, 0, 0, 640, 480, 0, 0, 640, 480);\r\n});\r\n<\/pre>\n
    <\/a>6. Applying Filters<\/h2>\n
    Let us do something even more interesting with the snapshots that we have captured. Allow users to apply css filters, which are similar to the filters available in image editing software packages, to the snapshots captured from webcam. Some of the filters that we will look at are: Blur<\/em>, Sepia<\/em> and GrayScale<\/em>.
    \nTo start with this implementation we add a select tag and a checkbox markup to our HTML page. The checkbox will switch the filters on and off and the select tag would allow the user to switch between different filters. The markup we add looks like below:<\/p>\n
    index.html<\/em><\/span><\/p>\n
    <input type=\"checkbox\" id=\"enablefilters\" >Enable Filters<\/input>\r\n<select id=\"filterName\">\r\n    <option value=\"blur\">Blur<\/option>\r\n    <option value=\"sepia\">Sepia<\/option>\r\n    <option value=\"grayscale\">GrayScale<\/option>\r\n    <option value=\"saturate\">Saturate<\/option>\r\n    <option value=\"brightness\">Brightness<\/option>\r\n<\/select>\r\n<\/pre>\n
    Also, we create specific CSS classes for applying the above filters. Although we can apply more than one filter function at a time but to keep things simple for the purpose of this tutorial we will only apply one filter at a time. We create the following css classes in our css file:<\/p>\n
    html5.webcam.demo.css<\/em><\/span><\/p>\n
    .blur{\r\n    filter: blur(30px);\r\n}\r\n.grayscale{\r\n    filter: grayscale(100%);\r\n}\r\n.sepia{\r\n    filter: sepia(60%);\r\n}\r\n.saturate{\r\n    filter: saturate(60%);\r\n}\r\n.brightness{\r\n    filter: brightness(150%);\r\n}\r\n<\/pre>\n
    Now to finally apply these classes when the “apply filters” checkbox is checked or selection is changed in the filters dropdown we write the following JavaScript in our JS file:<\/p>\n
    html5.webcam.demo.js<\/em><\/span><\/p>\n
    var canvas = document.getElementById(\"snap\");\r\nvar filters = document.getElementById(\"enablefilters\");\r\nvar filterName = document.getElementById(\"filterName\");\r\n\r\nfilters.addEventListener(\"change\", function(evt){\r\n    applyFilter(filterName.value);\r\n});\r\nfilterName.addEventListener(\"change\", function(evt){\r\n    applyFilter(filterName.value);\r\n});\r\nfunction applyFilter(fName){\r\n    if(filters.checked){\r\n        canvas.className = fName;\r\n    } else {\r\n        canvas.className = \"\";\r\n    }\r\n}\r\n<\/pre>\n
    Now we are able to apply or remove filters to the captured image or snapshot in our canvas element. We can also switch between various types of filters using the filter dropdown. The complete index.html<\/code>, html5.webcam.demo.css<\/code> and html5.webcam.demo.js<\/code> files look like below:<\/p>\n
    The below HTML page has standard HTML5 Doctype apart from some additional meta tags. The meta tag indicate to the client browser that the latest standards need to be used to render the contents of the page. The tag is needed specifically for IE browser. We have included our CSS file in the head section and our JavaScript file towards the end of the page as well.<\/p>\n
    index.html<\/em><\/span><\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n    <head>\r\n        <meta charset=\"utf-8\">\r\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->\r\n        <title>WCG -- HTML5 Webcam Tutorial<\/title>\r\n        <link rel=\"stylesheet\" href=\"css\/html5.webcam.demo.css\" \/>\r\n<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\r\n<!-- WARNING: Respond.js doesn't work if you view the page via file:\/\/ -->\r\n<!--[if lt IE 9]>\r\n    <script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"><\/script>\r\n    <script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n<![endif]-->\r\n    <\/head>\r\n    <body>\r\n        <h1>WCG -- HTML5 Webcam Tutorial<\/h1>\r\n\r\n        <video height=\"480px\" width=\"640px\" id=\"webcamfeed\" autoplay controls><\/video>\r\n        <canvas height=\"480px\" width=\"640px\" id=\"snap\"><\/canvas>\r\n        <input type=\"button\" id=\"capturewebcam\" value=\"Start Webcam\"\/>\r\n        <input type=\"button\" id=\"takesnap\" value=\"Take Snap\"\/>\r\n        <input type=\"checkbox\" id=\"enablefilters\" >Enable Filters<\/input>\r\n        <select id=\"filterName\">\r\n            <option value=\"blur\">Blur<\/option>\r\n            <option value=\"sepia\">Sepia<\/option>\r\n            <option value=\"grayscale\">GrayScale<\/option>\r\n            <option value=\"saturate\">Saturate<\/option>\r\n            <option value=\"brightness\">Brightness<\/option>\r\n        <\/select>\r\n<!--Our script-->\r\n        <script src=\"js\/html5.webcam.demo.js\"><\/script>\r\n\r\n    <\/body>\r\n<\/html>\r\n<\/pre>\n
    In the below complete CSS file there are two additional classes targeting the video<\/code> and the canvas<\/code> elements. These classes set the height and width of the two elements and initial background colors of the two.<\/p>\n
    html5.webcam.demo.css<\/em><\/span><\/p>\n
    video{\r\n    display: inline-block;\r\n    background-color:grey;\r\n    height: 480px;\r\n    width: 640px;\r\n}\r\ncanvas{\r\n    display:inline-block;\r\n    background-color: lightgray;\r\n    height: 480px;\r\n    width: 640px;\r\n}\r\n.blur{\r\n    filter: blur(30px);\r\n}\r\n.grayscale{\r\n    filter: grayscale(100%);\r\n}\r\n.sepia{\r\n    filter: sepia(60%);\r\n}\r\n.saturate{\r\n    filter: saturate(60%);\r\n}\r\n.brightness{\r\n    filter: brightness(150%);\r\n}\r\n<\/pre>\n
    In the JavaScript file below you will notice the function getUserMedia<\/code> which is needed to insulate our code from API changes. The WebRTC APIs are a work in progress and have varying levels of support in different browser versions. Some browser versions support prefixed API methods and in some newer browsers the method has moved to the Navigator<\/code> object’s mediaDevices<\/code> property.<\/p>\n
    html5.webcam.demo.js<\/em><\/span><\/p>\n
    var videoElement = document.getElementById(\"webcamfeed\");\r\nvar captureWebcam = document.getElementById(\"capturewebcam\");\r\nvar captureSnap = document.getElementById(\"takesnap\");\r\nvar canvas = document.getElementById(\"snap\");\r\nvar filters = document.getElementById(\"enablefilters\");\r\nvar filterName = document.getElementById(\"filterName\");\r\nfunction getUserMedia(){\r\n    if(navigator.getUserMedia){\r\n        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia\r\n        || navigator.mozGetUserMedia || navigator.msGetUserMedia;\r\n\r\n    } else {\r\n        navigator.getUserMedia = navigator.mediaDevices.getUserMedia;\r\n    }\r\n    return navigator.getUserMedia;\r\n}\r\ncaptureWebcam.addEventListener(\"click\", function(){\r\n    var media = getUserMedia();\r\n    if(media){\r\n        navigator.getUserMedia({video: { width: 640, height: 480}, audio: false}, function(stream){\r\n\r\n            videoElement.src = window.URL.createObjectURL(stream);\r\n\r\n        }, function(error){\r\n        \/\/Catch errors and print to the console\r\n        console.log(\"There was an error in GetUserMedia!!!\");\r\n        console.log(error);\r\n        });\r\n    }\r\n});\r\ncaptureSnap.addEventListener(\"click\", function(){\r\n    var context = canvas.getContext('2d');\r\n    context.drawImage(videoElement, 0, 0, 640, 480, 0, 0, 640, 480) ;\r\n});\r\nfilters.addEventListener(\"change\", function(evt){\r\n    applyFilter(filterName.value);\r\n});\r\nfilterName.addEventListener(\"change\", function(evt){\r\n    applyFilter(filterName.value);\r\n});\r\nfunction applyFilter(fName){\r\n    if(filters.checked){\r\n        canvas.className = fName;\r\n    } else {\r\n        canvas.className = \"\";\r\n    }\r\n}\r\n<\/pre>\n
    <\/a>7. Run the Project<\/h2>\n
    To run the project run the following commands at the root of the project:<\/p>\n
    >npm install\r\n<\/pre>\n
    and<\/p>\n
    >node index.js\r\n<\/pre>\n
    and then navigate to the URL http:\/\/localhost:8090\/index.html<\/code><\/p>\n
    <\/a>8. Download the Source Code<\/h2>\n
    That was an example for HTML5 Webcam.<\/p>\n
    Download<\/strong>
    \nYou can download the full source code of this example here :     WCG HTML5 Webcam Tutorial<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
    1. Introduction In this article, we will look at how to capture images as well as video from user’s webcam. There have been several iterations to enable access to devices from JavaScript. Starting from special attributes for existing input tags to getUserMedia part of the WebRTC APIs. We will look at how to use these …<\/p>\n","protected":false},"author":213,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[58],"class_list":["post-19065","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","tag-html5-2"],"yoast_head":"\nHTML5 Webcam Tutorial - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"1. Introduction In this article, we will look at how to capture images as well as video from user's webcam. There have been several iterations to enable\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Webcam Tutorial - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"1. Introduction In this article, we will look at how to capture images as well as video from user's webcam. There have been several iterations to enable\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2017-11-15T14:15:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T10:57:16+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\"},\"headline\":\"HTML5 Webcam Tutorial\",\"datePublished\":\"2017-11-15T14:15:42+00:00\",\"dateModified\":\"2017-12-19T10:57:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/\"},\"wordCount\":1079,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"keywords\":[\"html5\"],\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/\",\"name\":\"HTML5 Webcam Tutorial - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2017-11-15T14:15:42+00:00\",\"dateModified\":\"2017-12-19T10:57:16+00:00\",\"description\":\"1. Introduction In this article, we will look at how to capture images as well as video from user's webcam. There have been several iterations to enable\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Webcam Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Webcam Tutorial - Web Code Geeks - 2026","description":"1. Introduction In this article, we will look at how to capture images as well as video from user's webcam. There have been several iterations to enable","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Webcam Tutorial - Web Code Geeks - 2026","og_description":"1. Introduction In this article, we will look at how to capture images as well as video from user's webcam. There have been several iterations to enable","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-11-15T14:15:42+00:00","article_modified_time":"2017-12-19T10:57:16+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592"},"headline":"HTML5 Webcam Tutorial","datePublished":"2017-11-15T14:15:42+00:00","dateModified":"2017-12-19T10:57:16+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/"},"wordCount":1079,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","keywords":["html5"],"articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/","name":"HTML5 Webcam Tutorial - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2017-11-15T14:15:42+00:00","dateModified":"2017-12-19T10:57:16+00:00","description":"1. Introduction In this article, we will look at how to capture images as well as video from user's webcam. There have been several iterations to enable","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-webcam-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Webcam Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=19065"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19065\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=19065"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=19065"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=19065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}