logo

Live Production Software Forums

www.vmix.com

Welcome Guest! To enable all features please Login or Register.

Notification

Icon
Error
Trigger Scripts via Web Control or from external html page - easiest way to manual start scripts? how with html-buttons
Options
Go to last post Go to first unread
Previous Topic Next Topic
Medientechnik06  
#1 Posted : 2 years ago
Medientechnik06

Rank: Newbie

Groups: Registered
Joined: 2/1/2021(UTC)
Posts: 7
Germany
Location: Germersheim
Hey there,

i've got one simple project with some scripts. As the show itself is only online meeting filming and the stream (repeating dates) will be performed on different machines, i don't want to customize the controls too much, so i don't have to configure companion, shortcus etc on every machine (and i don't want to touch the local settings either).

So first i think it's a pitty you can't run scripts from the web control. Web control is a great thing, would be greater if you could see inputs by name and have the ability to run a script.

If i just put the api-string in my broswer, i can run that script.
Exmaple:

http://127.0.0.1:8088/api/?Function=ScriptStart&Value=Notfunk_Streamstart

But if i pack it html button, string gets cut at the question mark.

so i tried around with some js (that i cant code well), the string then seems complete, but isn't perfomred.

Quote:
<script type="text/javascript">
function submit() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
alert(xhr.response);
}
}
xhr.open('get', 'http://127.0.0.1:8088/api/?Function=ScriptStart&Value=Notfunk_Streamstart', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send();
}

</script>
<input type="submit" value="Start" onclick="submit()">


Any one here with some more web programming experience that can give me a template for such a button?

I'd like to build me a simple 3-Button-html-page that i can carry with my project.

Kind regards
Jens
Back to top

Wanna join the discussion?! Login to your vMix Forums forum account, or Register a new forum account.
Back to top  
nikosman88  
#2 Posted : 2 years ago
nikosman88

Rank: Advanced Member

Groups: Registered
Joined: 12/24/2021(UTC)
Posts: 629
Greece
Location: athens

Thanks: 152 times
Was thanked: 84 time(s) in 80 post(s)
Hello. If i understand well what you want do. Try this code.
Code:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>My Button</title>
	<script>
		function handleClick() {
			var xhr = new XMLHttpRequest();
			xhr.open("GET", "http://127.0.0.1:8088/api/?Function=ScriptStart&Value=Notfunk_Streamstart", true);
			xhr.onload = function () {
				if (xhr.readyState === 4) {
					if (xhr.status === 200) {
						alert(xhr.responseText);
					} else {
						alert("Error: " + xhr.statusText);
					}
				}
			};
			xhr.onerror = function () {
				alert("Error: Network Error");
			};
			xhr.send(null);
		}
	</script>
</head>
<body>
	<button onclick="handleClick()">Click me!</button>
</body>
</html>
Back to top
Medientechnik06  
#3 Posted : 2 years ago
Medientechnik06

Rank: Newbie

Groups: Registered
Joined: 2/1/2021(UTC)
Posts: 7
Germany
Location: Germersheim
Hey there, thanks for you help, but it ain't working
Back to top
nikosman88  
#4 Posted : 2 years ago
nikosman88

Rank: Advanced Member

Groups: Registered
Joined: 12/24/2021(UTC)
Posts: 629
Greece
Location: athens

Thanks: 152 times
Was thanked: 84 time(s) in 80 post(s)
Hello. How are try to run this code? I copy this code in a txt notepad file, save it,then change txt extension to .html and if i doubleclick it opens in firefox. When i press the button,it work ok
With this way im saying, i tried now your code and it work also ok. So your code is 100% correct. Of course i dont have your script so i renamed one of my scripts to your script name and it executes ok!!
So your problem is not your code that creates the button or the vmix command for script. Something else is wrong
Back to top
kross  
#5 Posted : 2 years ago
kross

Rank: Advanced Member

Groups: Registered
Joined: 10/31/2020(UTC)
Posts: 173
United States

Thanks: 4 times
Was thanked: 41 time(s) in 40 post(s)
If the OP is loading the html page from a web server, and not a local file, then I suspect the problem is same-origin policy, which prevents JavaScript from accessing URLs from anywhere but the same server that served the web page.
Back to top
doggy  
#6 Posted : 2 years ago
doggy

