我们知道了如何使用WebRTC打开摄像头,可以截取视频帧并且用canvas显示出来。

本文将滤镜与视频结合。给视频加上一层滤镜。主要使用到的是filter属性。

canvas与滤镜

先来看filter与canvas的使用。先把canvas放好,显示一张本地的图片。

<canvas id="sample-canvas" style="width: 358px;height: 100%;"></canvas>

Image把图片读进来,然后给canvas来显示。为了演示方便,canvas的宽高和图片宽高是一致的。

const sampleCanvas = document.querySelector('#sample-canvas');
var img = new Image();
img.src = 'webrtc-fish.png'; // rustfisher.com pic
img.onload = function () {
sampleCanvas.getContext('2d').drawImage(img, 0, 0, sampleCanvas.width, sampleCanvas.height);
}

slider

Android中有SeekBar。在这里我们需要自定义一个slider。这里也可以根据实际需求,或者使用已有的滑动选择器。

/* 选择进度 */
.slider-container {
width: 100%;
display: flex;
justify-content: left;
align-items: center;
} /* 滑动选择器 */
.slider {
-webkit-appearance: none;
appearance: none;
width: 80%;
height: 100%;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
} .slider:hover {
opacity: 1;
} .slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
background: #0c23f7;
cursor: pointer;
} .slider::-moz-range-thumb {
width: 20px;
height: 20px;
background: #044caa;
cursor: pointer;
}

定义几种滤镜,准备使用。

  • Blur 效果是糊化
  • Grayscale 效果是灰度
  • Invert 效果是反转
  • Sepia 效果是深褐色
<select id="filter">
<option value="none">None</option>
<option value="blur">Blur</option>
<option value="grayscale">Grayscale</option>
<option value="invert">Invert</option>
<option value="sepia">Sepia</option>
</select>
<div class="slider-container">
<p id="slide-value" style="width: 10%; height: 100%;"></p>
<input type="range" min="1" max="100" value="10" class="slider" id="myRange">
</div>

选择器用了input元素,数值范围1~100。

canvas+filter

使用滤镜时,需要改变元素style的filter值。

blur的单位是px。其它可以使用%。把种类和数值拼接成字符串,作为filter的值。

const filterSelect = document.querySelector('select#filter');
filterSelect.onchange = function () {
changeFilter();
}; // 改变滤镜的值
function changeFilter() {
var filterValue = "" + filterSelect.value + "(" + slider.value + "%)";
if (filterSelect.value == "blur") {
filterValue = "" + filterSelect.value + "(" + slider.value + "px)";
} else if (filterSelect.value == "none") {
filterValue = "";
}
sampleCanvas.style.filter = filterValue; // 图片的滤镜
} slider.oninput = function () {
sliderValue.innerHTML = this.value;
changeFilter();
}

不同的效果预览如下

效果名 示例图
原图
blur
gray
invert
sepia

调整进度选择数值,可以得到看到效果加强/减弱的样子。

结合视频

有了上面的尝试,我们可以把filter加到video上试试。

首先还是引入webrtc的adapter。

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

网络不好的同学,也可以下载这个文件放在你的本地服务器上。比如

<script src="../js/adapter-latest.js" async></script>

放置video,button和canvas。video预览摄像头,canvas用来显示截取的图像。

<video playsinline autoplay></video>
<button id="start">打开摄像头</button>
<button id="snapshot">截取</button>
<canvas id="main"></canvas>

和前面的两篇文章类似,先来打开摄像头,然后把摄像头的流交给video

const snapshotButton = document.querySelector('button#snapshot');
const video = window.video = document.querySelector('video');
const canvas = window.canvas = document.querySelector('canvas#main');
canvas.width = 480;
canvas.height = 360; function startVideo() {
navigator.mediaDevices.getUserMedia(constraints).then(gotStream).catch(onError);
} function gotStream(stream) {
window.stream = stream;
video.srcObject = stream;
}

允许浏览器使用摄像头(mac可能还需要多允许一次权限)。

这次我们要更改video的filter。改变滤镜的种类时,把滤镜设置给canvas和video的style。

function changeFilter() {
var filterValue = "" + filterSelect.value + "(" + slider.value + "%)";
if (filterSelect.value == "blur") {
filterValue = "" + filterSelect.value + "(" + slider.value + "px)";
} else if (filterSelect.value == "none") {
filterValue = "";
}
sampleCanvas.style.filter = filterValue; // 图片的滤镜
canvas.style.filter = filterValue; // 图片的滤镜
video.style.filter = filterValue; // 视频预览的滤镜
}

值得注意的是,我们的滤镜是加在元素上的,并没有影响视频和图片。也就是说这是个附加的效果。

小结

本文将css滤镜的效果应用在video和canvas上。给视频和图片增加了丰富的效果。

预览

完整预览请参考 webrtc与css滤镜示例

原文链接

