How To Trigger an OBS Hotkey from HTML?

C

ContentDeveloper

Member
I am using a highly customized HTML/Javascript/CSS solution as a scene switcher.
The scene buttons always switch to the scene when mouse-clicked.
I can get around that but using hotkey assignments.

However, I also want to employ the use of an iPad connected to my computer as an extra monitor (using Duet).
In this scenario, touching some buttons cause scene changes, where I only wish to trigger a hotkey.

So, I am hoping there is a way to "send keys" or something, from the HTML page, so I make the button a simple button as opposed to scene-switch button.

Thoughts?
 
C

ContentDeveloper

Member
Through a lot of research/trial/error, I found an example posted by @Reaby, on using a Javascript function to send a "TriggerHotkeyBySequence" command to OBS, triggered by an HTML button.

For my scenario, this is what I got working by using an onclick to call a this Javascript function from an HTML button, which is using a button image that is almost completely transparent, and is positioned on top of the actual scene switch, keeping the scene from being actually switched to. Instead, the overlaid button, when mouse clicked, or touched on an touchscreen, or the keypressed using the assigned kybd shortcut, will trigger the desired effect -- toggle the webcam source on/off for all the scenes that can have the webcam on them.

The HTMLbutton code (this :
Code: 
<div style="position:absolute; z-index:100; margin-left:270px; margin-top:34px;">
<button style="width:56px; height:56px; border:none; background-color:#fff; opacity:0.1; padding:0 0 0 0;" onclick="toggleWebcam()">
<img src="images/switch_blank_2pct_transparent.png" alt="" width="56" height="56"/>
</button>
</div>

The Javascript function:
Code: 
function toggleWebcam() {
    obs.send("TriggerHotkeyBySequence",    
        {"keyId": "OBS_KEY_NUMASTERISK", 
            "keyModifiers": 
                {"shift": true, 
                 "control": true
                }
        });
}


Hope this helps someone else!!
 
I

ivanello

New Member
I've tried your script to make the scene to switch but on my side is not working, when I press button get "Uncaught ReferenceError: obs is not defined".
Does this function need to have Websocket installed?
The html file runs on local xampp server where OBS is running.
Can you kindly give me a Help?
Best
Ivano
 
You must log in or register to reply here.
Top