Rank: Advanced Member

Groups: Registered
Joined: 12/27/2012(UTC)
Posts: 5,358
Belgium
Location: Belgium

Thanks: 300 times
Was thanked: 989 time(s) in 821 post(s)
Originally Posted by: nikosman88 Go to Quoted Post
Hello. How are try to run this code? I copy this code in a txt notepad file, save it,then change txt extension to .html and if i doubleclick it opens in firefox. When i press the button,it work ok
With this way im saying, i tried now your code and it work also ok. So your code is 100% correct. Of course i dont have your script so i renamed one of my scripts to your script name and it executes ok!!
So your problem is not your code that creates the button or the vmix command for script. Something else is wrong


Can confirm it works (locally)
Back to top
Medientechnik06  
#7 Posted : 2 years ago
Medientechnik06

Rank: Newbie

Groups: Registered
Joined: 2/1/2021(UTC)
Posts: 7
Germany
Location: Germersheim
I try to Run IT local of course.

So as you say you usw ff, i'll give it a try with another browser. Tried with Chrome Up to now.

On thursday i can also try IT on another machine to get a comparison.

Thanks all for the Testing, so i know it hast to be Something local
Back to top
kross  
#8 Posted : 2 years ago
kross

Rank: Advanced Member

Groups: Registered
Joined: 10/31/2020(UTC)
Posts: 173
United States

Thanks: 4 times
Was thanked: 41 time(s) in 40 post(s)
On my computer, I couldn't get Firefox or Chrome to work, with a local HTML file. The debug console shows that vMix is actually returning a result, "Browser script access not permitted". On the Settings->Web Controller page, there are several check boxes that control access to various things, including where you're allowed to access them from. I tried a bunch of different combinations of check boxes, none of them worked.

Then, I changed the script to use the same IP address as what is shown in the Settings->Web Controller page (instead of 127.0.0.1), and now it works.

So give that a try :)
Back to top
Medientechnik06  
#9 Posted : 2 years ago
Medientechnik06

Rank: Newbie

Groups: Registered
Joined: 2/1/2021(UTC)
Posts: 7
Germany
Location: Germersheim
Thanks for your help guys. It was the "only accept from LAN"-Setting that seems to even block 127.0.0.1.

Now it works fine!
Back to top
Peter1000  
#10 Posted : 2 years ago
Peter1000

Rank: Advanced Member

Groups: Registered
Joined: 1/25/2019(UTC)
Posts: 305
Switzerland

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 = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'+"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>&nbsp;&nbsp; Monitor Control</H1>
	<button	id="btn1" onclick="send2vMix('&nbsp;Input '+btn1+' active', str1,'1')">Input1</button>
	<button	id="btn2" onclick="send2vMix('&nbsp;Input '+btn2+' active', str2,'2')">Input2</button>
	<button	id="btn3" onclick="send2vMix('&nbsp;Input '+btn3+' active', str3,'3')">Input3</button>
	<button	id="btn4" onclick="send2vMix('&nbsp;Input '+btn4+' active', str4,'4')">Input4</button>
	<button	id="btn5" onclick="send2vMix('&nbsp;Input '+btn5+' active', str5,'5')">Input5</button>
	<button	id="btn6" onclick="send2vMix('&nbsp;Input '+btn6+' active', str6,'6')">Input6</button>
	<button	id="btn7" onclick="send2vMix('&nbsp;Input '+btn7+' active', str7,'7')">Input7</button>
	<button	id="btn8" onclick="send2vMix('&nbsp;Input '+btn8+' active', str8,'8')">Input8</button>
	<p></p>

	<div id="dvvMixCMD" style="display: none">
		<p id="myText1" ></p>
	</div>
</body>
</html>
Back to top
thanks 2 users thanked Peter1000 for this useful post.
doggy on 3/25/2023(UTC), nikosman88 on 3/25/2023(UTC)
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Privacy Policy | Powered by YAF.NET | YAF.NET © 2003-2025, Yet Another Forum.NET
This page was generated in 0.153 seconds.