Video Streaming Demo

rwc_2001 posted this at 15:44 — 14th February 2002.

They have: 2 posts

Joined: Feb 2002

Hi,

I'm trying to get a quick Show&Tell demo put together to get across what I want to do for the GUI for our upcoming camera controller project (we build ultra-high-speed industrial cameras - up to 100,000 frames per second).

We need to display multiple cameras at once, and identify which cameras are being viewed. I don't know squat about Web technologies (I'm used to C/C++/Assembler stuff).

For the demo, I'm using the TinyPTC Java demo applet from http://www.gaffer.org/tinyptc/ to generate a frame that contains static (to let the viewer know that no camera is "there", and that this is only a demo). In the real system, a Netscape-compatible plugin will provide streaming video feeds (and I'll replace the APPLET tags with EMBED tags or links to URIs with an appropriate MIME type).

I can display 1, 4 (2x2), or 16 (4x4) cameras tiled within a fixed 752x564 area located in the top left corner of an 800x600 display. Below this area, I have links/buttons to select the number of cameras to display, and an area to display the ID of the camera under the mouse.

I've tried many ways to implement this. Ideally, I'd like to avoid filling up the history list. And I'd also like this to work under Netscape 4.x, Mozilla, IE 5.x, IE 6.0, and Opera. And I'd like it to be platform-independent (the above browsers on all supported hardware and OS platforms).

So far, it is easiest to get what I want to happen using IE, and second easiest using Opera.

