html5视频抓取,js+HTML5基于过滤器从摄像头中捕获视频的方法

本文实例讲述了js+HTML5基于过滤器从摄像头中捕获视频的方法。分享给大家供大家参考。具体如下：

index.html页面：

Native web camera streaming (getUserMedia) is not supported in this browser.

Current filter is: None

Click here to change video filter

HTML5 <video> object

HTML5 <canvas> object

style.css文件：

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

// 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;

// 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 canPlayType() function doesn't return true or false. In recognition of how complex

// formats are, the function returns a string: 'probably', '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('.container h3').innerHTML = 'Current filter is: ' + effect;

}

}, false);

}, false);

希望本文所述对大家的javascript程序设计有所帮助。