How to capture videos from cameras using filters in js + HTML5

How to capture videos from cameras using filters in js + HTML5

This article describes how to capture videos from cameras using filters in js + HTML5. Share it with you for your reference. The details are as follows:

Index.html page:

?

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

<Div class = "warning"> <H2> Native web camera streaming (getUserMedia) is not supported in this browser. </Div> <Div class = "container"> <H3> Current filter is: None <Button> Click here to change video filter </button> <Div style = "clear: both"> </div> <Div class = "col"> <H2> HTML5 <video> object <Video> </video> </Div> <Div class = "col"> <H2> HTML5 <canvas> object <Canvas width = "600" height = "450"> </canvas> </Div> </Div>

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 62 63 64 65 66 67 68 69 70

. Grayscale { -Webkit-filter: grayscale (1 ); -Moz-filter: grayscale (1 ); -O-filter: grayscale (1 ); -Ms-filter: grayscale (1 ); Filter: grayscale (1 ); } . Sepia { -Webkit-filter: sepia (0.8 ); -Moz-filter: sepia (0.8 ); -O-filter: sepia (0.8 ); -Ms-filter: sepia (0.8 ); Filter: sepia (0.8 ); } . Blur { -Webkit-filter: blur (3px ); -Moz-filter: blur (3px ); -O-filter: blur (3px ); -Ms-filter: blur (3px ); Filter: blur (3px ); } . Brightness { -Webkit-filter: brightness (0.3 ); -Moz-filter: brightness (0.3 ); -O-filter: brightness (0.3 ); -Ms-filter: brightness (0.3 ); Filter: brightness (0.3 ); } . Contrast { -Webkit-filter: contrast (0.5 ); -Moz-filter: contrast (0.5 ); -O-filter: contrast (0.5 ); -Ms-filter: contrast (0.5 ); Filter: contrast (0.5 ); } . Hue-rotate { -Webkit-filter: hue-rotate (90deg ); -Moz-filter: hue-rotate (90deg ); -O-filter: hue-rotate (90deg ); -Ms-filter: hue-rotate (90deg ); Filter: hue-rotate (90deg ); } . Hue-rotate2 { -Webkit-filter: hue-rotate (180deg ); -Moz-filter: hue-rotate (180deg ); -O-filter: hue-rotate (180deg ); -Ms-filter: hue-rotate (180deg ); Filter: hue-rotate (180deg ); } . Hue-rotate3 { -Webkit-filter: hue-rotate (270deg ); -Moz-filter: hue-rotate (270deg ); -O-filter: hue-rotate (270deg ); -Ms-filter: hue-rotate (270deg ); Filter: hue-rotate (270deg ); } . Saturate { -Webkit-filter: saturate (10 ); -Moz-filter: saturate (10 ); -O-filter: saturate (10 ); -Ms-filter: saturate (10 ); Filter: saturate (10 ); } . Invert { -Webkit-filter: invert (1 ); -Moz-filter: invert (1 ); -O-filter: invert (1 ); -Ms-filter: invert (1 ); Filter: invert (1 ); }

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 43 44 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 84 85 86 87 88

// Main initialization Document. addEventListener ('domainloaded', function (){ // Global variables Var video = document. 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 ', 'Saturate ', '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. URLs | window. msURL; If (navigator. getUserMedia ){ // Evke getUserMedia function Navigator. getUserMedia ({video: true, audio: true}, onSuccessCallback, onErrorCallback ); Function onSuccessCallback (stream ){ // Use the stream from the camera as the source of the video element Video. src = window. 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 ('. iner'). style. visibility = 'den den '; Document. querySelector ('. warning'). style. visibility = 'visable '; Return; } // Draw the video stream at the canvas object Function drawVideoAtCanvas (obj, context ){ Window. setInterval (function (){ Context. drawImage (obj, 0, 0 ); }, 60 ); } // The canPlayType () function doesn't return true or false. In recognition of how complex // Formats are, the function returns a string: 'baby', 'maybe' or an 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 our video's Play function in order to produce video at the canvas Video. addEventListener ('play', 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 through the filters. If (effect ){ Video. classList. add (effect ); Canvas. classList. add (effect ); Document. querySelector ('. iner h3'). innerHTML = 'current filter is: '+ effect; } }, False ); }, False );

I hope this article will help you design javascript programs.