Below is what I have now (after MUCH evolution and hacking). To use this code, just dump the following files into the TinyPTC Java applet demo (http://www.gaffer.org/tinyptc/TinyPTC-Java-0.2.zip) directory.

Any suggestions?

File: DemoFrames.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
	<title>Camera Display Simulation</title>
</head>

<frameset rows="584,*">
	<frame src="video.htm" name="videoFrame" >
	<frame src="text.htm"  name="textFrame"  >
<!--
	<frame src="video.htm" name="videoFrame" scrolling="auto" noresize marginwidth="0" marginheight="0" frameborder="0">
	<frame src="text.htm"  name="textFrame"  scrolling="auto" noresize marginwidth="0" marginheight="0" frameborder="0">
-->
</frameset>

</html>

File: text.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

	&lt;script language="javascript"&gt;
		<!--
		function showVideo(num) {
			var loc = "video.htm\?";
			loc += num;
			alert(loc);
		    parent.videoFrame.location.href = loc;
		}
		//-->
	&lt;/script&gt;

</head>

<body>
<form name="Camera">
<input type="text" name="ID" value="Camera ID" >
</form>

	<a href="javascript:showVideo(1)">One</a>    
	<a href="javascript:showVideo(4)">Four</a>    
	<a href="javascript:showVideo(16)">Sixteen</a>  
<br>
	<A HREF="video.htm?1" TARGET='videoFrame'>One</a>    
	<A HREF="video.htm?4" TARGET='videoFrame'>Four</a>    
	<A HREF="video.htm?16" TARGET='videoFrame'>Sixteen</a>    
<!--
	<form method="post">
		  <input type="submit" value="One" onsubmit="showVideo(1)">
		  <input type="submit" value="Four" onsubmit="showVideo(4)">
		  <input type="submit" value="Sixteen" onsubmit="showVideo(16)">
	</form>
-->

</body>

</html>

File: video.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

	&lt;script LANGUAGE="JavaScript"&gt;
		<!-- Begin
		var description = new Array();
		description[0]  = "Camera 01";
		description[1]  = "Camera 02";
		description[2]  = "Camera 03";
		description[3]  = "Camera 04";
		description[4]  = "Camera 05";
		description[5]  = "Camera 06";
		description[6]  = "Camera 07";
		description[7]  = "Camera 08";
		description[8]  = "Camera 09";
		description[9]  = "Camera 10";
		description[10] = "Camera 11";
		description[11] = "Camera 12";
		description[12] = "Camera 13";
		description[13] = "Camera 14";
		description[14] = "Camera 15";
		description[15] = "Camera 16";

		function SetCameraID(id)
		{
			parent.textFrame.document.Camera.ID.value=description[id];
			alert("Set CameraID="+description[id]);
			return true;
		}
		//  End -->
	&lt;/script&gt;

	&lt;script LANGUAGE="JavaScript"&gt;
		<!-- Begin
		function MakeVideoWindows(numWindows)
		{
			if ((numWindows < 1) || (numWindows > 16))
				alert("MakeVideoWindows(): Number of windows requested is < 1 or > 16!");
			else
			{
				var retStr = "<table cellspacing=0 cellpadding=0 border=2> "
				
				var dimen = Math.ceil(Math.sqrt(numWindows));
				var w = 752/dimen - (dimen * 0);
				var h = 564/dimen - (dimen * 0);
				var val = 0;
				var x, y;
				for (x = 0; x < dimen; x++)
				{
					retStr += "<tr> ";
					for (y = 0; y < dimen; y++)
					{
						val = (x * dimen) + y;
						retStr += "<td> <a onMouseOver=\"SetCameraID(";
//						retStr += "<td> <a onMouseOver=\"Words.innerHTML = description[";
						retStr += val;
						retStr += ");return true;\"";
//						retStr += "]\"";
						retStr += " onClick=\"SetCameraID(";
						retStr += val;
						retStr += ");return true;\" href=\"link";
						retStr += val + 1;
						retStr += ".htm\"> <applet code=\"test\" width=\"";
						retStr += w;
						retStr += "\" height=\"";
						retStr += h;
						retStr += "\"> </applet> <td> ";
					}
					retStr += "</tr> ";
				}
				retStr += "</table> ";
			}
//			retStr += "<center> ";
//			retStr += "<a id=\"Words\">Move the mouse over a video window to see the Camera ID here.</a> ";
//			retStr += "<br> <a href=\"javascript: window.location.reload()\">Reload Window</a> ";
//			retStr += "</center> ";

			return retStr;
		}
		//  End -->
	&lt;/script&gt;

</head>


<body>

	&lt;script language="JavaScript"&gt;
		<!--
		if (location.search.length > 0)
		{
			document.write(MakeVideoWindows(location.search.substring(1)));
		}
		else alert("No search string passed!");
		if (parent.textFrame.document.Camera.ID.value)
			alert("parent.textFrame.document.Camera.ID.value="+parent.textFrame.document.Camera.ID.value);
		else
			alert("parent.textFrame.document.Camera.ID.value NOT visible");
		//-->
	&lt;/script&gt;

</body>

</html>


<!--

&lt;script language="JavaScript"&gt;
-->
<!--
//setting the value:

//getting the value:
var myVariableName = document.myFormName.myFormFieldName.value;
//-->
<!--
&lt;/script&gt;
-->

detox posted this at 13:28 — 15th February 2002.

They have: 571 posts

Joined: Feb 2001

Whoa !!!

nothing like a big first post!

Have to finish up some work now so will look at it possibly late tonight or early tommorrow

rwc_2001 posted this at 16:38 — 15th February 2002.

They have: 2 posts

Joined: Feb 2002

Thanks!

I need to tightly control my screen real estate. The demo will be displayed full-screen (no window trimming) on an 800x600 LCD monitor (on a Viewsonic ViewPad1000, see http://www.viewsonic.com/products/viewpad1000.cfm).

I need to be able to display the following:

1. The name of the camera the mouse is currently hovering over. This may be done either via text adjacent to the video area, or by floating text (preferred).

2. Three buttons, to select 1x, 2x2 or 4x4 display modes. Only two of the three buttons will be active at any given time, since one of the video modes will always be in use.

For the demo, there need only be 16 distinct cameras. Clicking on a camera in 2x2 or 4x4 mode should cause that camera to immediately be displayed in 1x mode. In 2x2 mode, cameras 01-04 may always be displayed, and if 4x4 mode, cameras 01-16 will be displayed. Any camera may be displayed in 1x mode.

The video resolutions are:
1x = 752x564
2x2 = 376x282
4x4 = 188x141

All pixels must be displayed in 1x mode, and I've selected a border of 2. The outer border shouldn't move at all in any of the other modes, which means some pixels may need to be shaved from the edges of the video in the 2x2 and 4x4 modes: This is OK.

For the demo, IE 5.x may be assumed, though since the "real" system will have the video delivered via a Netscape plugin, IE 6.x cannot be used until it works with Netscape plugins. I'd also like the "real" system to be browser and platform independent, so I'd like to support the current and one-release-prior versions of the top four browsers (IE 5.x, Netscape 6.x/4.7x, Mozilla 0.9x, and Opera 5/6) on the top three platforms (Windows 9x/2K/XP, Mac9/X, and Linux/BSD).

This leads to all the expected cross-browser and cross-platform issues. Of particular importance is the width of borders: Does a border of 2 consume the same number of pixels on all browsers on all platforms? If not, then a border of 0 will need to be used, and the border will have to be handled manually, either via a much more complex table, or via background color/image and centered video.

I'm using 1st Page as my development environment, though I'm looking at Active State's Komodo for JavaScript development. I'm also using TidyHTML and online syntax checkers to improve my code. Ideally, I'd like my pages to be compatible with the "Viewable on Any Browser" campaign (http://www.anybrowser.org/campaign/). Well, not the text browsers...

Thanks again,

-BobC