WebRTC与CSS滤镜(CSS filter)的更多相关文章

  1. css滤镜模糊效果filter和backdrop-filter

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS 滤镜(IE浏览器专属其他浏览器不支持)

    Filter 属性介绍: 设置或检索对象所应用的滤镜或滤镜集合.此属性仅作用于有布局的对象,如块对象.内联要素要使用该属性,必须先设定对象的 height 或 width 属性,或者设定 positi ...

  3. 你所不知道的 CSS 滤镜技巧与细节

    承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! OK,下面直接进入正文.本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE ...

  4. 运用HTML5+CSS3和CSS滤镜做的精美的登录界面

    原始出处http://chenjinfei.blog.51cto.com/2965201/774865 <!DOCTYPE HTML> <html> <head> ...

  5. 利用Js或Css滤镜实现IE6中PNG图片半透明效果 IE6PNG妥妥的

    接下来介绍几种PNG图片在IE6中不透明的解决办法 1.用自己的PNG,让IE6一边去吧 首先制作PNG图片的时候,另存为一个GIF图片,因为IE6是支持GIF图片透明,然后在css定义 .pngte ...

  6. CSS 滤镜技巧与细节

    本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货! 注意:ie不兼容 本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,话不多说,直接开车,语法如下: { ...

  7. 哀悼疫情,全站灰色如何实现,CSS滤镜一行代码实现

    庚子清明,以国家之名哀悼,以国家之名哀悼在新冠肺炎疫情中牺牲的烈士和逝世的同胞! 向抗疫英雄致敬! 今日打开各样的app,各大电商,爱奇艺都是灰色的 这里我也一直很好奇该功能,前端如何实现,了解过后发 ...

  8. 让less编译通过css滤镜

    写IE6 hack的时候,发现在less中直接写css滤镜是会报错的,不能编译通过. 解决方法为:用~“”把相关的css代码包裹起来,例如: _top:~"expression(docume ...

  9. 【css】css 背景色渐变兼容写法

    最近在项目中,有很多地方都用到了线性渐变,比如:表单提交按钮的背景,数据展示的标题背景等等,按照以前的做法是切 1px 图片然后 repeat-x.下面我将介绍如何用 css 来完成该效果. css3 ...

随机推荐

  1. Flutter随笔(二)——使用Flutter Web + Docker + Nginx打造一个简单的Web项目

    前言 Flutter作为一个跨平台UI框架,功能十分强大,仅用一套代码便能编译出Android.iOS.Web.windows.macOS.Windows.Linux等平台上的应用,各平台应用体验高度 ...

  2. Java(4)运算符及表达式

    作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15201675.html 博客主页:https://www.cnblogs.com/testero ...

  3. epoll实现快速ping

    概述 在VOIP的运营过程中,最常见的一类问题就是语音质量问题,网络间的丢包.延迟.抖动都会造成语音质量的体验下降. 当现网出现语音质量问题的时候,我们有没有工具能够快速的界定问题的边界,缩小排查的范 ...

  4. [Beta]the Agiles Scrum Meeting 10

    会议时间:2020.5.25 21:00 1.每个人的工作 今天已完成的工作 成员 已完成的工作 issue yjy 暂无 tq 暂无 wjx 实现创建.显示博客作业功能 增加博客作业功能 dzx 实 ...

  5. 混合开发框架Flutter

    Flutter开发简介与其他的混合开发的对比 为什么要使用Flutter? 跨平台技术简介 Hybrid技术简介 QT简介 Flutter简介 为什么要使用Flutter? Flutter有什么优势? ...

  6. 一张图彻底搞懂Spring循环依赖

    1 什么是循环依赖? 如下图所示: BeanA类依赖了BeanB类,同时BeanB类又依赖了BeanA类.这种依赖关系形成了一个闭环,我们把这种依赖关系就称之为循环依赖.同理,再如下图的情况: 上图中 ...

  7. 【行人惯性导航】关于行人导航中IMU位姿推导的知识点及相关代码

    IMU姿态惯性推导 最近从事行人惯性导航的研究,本人也是一个小白,其中看了很多文献,有很多个人思考很费时间的地方,撰写此随笔的目的不仅是给自己做一个笔记,也是给各位有需要的仁兄一点个人理解. 本文只关 ...

  8. C++常见STL介绍

    栈 :FILO 栈(stack)又名堆栈,它是一种线性表,是一个后进先出的数据结构. 使用时须加上头文件:#include<stack> 允许进行插入和删除操作的一端称为栈顶(top),另 ...

  9. 🏆【JVM深层系列】「云原生时代的Java虚拟机」针对于GraalVM的技术知识脉络的重塑和探究

    GraalVM 背景 新.旧编程语言的兴起躁动,说明必然有其需求动力所在,譬如互联网之于JavaScript.人工智能之于Python,微服务风潮之于Golang等等.大家都清楚不太可能有哪门语言能在 ...

  10. APP自动化之Hybrid自动化解决方案(七)

    基于UIAutomator+ChromeDriver模式(UIAutomator安卓原生引擎) 原理:native(原生)部分使用UIAutomator,webview部分使用ChromeDriver ...