js+html5基于过滤器从摄像头中捕捉视频的要领

来源: 电脑维修教程 阅读:     发表时间:

js+html5基于过滤器从摄像头中捕捉视频的要领,涉及javascript基于html5元素操纵多媒体的使用技巧,需要的伴侣可以参考下 本文实例讲述了js+html5基于过滤器从

js+html5基于过滤器从摄像头中捕捉视频的要领,涉及javascript基于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

html5object

html5object

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措施设计有所帮手。

电脑维修视频教程

以上是:解决js+html5基于过滤器从摄像头中捕捉视频的要领问题的详细资料教程