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

HTML5 object

HTML5 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