Resizing Active X video using variable

Forum Moderators: open

Message Too Old, No Replies

Resizing Active X video using variable

Aichibo

12:44 pm on Dec 16, 2009 (gmt 0)

As the title says, I have an activex powered video stream which I would like to be able to change the size of. I can change the size of the video by changing the values of the Height and Width in this code:

but that is in the code and not very accessible from the front end. So I thought about putting in a drop down menu which is shown here:

So my question is this: Firstly, how can I relate for example.. 50% to 720 x 576 and then when I have that value, how can I put it in the Width and height boxes so that the video is the correct size?

Thanks in advance

[edited by: incrediBILL at 4:13 pm (utc) on Dec. 16, 2009]
[edit reason] exemplified [/edit]

rocknbil

7:57 pm on Dec 16, 2009 (gmt 0)

Welcome aboard Aichibo, I usually import video into a Flash object, so don't even know if this will work - but it's something you can try. It works on the img element well enough . . . to test, change "some-image" to any image you have.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<!-- put doctype all on ONE LINE --> 
<html lang="en"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Untitled</title> 
<script type="text/javascript"> 
// These are GLOBALS so you can always 
// keep track of what the original 100% is. 
// Otherwise it will just resize on "what it is now" 
var origW,origH; 
// Don't do this inline, or if you do, move to the bottom 
// AFTER "my-object" has rendered. This is why window.onload() 
// works best here. 
window.onload=function() { 
 if (document.getElementById('my-object')) { 
 origW = document.getElementById('my-object').width; 
 origH = document.getElementById('my-object').height; 
 } 
}; // <-- not a typo 
// For demo only, eliminate this function and button altogether. 
function getCurrentSize() { 
 if (document.getElementById('my-object')) { 
 var obj = document.getElementById('my-object'); 
 var w = obj.width; 
 var h= obj.height; 
 alert('Width is ' + w + ', height ' + h); 
 } 
 else { alert('Oops! no my-object!'); } 
 return false; 
} 
// This is the "resizer" 
function resizeImg(selectObject) { 
 if (document.getElementById('my-object')) { 
 var obj = document.getElementById('my-object'); 
 var ind=selectObject.selectedIndex; 
 w = parseInt((selectObject.options[ind].value*origW)/100); 
 h = parseInt((selectObject.options[ind].value*origH)/100); 
 obj.width=w; 
 obj.height=h; 
 } 
 else { alert('Oops! no my-object!'); } 
} 
</script> 
</head> 
<body> 
<form action="" onSubmit="return getCurrentSize();"> 
<select name="Zoom" id="Zoom" onChange="resizeImg(this);"> 
<option value="50">50%</option> 
<option value="75">75%</option> 
<option value="100" selected>100%</option> 
<option value="125">125%</option> 
<option value="150">150%</option> 
<option value="175">175%</option> 
<option value="200">200%</option> 
</select> 
<p><img id="my-object" src="some-img.jpg" width="494" height="480" alt=""></p> 
<p><input type="submit" value="Get Current Size"></p> 
</form> 
</body> 
</html>

To apply on your video, just use the <object> instead of the img and add the ID:

Make sure any CSS applied to the container holding it doesn't muck up the works.

Note the difference in my select items - keep it simple. :-) Use the select option values as actual percentages in your calculations rather than mapping them (1-50%, etc.)

Aichibo

9:23 am on Dec 17, 2009 (gmt 0)

Thanks for the reply, I've been working through the code to try and implement it into my solution and there are a couple of bits which I'm slightly stuck on. The video code itself has quite a few variables too so I put them with the code which you gave me and I don't know whether there are any conflicts?

I also didn't know whether to replace the img part with my object as the different parts of it didn't align properly and I didn't really fancy butchering the whole code apart trying to make it work.

