WebRTC与CSS滤镜(CSS filter)

举报
AnRFDev 发表于 2021/11/29 12:14:35 2021/11/29
【摘要】 我们知道了如何使用WebRTC打开摄像头,可以截取视频帧并且用canvas显示出来。本文将滤镜与视频结合。给视频加上一层滤镜。主要使用到的是filter属性。 canvas与滤镜先来看filter与canvas的使用。先把canvas放好,显示一张本地的图片。<canvas id="sample-canvas" style="width: 358px;height: 100%;"></can...

我们知道了如何使用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滤镜示例

https://an.rustfisher.com/webrtc/web-samples/css-filters/css-filter.html

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200