CODEWITHSUNDEEP
javascriptcsshtmlvideo-streamingwebrtc
Ev3rlasting
Ev3rlasting

Reputation: 2495

How to blur a video efficiently on mobile browsers?

I am using CSS3 to blur some video that will be used on mobile browsers. My initial idea is to add a .blur class into video tag and my .blur CSS looks like:

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

I then found out when this blur class working on mobile browsers, it became EXTREMELY slow and lagged...

Are there any better ways to blur a video on mobile browsers? Either use JavaScript or CSS.

Upvotes: 1

Views: 901

Answers (1)

mido
mido

Reputation: 25034

I am not sure if this would definitely work, you can give it a try. Keep drawing the video on a canvas apply blur on the canvas.

to improve performance, you could:

  • reduce the frame rate of the drawing onto the canvas
  • IMO, 125px is quite a high value, can try reducing it if your user case allows
  • Instead of using css blur, you can write your own blur algorithm, getImageData would give you the image data array, which you can manipulate. I am not sure how much you can optimize Gaussian blur, but pixelization might be a cheaper process( your image ll appear as blocks instead of being smooth). 

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

Same code in fiddle to run on chrome.

Upvotes: 2

Related Questions