基于过滤器的摄像机视频捕捉方法

本文介绍了一种基于过滤器的摄像头捕捉视频的方法，供大家参考：

index.html页：
本地网络摄像机流（getUserMedia）是不是在这个浏览器支持。
当前过滤器是：无
点击这里更改视频过滤器
HTML5的对象
HTML5的对象

style.css文件：
灰度{。
Webkit过滤器：灰度（1）；
-moz过滤器：灰度（1）；
- o-filter：灰度（1）；
- MS过滤器：灰度（1）；
滤镜：灰度（1）；
}
乌贼{。
Webkit过滤器：乌贼（0.8）；
-moz过滤器：乌贼（0.8）；
- o-filter：乌贼（0.8）；
MS过滤器：乌贼（0.8）；
过滤器：乌贼（0.8）；
}
模糊{。
WebKit的滤波器：模糊（3px）；
-moz滤波器：模糊（3px）；
- o-filter：模糊（3px）；
MS滤波器：模糊（3px）；
滤波器：模糊（3px）；
}
亮度{。
Webkit过滤器：亮度（0.3）；
-moz过滤器：亮度（0.3）；
- o-filter：亮度（0.3）；
- MS滤波器：亮度（0.3）；
滤镜：亮度（0.3）；
}
对比{。
Webkit过滤器：对比（0.5）；
-moz过滤器：对比（0.5）；
- o-filter：对比（0.5）；
- MS滤波器：对比度（0.5）；
过滤器：对比度（0.5）；
}
色相旋转{
Webkit过滤器：色相旋转（90度）；
-moz过滤器：色相旋转（90度）；
- o-filter：色相旋转（90度）；
MS过滤器：色相旋转（90度）；
过滤器：色相旋转（90度）；
}
hue-rotate2 {。
Webkit过滤器：色相旋转（180deg）；
-moz过滤器：色相旋转（180deg）；
- o-filter：色相旋转（180deg）；
MS过滤器：色相旋转（180deg）；
过滤器：色相旋转（180deg）；
}
hue-rotate3 {。
Webkit过滤器：色相旋转（270deg）；
-moz过滤器：色相旋转（270deg）；
- o-filter：色相旋转（270deg）；
MS过滤器：色相旋转（270deg）；
过滤器：色相旋转（270deg）；
}
饱和{。
Webkit过滤器：饱和（10）；
-moz过滤器：饱和（10）；
- o-filter：饱和（10）；
- MS过滤器：饱和（10）；
过滤器：饱和（10）；
}
倒置{。
Webkit过滤器：倒置（1）；
-moz过滤器：倒置（1）；
- o-filter：倒置（1）；
- MS滤波器：倒置（1）；
滤镜：反转（1）；
}

ｓｃｒｉｐｔ.js文件：
主 /初始化
Document.addEventListener（'domcontentloaded，函数（）{（）{
全局变量
VaR的视频= document.queryselector（'video）；
VaR的音频，audiotype；
VaR的画布document.queryselector（'canvas）；
VaR上下文= canvas.getcontext（二维的）；
视频过滤器自定义
VaR IFilter = 0；
var筛选器= {
灰度，
乌贼，
模糊，
亮度，
'对比'，
色相旋转，
hue-rotate2，
hue-rotate3，
饱和，
倒置，
'无'
}；
获得视频流从 /相机getUserMedia
navigator.getusermedia = navigator.getusermedia navigator.webkitgetusermedia | | | |
navigator.mozgetusermedia navigator.msgetusermedia | |；
window.url = window.url window.webkiturl window.mozurl window.msurl | | | | | |；
如果（导航仪。getUserMedia）{
getUserMedia功能 / /唤起
navigator.getusermedia（{视频：真的，音频：true}，onsuccesscallback，onerrorcallback）；
功能onsuccesscallback（流）{
使用来自摄像机的流作为视频元素的源
video.src = window.url.createobjecturl（流）| |流；
/ /自动播放
Video.play（）；
HTML5音频
音频=新音频（）；
audiotype = getaudiotype（音频）；
如果（audiotype）{
audio.src = 'polaroid + audiotype；
Audio.play（）；
}
}
错误 /显示
功能onerrorcallback（e）{
一个错误：发生VaR、= {原因：+ e.code +}；
Console.error (expl);
警报（解释）；
返回；
}
{人}
document.queryselector（'。容器）。style.visibility =隐藏；
document.queryselector（警告）。style.visibility = 'visible；
返回；
}
在画布对象中绘制视频流
功能drawvideoatcanvas（obj，上下文）{
Window.setInterval（function（）{（）
context.drawimage（obj，0, 0）；
}，60）；
}
的canplaytype（功能）/不返回真或假。认识到如何复杂
功能 / /格式，返回一个字符串：'probably '，或者'或空字符串。
功能getaudiotype（元）{
如果（元。canplaytype）{
如果（element.canplaytype（'audio / MP4；编解码器=MP4A。40.5 ）！{
返回（'aac）；
否则如果}（element.canplaytype（'audio / OGG；编解码器=Vorbis ）！{
返回（OGG ）；
}
}
返回false；
}
为我们的视频的播放功能添加事件监听器，以便在画布上生成视频。
Video.addEventListener（扮演的功能（）{（）{
DrawVideoAtCanvas（这方面）；
}，假）；
为我们的按钮添加事件监听器（切换视频过滤器）
document.queryselector（按钮）。AddEventListener（听到咔哒声，函数（）{（）{
video.classname =；
canvas.classname =；
VaR效果=过滤器{ IFilter +过滤器。长度} /环通%；过滤器。
如果（效果）{
video.classlist.add（效果）；
Canvas.classList.add（效应）；
document.queryselector（'。集装箱H3）.innerHTML =当前过滤器：+效果；
}
}，假）；
}，假）；

希望本文能对大家的javaｓｃｒｉｐｔ程序设计有所帮助。