我們知道了如何使用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();
}
不同的效果預覽如下
| 效果名 | 示例圖 |
|---|---|
| 原圖 |  webrtc-fish.png
|
| blur |  blur.png
|
| gray |  gray.png
|
| invert |  invert.png
|
| sepia |  sepia.png
|
調整進度選擇數值，可以得到看到效果加強/減弱的樣子。
結合視頻
有了上面的嘗試，我們可以把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濾鏡示例
