3 potential implementations
Manipulating DOM elements
This is how Loom does it.
Chrome extension manipulates DOM elements to add blur effect.
-
Pros :
Very easy to blur things out
Each element is highlighted by Loom
-
Cons :
Restricted to chrome extension
Restricted to DOM based elements
Cannot blur website which do not allow DOM manipulation
In case of writing password in a flow, you have to pause, apply blur and continue. Cannot blur after recording
Editing the completed video
How Camtasia does it
Just like we add zoom effect, we can add blur effect.
But here we need to be able to place the blur inside the video, making things more complicated.
-
Pros :
Not dependent on whether extension or desktop app
Anything can be blurred
Blur area can be customized
You can blur according to time stamps
Easier to blur when switching tabs, since it is timestamp based
We can provide more customization to the blur effect
-
Cons :
High engineering effort, will have to make the editing like a full video editor
More effort from user side to edit the video
Adding small adjustable blur windows
A new concept by me
Just like we have a speaker note window that pops up, we can click blur to add multiple blur windows which can be resizable and placed.
-
Pros :
Can be done with desktop application
Not restricted to websites, and no DOM manipulation required
Easy to place and resize
-
Cons :
Unsure about the engineering effort and challenges
Cannot blur after recording
DOM based
1 click blur
Can blur only an element at a time
Only webpages
Not saved in session
Drawing rectangles desktop app
Drag a rectangle
Can blur anything, any area
Is it possible to keep the rectangular area on a window level?