javascript - 如何在移动浏览器上有效地模糊视频？

Question

我正在使用 CSS3 模糊一些将在移动浏览器上使用的视频。我最初的想法是将 .blur 类添加到 video 标签中，我的 .blur CSS 如下所示:

.blur{
    -webkit-filter: blur(125px);
    -moz-filter: blur(125px);
    -o-filter: blur(125px);
    -ms-filter: blur(125px);
    filter: blur(125px);
}

然后我发现当这个模糊类在移动浏览器上工作时，它变得非常缓慢和滞后......

有没有更好的方法可以在移动浏览器上对视频进行模糊处理？使用 JavaScript 或 CSS。

Answer 1

我不确定这是否一定有效，您可以尝试一下。继续在 Canvas 上绘制视频，在 Canvas 上应用模糊。

要提高性能，您可以:

• 降低 Canvas 上绘图的帧速率
• IMO，125px 是一个相当高的值，如果您的用户情况允许，可以尝试降低它
• 您可以编写自己的模糊算法，而不是使用 css 模糊，getImageData会给你图像数据数组，你可以操作它。我不确定您可以优化多少高斯模糊，但像素化可能是一个更便宜的过程(您的图像将显示为 block 而不是平滑)。

'use strict';

let video = document.createElement('video')
 ,  canvas = document.querySelector('canvas')
 ,  div = document.querySelector('#log')
 ,  frameRate = 10
 ,  ctx = canvas.getContext('2d')
 ,  log = msg => div.innerHTML += "<br>" + msg;
 
 video.autoplay = true;
 
 document.querySelector('button').onclick = () => navigator.mediaDevices.getUserMedia({video: true, audio:true})
 							.then(stream => {
                  video.srcObject = stream; 
                  setInterval(draw, 1000/frameRate);
              }).catch(log);

function draw(){
  canvas.height = video.videoHeight; 
  canvas.width= video.videoWidth; 
	ctx.drawImage(video, 0, 0);
}

canvas {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

<button >Start</button>
<canvas></canvas>
<div id='log'></div>

相同的代码 in fiddle在 chrome 上运行。