css filter和getUserMedia的聯合使用
51CTO博客 發布時間：2022-02-23 10:23:57 作者：anyRTC 
我要評論
我要評論這篇文章主要分享了web技術分享的 css filter和getUserMedia的聯合使用方法，實現的第一步設置CSS3 filter(濾鏡) 屬性，文章內容詳細，具有一定的參考價值，需要的小伙伴可以參考一下，希望對你有所幫助
一、設置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>
效果展示：
i
到此這篇關于 css filter和getUserMedia的聯合使用(web技術分享)的文章就介紹到這了,更多相關 css filter和getUserMedia的聯合使用內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
css3中通過transition屬性可以實現一些簡單的動畫過渡效果，今天通過本文給大家介紹下css3中transition屬性的示例代碼，感興趣的朋友跟隨小編一起看看吧2022-02-18- 這篇文章主要介紹了在CSS中使用when/else的方法,關于使用 @if 還是 @when 的問題也存在一些爭議，怕 @if會與 Sass 沖突，還有一個建議是用 @where 來代替，具體內容詳情跟2021-12-15
最新評論