Is there any chance that you could have a look through the entire code and tell me where I've gone wrong? Cheers:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Audicam</title>
<style type="text/css">
<!--
.style1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
}
-->
</style>
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<div align="right"><img src="audirings.jpeg" align="right" /></div> 
<script type="text/javascript"> 
// These are GLOBALS so you can always 
// keep track of what the original 100% is. 
// Otherwise it will just resize on "what it is now" 
var origW,origH; 
// Don't do this inline, or if you do, move to the bottom 
// AFTER "my-object" has rendered. This is why window.onload() 
// works best here. 
window.onload=function() { 
 if (document.getElementById('ICLPlayer')) { 
 origW = document.getElementById('ICLPlayer').width; 
 origH = document.getElementById('ICLPlayer').height; 
 } 
}; // <-- not a typo 
// This is the "resizer" 
function resizeImg(selectObject) { 
 if (document.getElementById('ICLPlayer')) { 
 var obj = document.getElementById('ICLPlayer'); 
 var ind=selectObject.selectedIndex; 
 w = parseInt((selectObject.options[ind].value*origW)/100); 
 h = parseInt((selectObject.options[ind].value*origH)/100); 
 obj.width=w; 
 obj.height=h; 
 } 
 else { alert('Oops! no ICLPlayer!'); } 
} 
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="/css/GM8120.css" rel="stylesheet" type="text/css">
<body onload="OnLoad()" onbeforeunload="StopAlert()" onscroll="redraw()">
<script type="text/javascript">
AC_AX_RunContent( 'classid','clsid:273213DD-3FB6-4EAB-9322-B47F74FAFEA4','width','0','height','0','id','alarm' ); //end AC code
</script><noscript><object classid="clsid:273213DD-3FB6-4EAB-9322-B47F74FAFEA4" width=0 height=0 id="alarm">
</object></noscript>
 
<script language="JavaScript"> 
function InitCH(){ 
var i = document.ICLPlayer.GetCH(); 
videoset.CHList.options.selectedIndex = i-1; 
} 
 
function OnClickCHUP(){ 
document.ICLPlayer.CHUP(); 
videoset.CHList.options.selectedIndex = document.ICLPlayer.GetCH()- 1; 
} 
 
function OnClickCHDOWN(){ 
document.ICLPlayer.CHDOWN(); 
videoset.CHList.options.selectedIndex = document.ICLPlayer.GetCH()- 1; 
} 
 
function PlayAlert(Ip,Sample,Channels) 
{ 
alarm.voice(1, Ip, Sample, Channels); 
 var butt=document.getElementById("voiceon").disabled=true;
 var butt=document.getElementById("voiceoff").disabled=false;
} 
 
function StopAlert() 
{ 
alarm.voice(0, "", 0, 0); 
 document.getElementById("voiceoff").disabled=true;
 document.getElementById("voiceon").disabled=false;
} 
 
function Record_Enable() 
{
document.getElementById("mrec").disabled=false;
}
function Record_Disable() 
{
document.getElementById("mrec").disabled=true;
setTimeout("Record_Enable()",7000);
}
function Capture_Enable() 
{
document.getElementById("msnap").disabled=false;
}
function Capture_Disable() 
{
document.getElementById("msnap").disabled=true;
setTimeout("Capture_Enable()",1000);
}
function UserEvent(type)
{
 var httpRequest=false;
 if ( window.XMLHttpRequest) {
 httpRequest = new XMLHttpRequest();
} else if ( window.ActiveXObject ) {
 var msxmls = [ "MSXML2.XMLHttp.4.0",
 "MSXML2.XMLHttp.3.0",
 "MSXML2.XMLHttp",
 "Microsoft.XMLHttp"];
 for ( i=0; i< msxmls.length; i++ ) {
 try { 
 httpRequest = new ActiveXObject(msxmls[i]);
 break;
 } catch ( e ) { httpRequest=null; }
 }
 }
var stamp = new Date();
var url ="http://192.168.0.100/cgi-bin/activex.cgi";
url = url + type + "&time=" + stamp;
httpRequest.open("GET", url, true);
httpRequest.send(null);
if(type=="record") 
Record_Disable();
if(type=="snapshot") 
Capture_Disable();
}
function OnLoad()
{
StopAlert();
} 
function redraw()
{
document.ICLPlayer.style.display = 'none'
document.ICLPlayer.style.display = 'block'
}
</script>
</head> 
<body> 
<form action="" onSubmit="return getCurrentSize();"> 
<select name="Zoom" id="Zoom" onChange="resize<object>"> 
<option value="50">50%</option> 
<option value="75">75%</option> 
<option value="100" selected>100%</option> 
<option value="125">125%</option> 
<option value="150">150%</option> 
<option value="175">175%</option> 
<option value="200">200%</option> 
</select> 
<p><img id="ICLPlayer" src="audirings.jpeg" width="494" height="480" alt=""></p> 
</form> 
<FORM name="videoset" ACTION=http://192.168.0.100/cgi-bin/activex.cgi METHOD=POST>
<table border=0 width=80%>
<table border=0 width=80%>
<object classid="clsid:6F5A0B29-5C26-49A1-9462-4C9910F085F3" codebase="http://192.168.0.100/ICLAXPlayer.cab" width="720" height="576" id="ICLPlayer" events="True">
<param name="URL" value="rtsp://192.168.0.100:554"/>
<param name="Stream" value="1"/>
<param name="Audio" value="1"/>
<param name="Product" value="0"/>
<param name="Language" value="0"/>
<param name="TCP" value="True"/>
<param name="Estimation" value="False"/>
<param name="Width" value="720"/>
<param name="Height" value="576"/>
<param name="UserName" value="admin"/>
<param name="Passwd" value="admin"/>
<param name="CtrlPort" value="21"/>
<param name="Autoreconnect" value="1"/>
<br><br><br><br><br><font color=red>If&nbsp;you&nbsp;see&nbsp;this&nbsp;message,&nbsp;your&nbsp;browser&nbsp;is&nbsp;not&nbsp;support&nbsp;or&nbsp;disable&nbsp;ActiveX.</font><br><br><br><br><br>
</object>
<tr><td NOWRAP>
Send&nbsp;Voice&nbsp;to&nbsp;IPCam/Video&nbsp;Server
<input type="button" class=inputButton value="On" id="voiceon" OnClick="PlayAlert('192.168.0.100',16000,1);">
<input type="button" class=inputButton value="Off" id="voiceoff" disabled OnClick="StopAlert();">
</td></tr>
</form>
<div class="style3">
 <div align="right" class="style4 style1">Direct Service Reception</div>
