滤镜介绍
浏览器中设置视频滤镜使用的是CSS filter，不同浏览器中设置特效的关键字不一样，Chrome、Safari、Opera、Filefox等用的是-webkit-filter，IE使用的filter。(对于百分比的滤镜参数可以是百分比也可以是小数。)
| 滤镜 | 设置方式 | 说明 |
|---|---|---|
| 默认 | none | 默认值，没有效果 |
| 高斯模糊 | blur(px) | 给图像设置高斯模糊。设置屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。 |
| 明暗度 | brightness(%) | 如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。 |
| 对比度 | contrast(%) | 值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。 |
| 阴影 | drop-shadow(h-shadow v-shadow blur spread color) | 设置一个阴影效果，h-shadow(必须)设置阴影水平偏移量，为负时阴影出现在元素左边；v-shadow(必须)设置阴影水平偏移量，为负时阴影出现在元素上边；blur(可选)设置模糊度，值越大，越模糊，则阴影会变得更大更淡，不允许负值 若未设定，默认是0 (则阴影的边界很锐利)；spread(可选)设置阴影大小，正值会使阴影扩张和变大，负值会是阴影缩小，若未设定，默认是0 (阴影会与元素一样大小)；color(可选)设置颜色，若省略则阴影是透明的。 |
| 灰度 | grayscale(%) | 将视频图像转换为灰度图像，值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。 |
| 色相旋转 | hue-rotate(deg) | 给视频图像应用色相旋转。deg设定图像会被调整的色环角度值。值为0则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。 |
| 反转 | invert(%) | 反转视频图像，100%是完全反转。值为0%则无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。 |
| 透明度 | opacity(%) | 转化视频的透明程度。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间， 若值未设置，值默认是1。 |
| 饱和度 | saturate(%) | 转换视频饱和度，值为0%则是完全不饱和，值为100%则图像无变化。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。 |
| 深褐色 | sepia(%) | 将视频转换为深褐色，值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，若未设置，值默认是0； |
代码实现
首先通过nodejs搭建web服务器，搭建好后将服务启动。然后在public目录下新建一个filter目录，在filter目录下创建一个index.html文件，代码内容如下(各个滤镜效果的参数值是写死的，想看其他参数值的效果直接在代码中更改后刷新看效果)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webrtc设置视频滤镜</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<style>
.none {
-webkit-filter: none;
filter: none;
}
.blur {
-webkit-filter: blur(4px);
filter: blur(4px);
}
.brightness {
-webkit-filter: brightness(0.30);
filter: brightness(0.30);
}
.contrast {
-webkit-filter: contrast(180%);
filter: contrast(180%);
}
.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.huerotate {
-webkit-filter: hue-rotate(180deg);
filter: hue-rotate(180deg);
}
.invert {
-webkit-filter: invert(100%);
filter: invert(100%);
}
.opacity {
-webkit-filter: opacity(50%);
filter: opacity(50%);
}
.saturate {
-webkit-filter: saturate(7);
filter: saturate(7);
}
.sepia {
-webkit-filter: sepia(100%);
filter: sepia(100%);
}
.shadow {
-webkit-filter: drop-shadow(8px 8px 10px green);
filter: drop-shadow(8px 8px 10px green);
}
</style>
</head>
<body>
<!-- playsinline表示直接在浏览器内播放 -->
<video autoplay playsinline id="player"></video>
<div>
<label>滤镜:</label>
<select id="filter">
<option value="none">无</option>
<option value="blur">高斯模糊</option>
<option value="brightness">明暗度</option>
<option value="contrast">对比度</option>
<option value="grayscale">灰度</option>
<option value="huerotate">色相旋转</option>
<option value="invert">反转</option>
<option value="opacity">透明度</option>
<option value="saturate">饱和度</option>
<option value="sepia">深褐色</option>
<option value="shadow">阴影</option>
</select>
</div>
<script type="text/javascript" src="js/client.js"></script>
</body>
</html>
如果要使用多个滤镜，每个滤镜使用空格分隔，要注意不同的顺序会产生不同的效果。
// 同时使用多个滤镜示例
.myfilter {
-webkit-filter: contrast(200%) brightness(150%);
filter: contrast(200%) brightness(150%);
}
然后在filter目录下新建一个js目录，在js目录下创建一个client.js文件，代码内容如下：
'use strict'
const player = $("#player")[0];
const filterSelect = $("#filter")[0];
start();
// 选择不同的滤镜效果
filterSelect.onchange = function(){
player.className = filterSelect.value;
}
function start(){
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
console.log('不支采集音视频数据！');
}else{
// 采集音视频数据
var constrants = {
video:true,
audio:true
};
navigator.mediaDevices.getUserMedia(constrants).then(gotMediaStream).catch(handleError);
}
}
// 采集音视频数据成功时调用的方法
function gotMediaStream(stream){
player.srcObject = stream;
}
// 采集音视频数据失败时调用的方法
function handleError(err){
console.log(err.name+':'+err.message);
}
然后打开浏览器在地址栏输入https://192.168.20.242:8081/filter/index.html，如果是第一次运行，会弹出摄像头和麦克风的授权弹框，允许就可以了。通过下拉框选择不同的选项可以查看不同的滤镜效果。
网友评论