Rank: Advanced Member
Groups: Registered
Joined: 1/25/2019(UTC) Posts: 303  Thanks: 17 times
Was thanked: 79 time(s) in 60 post(s)
|
Hi there, I have adapted the code from nicosman a bit and tested it from various platforms. The problem is with modern browsers, which do not allow mixed content. Mixed content means that insecure commands are sent from a secure website. Since the WEB API can only be accessed via HTTP and not via HTTPS, Firefox for example blocks the transfer with the error message "mixed-content" blocked. In the Firefox settings you can set the entry "security.mixed_content.block_active_content" to false with "about:config", then the program runs also from a secure web server. With Chrome, you can certainly set this setting as well. But if the HTML file is started locally, it works anyway, without mixed content error. With the setting mixed_content to false in Firefox, the custom script works also from my secure webserver on desktop Mac/PC's, but not on IOS devices. By the way, the error can be viewed in the browser console. You open the console in the browser with CTRL-SHIFT-J Probably the code is not very elegant, but it works :-) Mark the code, paste it into a empty notepad window and save it as control.html or anyothername.html. you can run it then in your browser. EDITED, 25.3.23 I have extended the script to 8 buttons and commented it out a bit better, the little dot in the upper left is a checkbox which allows to see the SendString. Code:
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<script>
// be aware that with Mix=0 the output switches,
// so it would be better to give the monitor control a separate mix output :-) e.g. Mix =1
// works also from forwarded public ip's -> TESTED
// declare vMix IP , if yout IP is a Public Adress, the port 8088 must be open or forwarded.
// settings in vMix must allow access from external,
// -vMix > settings > web controller > allow software.../ API / etc.
// Mark the code, paste it into a empty notepad window and save it as control.html
// or anyothername.html. you can run it then in your browser.
// the tiny little dot in the upper corner is a checkbox, which allows to see the sendString
window.IP = "192.168.10.102";
// declare buttontext, one per button
// if you want to take Program, add Program as Input and take the corresponded Number
window.btn1 = "K1";
window.btn2 = "K2";
window.btn3 = "K3";
window.btn4 = "K4";
window.btn5 = "K5";
window.btn6 = "K6";
window.btn7 = "K7";
window.btn8 = "PGM";
// declare vMix function, one per button, here Input 1-4 on MIX2
// Mix=0 is PGM/MIX1/Output
// Mix=1 is Mix2
// Mix=2 is Mix3 etc.
// You can also use a part of the buttons to switch another mix, e.g. just change Mix=1 to Mix=2
window.str1 = "Function=ActiveInput&Input=1&Mix=0";
window.str2 = "Function=ActiveInput&Input=2&Mix=0";
window.str3 = "Function=ActiveInput&Input=3&Mix=0";
window.str4 = "Function=ActiveInput&Input=4&Mix=0";
window.str5 = "Function=ActiveInput&Input=5&Mix=0";
window.str6 = "Function=ActiveInput&Input=6&Mix=0";
window.str7 = "Function=ActiveInput&Input=7&Mix=0";
window.str8 = "Function=ActiveInput&Input=8&Mix=0";
//---------no changes below here, only if you decide to add or delete buttons --------------
//here the first button is selected at the start of the page (autostart)
window.onload = function () {
document.getElementById("btn1").click(); };
</script>
<style>
button {
background-color:lightgray;
border-color:black;
color:black;
margin-top:30px;
margin-left:20px;
width: 200px;
height: 100px ;
font-size: 24px ;
margin-right: 0px;
}
h1 {
font-size: 2em;
color: beige;
font-family: Arial;
}
h2 {
font-size: 5em;
color: red;
font-family: Arial;
}
p {
font-size: 1em;
color: lightgray;
font-family: Arial;
}
input.smallCheckbox {
width: 7px;
height:7px;
}
</style>
<script type="text/javascript">
//script for getting checkbox result, if clicked it shows the vmix command onscreen
function ShowHideDiv(chkvMixCMD) {
var dvvMixCMD = document.getElementById("dvvMixCMD");
dvvMixCMD.style.display = chkvMixCMD.checked ? "block" : "none";
}
</script>
<script>
//this function sends a command to vMix and takes 3 variables, text, vMix-Cmd and ID
//text variable is for displaying which source is choosen
//vMix variable is the vMix function
//ID variable for button (1-x)
//very simple send function, no error handling
function send2vMix(text,vMix,id) {
//writes the variable text into TAB
document.title = text;
//opens HTTPrequest and sends the vMix Function, defined above as variables
const request = new XMLHttpRequest();
request.addEventListener("load", requestListener);
request.open("GET", "http://" + IP +":8088/api/?" + vMix);
request.send();
//here all colors are reset
document.getElementById("btn1").style.backgroundColor = "beige";
document.getElementById("btn2").style.backgroundColor = "beige";
document.getElementById("btn3").style.backgroundColor = "beige";
document.getElementById("btn4").style.backgroundColor = "beige";
document.getElementById("btn5").style.backgroundColor = "beige";
document.getElementById("btn6").style.backgroundColor = "beige";
document.getElementById("btn7").style.backgroundColor = "beige";
document.getElementById("btn8").style.backgroundColor = "beige";
//here button texts are written from the variables at the beginning
document.getElementById('btn1').innerHTML = btn1;
document.getElementById('btn2').innerHTML = btn2;
document.getElementById('btn3').innerHTML = btn3;
document.getElementById('btn4').innerHTML = btn4;
document.getElementById('btn5').innerHTML = btn5;
document.getElementById('btn6').innerHTML = btn6;
document.getElementById('btn7').innerHTML = btn7;
document.getElementById('btn8').innerHTML = btn8;
//here the active button turns red
document.getElementById("btn"+id).style.backgroundColor = "red";
//here the sendstring is going into the textvariable for displaying on screen, if checkbox is checked
document.getElementById("myText1").innerHTML = ' '+"http://" + IP +":8088/api/?" + vMix;
}
//writing vmix response from API in the console (open with CTRL-SHIFT-J)
function requestListener() {
console.log(this.responseText);
}
</script>
<body>
<body bgcolor='teal'>
<label for="chkvMixCMD">
<input type="checkbox" class="smallCheckbox" id="chkvMixCMD" onclick="ShowHideDiv(this)" />
</label>
<H1> Monitor Control</H1>
<button id="btn1" onclick="send2vMix(' Input '+btn1+' active', str1,'1')">Input1</button>
<button id="btn2" onclick="send2vMix(' Input '+btn2+' active', str2,'2')">Input2</button>
<button id="btn3" onclick="send2vMix(' Input '+btn3+' active', str3,'3')">Input3</button>
<button id="btn4" onclick="send2vMix(' Input '+btn4+' active', str4,'4')">Input4</button>
<button id="btn5" onclick="send2vMix(' Input '+btn5+' active', str5,'5')">Input5</button>
<button id="btn6" onclick="send2vMix(' Input '+btn6+' active', str6,'6')">Input6</button>
<button id="btn7" onclick="send2vMix(' Input '+btn7+' active', str7,'7')">Input7</button>
<button id="btn8" onclick="send2vMix(' Input '+btn8+' active', str8,'8')">Input8</button>
<p></p>
<div id="dvvMixCMD" style="display: none">
<p id="myText1" ></p>
</div>
</body>
</html>
|
 2 users thanked Peter1000 for this useful post.
|
|
