Js+html5 method of capturing video from camera based on filter

This article illustrates the JS+HTML5 method for capturing video from a camera based on a filter. Share to everyone for your reference. Specifically as follows:

Index.html page:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14-15 16

<div class= "Warning" >

STYLE.CSS file:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 The

Script.js file:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26-27--28 29---30 31--32 33 34 35 36 37 38-39 40 41 42 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 5 86 87 88

Main initialization Document.addeventlistener (' domcontentloaded ', function () {//Global variables var video = Documen T.queryselector (' video '); var audio, Audiotype; var canvas = document.queryselector (' canvas '); var context = Canvas.getcontext (' 2d '); Custom video filters var iFilter = 0; var filters = [' Grayscale ', ' sepia ', ' blur ', ' brightness ', ' contrast ', ' hue-rotate ', ' hue-rotate2 ', ' hue-rotate3 ', ' Satur ' Ate ', ' invert ', ' none ']; Get the "video stream" from the camera with getusermedia Navigator.getusermedia = Navigator.getusermedia | | Navigator.webkitgetusermedia | | Navigator.mozgetusermedia | | Navigator.msgetusermedia; Window. URL = window. URL | | Window.webkiturl | | Window.mozurl | | Window.msurl; if (Navigator.getusermedia) {//Evoke Getusermedia function Navigator.getusermedia ({video:true, audio:true}, OnSuccess Callback, Onerrorcallback); function Onsuccesscallback (stream) {//Use the stream from the camera as the source of the ' video element video.src = Wind ow. Url.creAteobjecturl (stream) | | Stream AutoPlay Video.play (); HTML5 Audio Audio = new Audio (); Audiotype = Getaudiotype (audio); if (audiotype) {audio.src = ' polaroid. ' + Audiotype; Audio.play ();}} Display An error function Onerrorcallback (e) {var expl = ' An error occurred: [Reason: ' + E.code + '] '; Console.error ( EXPL); alert (EXPL); Return } else {document.queryselector ('. Container '). style.visibility = ' hidden '; Document.queryselector ('. Warning '). style.visibility = ' visible '; Return }//Draw the video stream at the Canvas object function Drawvideoatcanvas (obj, context) {Window.setinterval (function () { Context.drawimage (obj, 0, 0); }, 60); The//The Canplaytype () function doesn ' t return True or FALSE. In recognition of how complex//formats are, the function returns a string: ' Probably ', ' maybe ' or ' a empty string. function Getaudiotype (Element) {if (Element.canplaytype) {if (Element.canplaytype (' Audio/mp4; codecs= "mp4a.40.5")!= = ') {return (' AAC ');} else if (element.Canplaytype (' Audio/ogg; codecs= ' Vorbis ')!== ') {return ("Ogg");} return false; }//ADD event listener for we video's play function in order to produce the canvas Video.addeventlistener ', function () {Drawvideoatcanvas (this, context);}, False); ADD event Listener for our button (to switch video filters) document.queryselector (' Button '). AddEventListener (' click ', function () {video.classname = '; canvas.classname = '; var effect = filters[ifilter++% filters.length];//Loop Throu GH the filters. if (effect) {video.classList.add (effect); Canvas.classList.add (effect); Document.queryselector ('. Container h3 '). InnerHTML = ' Current filter is: ' + effect; }}, False); }, False);

The

wants this article to help you with your JavaScript programming.