js+HTML5基於過濾器從攝像頭中捕獲視頻的方法

 　　本文實例講述了js+HTML5基於過濾器從攝像頭中捕獲視頻的方法。分享給大家供大家參考。具體如下：

　　index.html頁面：

　　?

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.</h2> </div> <div class="container"> <h3>Current filter is: None</h3> <button>Click here to change video filter</button> <div style="clear:both"></div> <div class="col"> <h2>HTML5 <video> object</h2> <video></video> </div> <div class="col"> <h2>HTML5 <canvas> object</h2> <canvas width="600" height="450"></canvas> </div> </div>

　　style.css文件：

　　?

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 文件：

　　?

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('DOMContentLoaded', 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.mozURL || window.msURL; if (navigator.getUserMedia) { // Evoke 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;