</body>
</html>

rocknbil

7:43 pm on Dec 17, 2009 (gmt 0)

OMG you are using AC_RunActiveContent.js, the MM/Adobe library . . . runs for the hills . . .

Seriously, you often can't just plop in code and expect everyone in the document to play nicely. :-) My example isolated the issue and this is what I suggest you do. Pull this out and put it in a document by itself,

Add **only** the elements you need to get it working and playing.

Now go back and re-add the code I posted, see if it works. If you can get it to work, then slowly start re-adding it to your document.

One thing I'll say, you have a little problem here:

....yer.cab" width="720" height="576" id="ICLPlayer"....

There are two attributes assigning width and height. One of these sets needs to go away, or, if that breaks it, you'll have to modify the Javascript to access the params for width and height at the same time you modify the w/h of the object. Just remember that when accessing page objects, Width, width, and WiDth are all different things (I think . . . as far as accessing them via JS.)

Aichibo

9:03 am on Dec 18, 2009 (gmt 0)

I did wonder that why it had both but as I think I mentioned before, the coding for the video stream is from a pre made system.. I'm just trying to implement it the best I can :(

I've had a fiddle with those values which you pointed out at the bottom of your post and if you just ignore the second set of paramters and just change the first ones then they are the only ones which are needed to change the size of the video. I'll just try deleting the second set as they don't seem to be doing anything ;)

Aichibo

9:26 am on Dec 18, 2009 (gmt 0)

The bit which I'm stuck on is what to put in the "

onChange="resizeobject(this);">

"
part. I got it to work fine with the image (thanks for that) but unfortuately, I don't know what to change the resizeImg to. It just keeps erroring up as "Object expected" -_-

Any ideas?

rocknbil

7:40 pm on Dec 18, 2009 (gmt 0)

If you have this,

onChange="resize<object>">

or this,

"onChange="resizeobject(this);">

The "Object" it's "expecting" is the function iteslf:

