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

Question

我正在使用 CSS3 模糊一些将在移动浏览器上使用的视频。我最初的想法是将 .blur class 添加到 video 标签中，我的 .blur CSS 看起来像：

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

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

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

Answer 1

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

要提高性能，您可以：

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

'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>

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

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

How to blur a video efficiently on mobile browsers?

html

javascript

css

video-streaming

webrtc