In this article I’ll present you how to use and access the visitor Web Camera.<\/p>\n
First we will present the API, then we will see an example to explain the HTML5 API usage.
\n
\n
\n
\n
\n
\n
\n
\n[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n
The specification of the API that allows web pages to interact with user (visitor) camera (and\/or microphone) evolved many times.<\/p>\n
The story of accessing the user device started with the use of the html So at this age, the way you could retreive some data from the user device (camera, or microphone) was to handle the The example below is inspired from the main Specification<\/a> :<\/p>\n And the JavaScript<\/p>\n This example uses the HTML File API to read, parse and display the video.<\/p>\n Note:<\/strong> This implementation is not really supported anymore by browsers (on desktop), the As with many of the HTML5 features, browser implementation may not be available in the user browser, so first we will need to check if we can use the particular feature.<\/p>\n All browsers created a specific function which can be used to retrieve the user media so we will need to create a wrapper function for accessing the user media :<\/p>\n The function The Note:<\/strong> call to The Constraints object can be augmented to define more prerequisites on capturing video (such as video quality).<\/p>\n The constraint is a For example if you only want to capture HD video you can define those constraints :<\/p>\n<input type=\"file\" \/><\/code> element and two attributes :<\/p>\n\n
accept<\/code>, this attribute allow to define which type of file the user can upload : <input
\ntype=\"file\" accept=\"image\/*;\" ><\/code><\/li>\ncapture<\/code>, this attribute tells the browser to capture the media directly from a device.<\/li>\n<\/ul>\nchange<\/code> event on the <input type=\"file\" \/><\/code> element, and to pass the file<\/em> to the “good”<\/em> element, canvas for video rendering, or an image element for image visualisation.<\/p>\n\r\n<input type="file" accept="video\/*" capture>\r\n<canvas><\/canvas>\r\n<\/pre>\n
\r\n\r\nvar input = document.querySelector('input[type=file]');\r\n\r\ninput.addEventListener('change', function () {\r\n var file = input.files[0];\r\n drawOnCanvas(file);\r\n};\r\n\r\nfunction drawOnCanvas(file) {\r\n\r\n \/\/ We use the File APi to read the content of the input file element\r\n var reader = new FileReader();\r\n\r\n \/\/ On reader load with parse the content and draw it on Canvas\r\n reader.onload = function (e) {\r\n var dataURL = e.target.result,\r\n c = document.querySelector('canvas'),\r\n ctx = c.getContext('2d'),\r\n img = new Image();\r\n\r\n img.onload = function() {\r\n c.width = img.width;\r\n c.height = img.height;\r\n ctx.drawImage(img, 0, 0);\r\n };\r\n\r\n img.src = dataURL;\r\n };\r\n\r\n \/\/ Load the file in reader ...\r\n reader.readAsDataURL(file);\r\n}\r\n<\/pre>\n
\nwould prefer the use of navigator.gerUserMedia()<\/code>.<\/p><\/blockquote>\n2. The navigator.getUserMedia()<\/h2>\n
2.1 Detect the feature …<\/h3>\n
\r\n function userMedia(){\r\n return navigator.getUserMedia = navigator.getUserMedia ||\r\n navigator.webkitGetUserMedia ||\r\n navigator.mozGetUserMedia ||\r\n navigator.msGetUserMedia || null;\r\n\r\n }\r\n\r\n ;\r\n\r\n \/\/ Now we can use it\r\n if( userMedia() {\r\n \/\/ We can use the usermedia\r\n } else {\r\n \/\/ We can not use the user media.\r\n }\r\n<\/pre>\nuserMedia()<\/code> is used to check if the browser accepts the use of the user device. If it’s supported, the browser prefixed<\/em> function, is assigned to the navigator.gerUserMedia()<\/code>. Let see how to use the API.<\/p>\n2.2 The API<\/h3>\n
navigator.gerUserMedia()<\/code> accepts three parameters :<\/p>\n\n
constraints<\/code>, this parameter is required, and must be an object (a
\nMediaStreamConstraints<\/code> object). This object is a simple Object with two members :<\/p>\n\r\n {\r\n audio:true, \/\/ A boolean to define if we need to access audio device\r\n video:true \/\/ A boolean to define if we need to acces the video device\r\n }\r\n <\/pre>\n<\/li>\nsuccess<\/code>, this is a required parameter, and it must be a Function, that will be called if the after accessing the device(s).<\/li>\nerror<\/code>, this is an optional parameter, and if presents must be a Function, that will be called in case of errors while accessing the device(s).<\/li>\n<\/ul>\nnavigator.gerUserMedia()<\/code> will prompt the user to accept (or not) the use of his device. The success<\/code> callback, will be called just after the user accept. And the error<\/em> function is called when error arrived or when the user does not accept the use of his device.<\/p><\/blockquote>\n2.3 The Constraints object<\/h3>\n
MediaTrackConstraints<\/code> object, define in the API<\/a>.<\/p>\n\r\nvar hdVideoConstraints = {\r\n video: {\r\n mandatory: {\r\n minWidth: 1280,\r\n minHeight: 720\r\n }\r\n }\r\n};\r\n<\/pre>\n