Rank: Advanced Member
Groups: Registered
Joined: 1/25/2019(UTC) Posts: 284  Thanks: 16 times
Was thanked: 73 time(s) in 54 post(s)
|
I am reposting this code here again as I suspect some users may well need this. The basic idea comes from NICOSMAN, also member from this forum. (thanks for this inspiration) NOTE: in local networks this script works without any restrictions on any device, as long it can run a local html file. if you put this script on your local NAS webserver, it runs from any device, e.g. also mobile phones, tablets etc. It is a short HTML code, which simply displays some buttons in the browser, with which any vMix command can be executed. Like the webcontroller of vMix, but it only shows exactly what you allow or want. A basic knowledge about vMix API is necessary to change the commands. Just highlight the code, copy it into Notepad or any other text editor, edit to your local IP, adapt the vmix commands to your needs and save it as "something.html" (without the quotes, something stands for the name you chose) and run it in your browser. in the vMix Settings >WEB CONTROLLER all necessary accesses must be allowed (allow external software... /API etc.) Since vMix only works over unsecured HTTP, modern browsers will generate an error message, mixed content error, if you run this short HTML script on a secured web server. 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. The original topic is hereProbably the code is not very elegant, but it works :-)  monitorcontrol.JPG (44kb) downloaded 5 time(s).the code is also somewhat described :-) 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 producer 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.25.55";
// 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-8 on MIX0
// 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 needed, only if you decide to add or delete buttons or layout --------------
//(autostart) here the first button is selected, at the start of the page
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>
<!--Here the onscreentext, checkbox and the buttons are created -->
<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>
I have installed the script on my secure internet server and tested it successfully. On desktop PC's /Mac's it works if you explicitly allow mixed content in the used browser, but it does not work on IOS devices as their browsers always block mixed content. I also asked vMix support if there is an option to send API commands over HTTPS, but was referred to a feature request. Unfortunately my WEB and HTML knowledge is very modest, so there may be other options to work around this problem.
|
 2 users thanked Peter1000 for this useful post.
|
|