function resizeImg(selectObject) {
....

One or the other has to change. Note it's case sensitive. So what could work is

"onChange="resizeobject(this);">

then

function resizeobject(selectObject) {

Do not remove the "this" keyword as in the first example above. What is happening here is we are passing a reference to the select object itself, from which we get those percentage values. It then does a document.getElementById on the <object> and resets the width and height attributes (looks like you have that part correct in your code.)

Aichibo

9:14 am on Dec 21, 2009 (gmt 0)

I did do that before but it just comes up with: "Object expected on line 48" :(

when you look at the part which has "function resizeImg(selectObject) { " thats in the script in the head. Isn't that where its meant to be or do I have to add it in again?

rocknbil

8:33 pm on Dec 21, 2009 (gmt 0)

No, it should only be needed once.

I don't have your actual object, but I've modified your code dump above to the minimal items. I've only added the below items, and noted a couple problems. Paste this in a test file, compare with your live one.

- removed the CSS, JS, etc. that I don't have and is not relevant to this task.

- You had a div inside the head, of course, that's not allowed.

- various unquoted attributes.

- Added an alert in the renamed to "resize" function to make sure it works. Remove it when done.

- Removed the width/height params, as you said they weren't required.

- Here's a biggie: You have Two items with the target id, ICLPlayer. You can only have one element with a given id on the same page. On first test, this was causing the document.getElementById to give a value of zero for ICLPlayer. I changed the name of the image one to ICLPlayerImage.

- Added a border to the object, since I can't see it, it tells me where it is. Remove it.

- Since you have the onSubmit in there still, I added the button, "checkobject size" to see if the object was actually accepting the changes. It is. Remove the button.

- Related to that, I see you've removed checkCurrentSize, maybe this is the source of your error. Re-added it.

Bolded key points below. Run this verbatim in your browser.

Although it appears to be "working," in that the object is accepting the width and height as evidenced by the "check opbject size" button. I've still no idea if it will work with the actual object.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Audicam</title> 
<style type="text/css"> 
<!-- 
.style1 { 
font-family: Geneva, Arial, Helvetica, sans-serif; 
font-weight: bold; 
font-size: 18px; 
} 
--> 
</style> 
<script type="text/javascript"> 
var origW,origH; 
window.onload=function() { 
 if (document.getElementById('ICLPlayer')) { 
 origW = document.getElementById('ICLPlayer').width; 
 origH = document.getElementById('ICLPlayer').height; 
 } 
}; // <-- not a typo 
// This is the "resizer" 
function resize(selectObject) { 
 if (document.getElementById('ICLPlayer')) { 
 var obj = document.getElementById('ICLPlayer'); 
 var ind=selectObject.selectedIndex; 
 w = parseInt((selectObject.options[ind].value*origW)/100); 
 h = parseInt((selectObject.options[ind].value*origH)/100); 
 obj.width=w; 
 obj.height=h; 
 // remove or comment // this after testing 
 alert('width should be ' + w + ' height should be ' + h); 
 } 
 else { alert('Oops! no ICLPlayer!'); } 
} 
<!-- re-added this, if you remove, change form submit like so 
 ...form action="" onSubmit="return false;" ...  
 --> 
function getCurrentSize() {  
 if (document.getElementById('ICLPlayer')) {  
 var obj = document.getElementById('ICLPlayer');  
 var w = obj.width;  
 var h= obj.height;  
 alert('Width is ' + w + ', height ' + h);  
 }  
 else { alert('Oops! no ICLPlayer!'); }  
 return false;  
} 
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
</head> 
<body> 
<div align="right"><img src="audirings.jpeg" align="right" /></div> 
<form action="" onSubmit="return getCurrentSize();"> 
<select name="Zoom" id="Zoom" onChange="resize(this)"> 
<option value="50">50%</option> 
<option value="75">75%</option> 
<option value="100" selected>100%</option> 
<option value="125">125%</option> 
<option value="150">150%</option> 
<option value="175">175%</option> 
<option value="200">200%</option> 
</select> 
<!-- remove this --> 
<input type="submit" value="check object size"> 
<p><img id="ICLPlayerImage" src="audirings.jpeg" width="494" height="480" alt=""></p> 
</form> 
<!-- note the quotes, always quote attributes, you are using XHTML  
doctype so this is even more important.--> 
<FORM name="videoset" ACTION="http://000.123.456.789/cgi-bin/activex.cgi" METHOD="POST"> 
<table border=0 width="80%"> 
<tr><td> 
<object border="1" classid="clsid:6F5A0B29-5C26-49A1-9462-4C9910F085F3"  
codebase="http://000.123.456.789/ICLAXPlayer.cab" width="720" height="576" id="ICLPlayer" events="True"> 
<param name="URL" value="rtsp://000.123.456.789:554"/> 
<param name="Stream" value="1"/> 
<param name="Audio" value="1"/> 
<param name="Product" value="0"/> 
<param name="Language" value="0"/> 
<param name="TCP" value="True"/> 
<!-- removed w/h params --> 
<param name="Estimation" value="False"/> 
<param name="UserName" value="admin"/> 
<param name="Passwd" value="admin"/> 
<param name="CtrlPort" value="21"/> 
<param name="Autoreconnect" value="1"/> 
<!-- more missing quotes, font is deprecated, use span, better yet, a style applied to <p> 
what's with all the &nbsp? --> 
<br><br><br><br><br><font color=red>If&nbsp;you&nbsp;see&nbsp;this&nbsp;message, 
&nbsp;your&nbsp;browser&nbsp;is&nbsp; 
not&nbsp;support&nbsp;or&nbsp;disable&nbsp;ActiveX.</font><br><br><br><br><br> 
</object> 
</td></tr> 
<tr><td NOWRAP> 
Send&nbsp;Voice&nbsp;to&nbsp;IPCam/Video&nbsp;Server 
<input type="button" class=inputButton value="On"  
id="voiceon" OnClick="PlayAlert('000.123.456.678',16000,1);"> 
<input type="button" class=inputButton value="Off" id="voiceoff" disabled OnClick="StopAlert();"> 
</td></tr> 
</table> 
</form> 
</body> 
</html>

Aichibo

9:41 am on Dec 22, 2009 (gmt 0)

Hey, thanks for your reply.

The code worked brilliant except for one minor problem on our end :(

The object resizes brilliant however the video doesn't scale within it. When I was trying to resize it before, I changed the:

"codebase="http://example.com/ICLAXPlayer.cab" width="720" height="576""

width and height bit and that resized the object and also the video inside. Is there any way of configuring the resize (this) to resize these parameters not the whole object?

Thanks so much for the help so far, you've been a star :)

Aichibo

12:10 pm on Dec 22, 2009 (gmt 0)

Solved, thanks for all the help :)

rocknbil

8:54 pm on Dec 22, 2009 (gmt 0)

And years from now, someone with a similar problem will see this thread, read the post above, and say "WHAT? WHAT? WHAT WAS IT?"

It's like watching "the 6th Sense" and not seeing the end. :-) What was the final solution?

swa66

8:59 pm on Dec 22, 2009 (gmt 0)

Wondering why you'd want to use technology (ActiveX) you know only less than 70% of users out there will be using a browser that supports it at all.

@rocknbill: in a few years video will be html5 ...

Aichibo

8:47 am on Dec 23, 2009 (gmt 0)

@rocknbil

Well actually, while I was working on trying to get your solution working, I was reading into Javascript at the same time. I thought at the start, the best way to do this would be to use the "document.write" function to enter the new dimensions into the video parameters. After lots of fiddling.. behold!

<script language="JavaScript">       
var videowidth ;
var videoheight;
var scnWid,scnHei;
GetVideoSize();
function GetVideoSize()
{
 if (self.innerHeight) // all except Explorer
 {
  scnWid = self.innerWidth;
  scnHei = self.innerHeight;
 }
 else if (document.documentElement && document.documentElement.clientHeight)
  // Explorer 6 Strict Mode
 {
  scnWid = document.documentElement.clientWidth;
  scnHei = document.documentElement.clientHeight;
 }
 else if (document.body) // other Explorers
 {
  scnWid = document.body.clientWidth;
  scnHei = document.body.clientHeight;
 }
videoheight = scnHei - 160;
videowidth = (videoheight /3) * 4;
if (scnWid < videowidth)
{
videowidth = scnWid * 0.6;
videoheight = (videowidth /4) * 3;
}
}
</script>
<script type="text/javascript">
document.write('<object classid="clsid:6F5A0B29-5C26-49A1-9462-4C9910F085F3"');
document.write('codebase="http://192.168.16.100/ICLAXPlayer.cab"');    
document.write('width="'+videowidth+'" ');
document.write('height="'+videoheight+'" id="ICLPlayer" events="True">');
document.write('<param name="URL" value="rtsp://example.com:554"/>');
document.write('<param name="Stream" value="1"/>');
document.write('<param name="Audio" value="1"/>');
document.write('<param name="Product" value="0"/>');
document.write('<param name="Language" value="0"/>');
document.write('<param name="TCP" value="True"/>');
document.write('<param name="Estimation" value="False"/>');
document.write('<param name="Width" value="720"/>');
document.write('<param name="Height" value="576"/>');
document.write('<param name="UserName" value="admin"/>');
document.write('<param name="Passwd" value="admin"/>');
document.write('<param name="CtrlPort" value="21"/>');
document.write('<param name="Autoreconnect" value="1"/>');
document.write('<br><br><br><br><br><font ');
document.write('color=red>If&nbsp;you&nbsp;see&nbsp;this&nbsp;message,&nbsp;your&nbsp;browser&nbsp;is&nbsp;not&nbsp;');
document.write('support&nbsp;or&nbsp;disable&nbsp;ActiveX.</font><br><br><br><br><br>');
document.write('</object>');
</script>

@swa66 Like I said earlier, I have to use what the video card allows. Alot of its functions are run using activex and because of this.. I have to follow suit