css filter和getUserMedia的联合使用


Posted in HTML / CSS onFebruary 24, 2022

一、设置CSS3 filter(滤镜) 属性

filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。

blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;

grayscale(%) 将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

invert(%) 反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间,则是效果的线性乘子。 若值未设置,值默认是0。

sepia(%) 将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

.none {

    -webkit-filter: none;

    filter: none;

}



.blur {

    -webkit-filter: blur(3px);

    filter: blur(3px);

}



.grayscale {

    -webkit-filter: grayscale(1);

    filter: grayscale(1);

}



.invert {

    -webkit-filter: invert(1);

    filter: invert(1);

}



.sepia {

    -webkit-filter: sepia(1);

    filter: sepia(1);

}



button#snapshot {

    margin: 0 10px 25px 0;

    width: 110px;

}



video {

    object-fit: cover;

}

二、取元素

Document方法querySelector(), 返回Element文档中与指定选择器或选择器组匹配的第一个。如果未找到匹配项,null则返回。

匹配是使用文档节点的深度优先预序遍历完成的,从文档标记中的第一个元素开始,并按子节点数量的顺序迭代顺序节点。

const filterSelect = document.querySelector('select#filter');

const video = window.video = document.querySelector('video');

三、绑定change事件

  • 当元素的值发生改变时,会发生 onchange 事件。
  • 该事件类似于 oninput 事件。不同之处在于 oninput 事件在元素值改变后立即发生,而 onchange 在元素失去焦点而内容发生改变后发生。另一个区别是 onchange 事件也适用于 <select> 元素。
filterSelect.onchange = function() {

  video.className = filterSelect.value;

};

四、获取音视频轨道

  • MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可,媒体输入会产生一个MediaStream,里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道(来自硬件或者虚拟视频源,比如相机、视频采集设备和屏幕共享服务等等)、一个音频轨道(同样来自硬件或虚拟音频源,比如麦克风、A/D转换器等等),也可能是其它轨道类型。
  • 它返回一个 Promise对象,成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限,或者需要的媒体源不可用,promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。
navigator.mediaDevices.getUserMedia({

    audio: false,

    video: true

}).then(handleSuccess).catch(handleError);



function handleSuccess(stream) {

  video.srcObject = stream;

}



function handleError(error) {

  console.log('navigator.MediaDevices.getUserMedia error: ', error.message, error.name);

}

五、HTML

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" href="./index.css">

</head>



<body>

<video playsinline autoplay></video>

<label for="filter">Filter: </label>

<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>



<script src="./index.js"></script>

</body>

</html>

效果展示:

 css filter和getUserMedia的联合使用

 css filter和getUserMedia的联合使用

 css filter和getUserMedia的联合使用

i css filter和getUserMedia的联合使用

到此这篇关于 css filter和getUserMedia的联合使用(web技术分享)的文章就介绍到这了,更多相关 css filter和getUserMedia的联合使用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
CSS3 display知识详解
Nov 25 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
Dec 26 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
Canvas与图片压缩的示例代码
Nov 28 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
css3中2D转换之有趣的transform形变效果
css3带你实现3D转换效果
bootstrapv4轮播图去除两侧阴影及线框的方法
企业开发CSS命名BEM代码规范实践
CSS3实现360度循环旋转功能
CSS实现九宫格布局(自适应)的示例代码
Feb 12 #HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 #HTML / CSS
You might like
WordPress判断用户是否登录的代码
2011/03/17 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
js刷新框架子页面的七种方法代码
2008/11/20 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
javascript打印输出json实例
2013/11/11 Javascript
Bootstrap自定义文件上传下载样式
2016/05/26 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
input type=file 选择图片并且实现预览效果的实例
2017/10/26 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
python3新特性函数注释Function Annotations用法分析
2016/07/28 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
药学专业毕业生求职信
2013/10/20 职场文书
个人实习生的自我评价
2014/02/16 职场文书
餐厅采购员岗位职责
2014/03/06 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
2015年上半年信访工作总结
2015/03/30 职场文书
Nginx中break与last的区别详析
2021/03/31 Servers
Java中try catch处理异常示例
2021/12/06 Java/Android
浅析python中特殊文件和特殊函数
2022/02/24 Python
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server