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和HTML5的支持状况
Oct 31 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 HTML / CSS
解决H5的a标签的download属性下载service上的文件出现跨域问题
Jul 16 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
Jan 30 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
如何避免常见的6种HTML5错误用法
Nov 06 HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 HTML / CSS
详解CSS不定宽溢出文本适配滚动
May 24 HTML / CSS
基于HTML十秒做出淘宝页面
Oct 24 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
超级好用的一个php上传图片类(随机名,缩略图,加水印)
2010/06/30 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
PHP实现通过文本文件统计页面访问量功能示例
2019/02/13 PHP
Thinkphp5框架中引入Markdown编辑器操作示例
2020/06/03 PHP
关于js数组去重的问题小结
2014/01/24 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
详解使用PM2管理nodejs进程
2017/10/24 NodeJs
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
python 中split 和 strip的实例详解
2017/07/12 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
使用numpngw和matplotlib生成png动画的示例代码
2021/01/24 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
网络安全方面的面试题
2016/01/07 面试题
印刷工程专业应届生求职信
2013/09/29 职场文书
同事打架检讨书
2014/02/04 职场文书
人事部岗位职责范本
2014/03/05 职场文书
企业员工集体活动方案
2014/08/17 职场文书
公司证明怎么写
2014/09/22 职场文书
在宿舍喝酒的检讨书
2014/09/28 职场文书
大学生见习总结报告
2015/06/24 职场文书
Python学习开发之图形用户界面详解
2021/08/23 Python
用Python爬取英雄联盟的皮肤详细示例
2021/12/06 Python
MySQL数据库实验之 触发器和存储过程
2022/06/21 MySQL