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

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

为了提高绩效，您可以：

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

＆＃13;

'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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

1 个答案: