1. Introduction and Software Environment#
During live streaming, certain scenarios often require the use of blur and key display functions. However, most foreign tutorials recommend paid options like streamFX with more features, while domestic tutorials are quite rough. Therefore, I plan to write a simple tutorial myself. I apologize for any issues that may arise—
The software used this time is:
- blur-filter 1.1.0
- input-overlay 5.0.4
- OBS Studio 29.1.3 Steam Version
Updated on 2023/8/29: The blur-filter seems to have been taken down due to copyright complaints. Here are the OneDrive links for the two plugins.
2. Installing and Configuring blur-filter#
-
Download blur-filter-1.1.0-win.zip from the GitHub Release page, and directly overwrite the extracted
obs-pluginsanddatafolders into the root directory of OBS Studio.
-
First, add a game capture in the sources, then create a new group. Right-click on the game capture, select
Copy, then right-click on the group and selectPaste (Reference), and drag the reference source into the group. The final effect is as shown:
-
Right-click on the group, select Filters, choose the Blur filter, and add the blur effect.
I prefer Gaussian blur, set the blur level to 6~8. -
After closing the filter window, select the group, hold down the ALT key, and use the mouse to adjust the window size to change the blurred area, and you're done.
3. Installing and Configuring input-overlay#
-
Download input-overlay-5.0.4-windows-x64.zip and input-overlay-5.0.4-presets.zip from the GitHub Release page. Extract the main
obs-plugins,io_client, anddatafolders directly into the root directory of OBS Studio, and extract the entire presets folder into the OBS root directory. -
It is important to note that many tutorials mention finding the
Input Overlayitem when adding sources. In fact, due to version updates and localization, the correct source name is输入叠加, which may lead many to believe that the installation has failed. -
Add a source, select Input Overlay, and first configure a keyboard. Choose
OBS Studio\input-overlay-5.0.4-presets\wasd-extended-numericand selectwasd-extended-numeric.pngas the keyboard image, and selectwasd-extended-numeric.jsonin the same path as the configuration file.
- Add a mouse in the same way. Choose
OBS Studio\input-overlay-5.0.4-presets\mouseand selectmouse.pngas the image, and selectmouse-arrow.jsonin the same directory as the configuration file. Adjust theMouse Sensitivityaccording to personal preference, checkUse Screen Center, and setCenter Horizontal OffsetandCenter Vertical Offsetto half of your monitor's width/height in pixels.
- Make simple adjustments to size and position, place it in a group, and the basic input overlay is created.
4. Bug Fixes and Simple Customization for Input Overlay#
During use, I found that the version of Input Overlay I used actually has many small issues, which can be easily modified—
- Pressing mouse side button 1 does not display Input Overlay.
It's quite simple; just change the code block for side button 1 inmouse-arrow.json.
{
"code": 5,
"id": "smb1",
"mapping": [
285,
1,
40,
62
],
"pos": [
0,
210
],
"type": 3, # Change 3 to 1
"z_level": 1
},
- The key settings in
wasd-extended-numeric.jsonare unreasonable.
You can refer to my improved key settings:
{
"default_height": 129,
"default_width": 157,
"elements": [
{
"code": 16,
"id": "q",
"mapping": [
1,
1,
157,
129
],
"pos": [
137,
133
],
"type": 1,
"z_level": 1
},
{
"code": 17,
"id": "w",
"mapping": [
161,
1,
157,
129
],
"pos": [
274,
133
],
"type": 1,
"z_level": 1
},
{
"code": 18,
"id": "e",
"mapping": [
321,
1,
157,
129
],
"pos": [
411,
133
],
"type": 1,
"z_level": 1
},
{
"code": 42,
"id": "shift",
"mapping": [
481,
1,
157,
129
],
"pos": [
0,
399
],
"type": 1,
"z_level": 1
},
{
"code": 30,
"id": "a",
"mapping": [
641,
1,
157,
129
],
"pos": [
137,
266
],
"type": 1,
"z_level": 1
},
{
"code": 31,
"id": "s",
"mapping": [
801,
1,
157,
129
],
"pos": [
274,
266
],
"type": 1,
"z_level": 1
},
{
"code": 32,
"id": "d",
"mapping": [
961,
1,
157,
129
],
"pos": [
411,
266
],
"type": 1,
"z_level": 1
},
{
"code": 56,
"id": "alt",
"mapping": [
961,
525,
157,
129
],
"pos": [
137,
532
],
"type": 1,
"z_level": 1
},
{
"code": 57,
"id": "space",
"mapping": [
1280,
1,
421,
129
],
"pos": [
271,
532
],
"type": 1,
"z_level": 1
},
{
"code": 15,
"id": "tab",
"mapping": [
1,
263,
157,
129
],
"pos": [
0,
133
],
"type": 1,
"z_level": 1
},
{
"code": 19,
"id": "r",
"mapping": [
161,
263,
157,
129
],
"pos": [
548,
133
],
"type": 1,
"z_level": 1
},
{
"code": 33,
"id": "f",
"mapping": [
321,
263,
157,
129
],
"pos": [
548,
266
],
"type": 1,
"z_level": 1
},
{
"code": 44,
"id": "z",
"mapping": [
481,
263,
157,
129
],
"pos": [
137,
399
],
"type": 1,
"z_level": 1
},
{
"code": 45,
"id": "x",
"mapping": [
641,
263,
157,
129
],
"pos": [
271,
399
],
"type": 1,
"z_level": 1
},
{
"code": 46,
"id": "c",
"mapping": [
801,
263,
157,
129
],
"pos": [
406,
399
],
"type": 1,
"z_level": 1
},
{
"code": 47,
"id": "v",
"mapping": [
961,
263,
157,
129
],
"pos": [
541,
399
],
"type": 1,
"z_level": 1
},
{
"code": 20,
"id": "t",
"mapping": [
1121,
263,
157,
129
],
"pos": [
688,
133
],
"type": 1,
"z_level": 1
},
{
"code": 34,
"id": "g",
"mapping": [
1281,
263,
157,
129
],
"pos": [
683,
266
],
"type": 1,
"z_level": 1
},
{
"code": 48,
"id": "b",
"mapping": [
1,
525,
157,
129
],
"pos": [
675,
399
],
"type": 1,
"z_level": 1
},
{
"code": 29,
"id": "ctrl",
"mapping": [
1121,
1,
157,
129
],
"pos": [
0,
532
],
"type": 1,
"z_level": 1
}
],
"flags": 0,
"overlay_height": 666,
"overlay_width": 865,
"space_h": -20,
"space_v": 5
}
The only issue is that the image itself does not include a Caps key, so there is no way to add it. The final effect is as shown:
- The mouse configuration arrow in
mouse-arrow.jsonis not centered, which affects the visual experience.
Similarly, change the arrow code block inmouse-arrow.json:
{
"id": "arrow",
"mapping": [
614,
1,
100,
100
],
"mouse_type": 1,
"pos": [
210 , # Change 210 to 195
235
],
"type": 9,
"z_level": 1
}
It is important to note that after all changes are saved, you need to delete the original input overlay and re-add it to see the changes.