Web page with live video and image map overlay?


Active Member
Does anyone know of a product or a way to have a live video feed with clickable regions on the video screen, like an invisible imagemap overlay? I'd like to take a live digital video feed and be able to define areas on the screen/image to click with a mouse or use a finger-press on a touchscreen, to trigger some action.

Doesn't have to be web-based, but the first thing I thought of was something within the DHTML area. I'm not sure it can be done today... has anyone seen this?
This could be accomplished if the video feed isn't a java applet. If it's an applet it automitically assume the highest Z-Index in an HTML page. Do you have a video software package in mind?
Here's the problem with plain html: You're at the mercy of the player installed on the machine; for example if you embed an .avi file, the player may be Windows Media Player, Real Player, Quicktime, or something else. Often these players already trap mouseclicks on the video to pause or do something else.

You'd probably be able to do this with Flash, since you have more control over the player. I don't have any Flash development experience though.
I think you can do that with MainLobby today (flash). There is a camera.swf that gets put into a MainLobby scene. I am not sure if a MainLobby button (invisible) can be overlayed ontop of that window.

For IPCamera support, Cinemar produced scenes that had camera windows and Pan / Tilt buttons on the top/ bottom / sides of the window and a Capture button. These scenes will ship with MainLobby3 in a bit.
I've done this using javascript and html layering in the past. The only problem is, the javascript "video" feed is actually a series of still images and has rather low frame rate... the best I've ever go, even over 1 gigabit connection, is 10 fps. I've successfully used this script with both webcams connected to webcamxp (from which the script is derived) and with my dlink netcams... It will work with ANY webcam/ipcam or other video source that will display a constantly updated jpg image via http.

Here's the code:
<script LANGUAGE="JavaScript">
errorimg1= 0;
function LoadImage1()
        uniq1 = Math.random();
        document.images.webcam1.src = "cam_1.jpg?uniq="+uniq1;
function ErrorImage1()
        if (errorimg1>1){
              document.images.webcam1.onload = "";
              document.images.webcam1.src = "offline.jpg";
              uniq1 = Math.random();
            document.images.webcam1.src = "cam_1.jpg?uniq="+uniq1;
function DoIt1()
        window.setTimeout("LoadImage1();", 97);
	document.write('<img src="loading.jpg" id="webcam1" name="webcam1" onload="DoIt1()" onerror="ErrorImage1()" width=640 height=480 border=0 style="border-color:#000000; border-style:solid;">');

- replace "cam_1.jpg" with the url/name of the updated jpg image that will become your "video"
- replace "loading.jpg" and "offline.jpg" with the url/name of the images you want displayed when the video is loading or offline.
- replace the width and height values with the dimensions you want the video displayed in, regardless of the source's dimensions.

Here's a screencap I took when I used this script with layers to overlay a control pad over a videofeed:


You can also do neet things like use iframes to have multiple feeds displayed at once (for example, clicking "all" in my screencap would bring up a 9-camera grid from which you could view all cameras at once, and select one by clicking on it or its number.

I created the layers using dreamweaver. I'm not sure if it's possible to create layers without a good WYSIWYG html editor, becuase the coding for it is not very intuitive (I have a hard-enough time creating nested frames in code as it is).

I created the "controls" using photoshop, cut 'em into pieces,and then saved it all as a web page.
Thanks for the info, everyone. I guess it's going to take a special program or browser written to specifically work that way rather than trying to find a way to do it in web protocols. I wish I had the development skills to do this. Unfortunately, I'm more of an idea man.

As I see it, it would need a browser with the capability to show a live video feed (or a movie) as the background on the page, and the imagemap overlay would be transparent. Part of the coding would allow the backgorund "feed" to be changed as the imagemap "buttons" are clicked.

Like a TV with a touchscreen on it, where invisible hotspots were defined in coordination with the video image or channel... hmmmm... a second monitor?

Can you display live video or tv as the desktop background?
huggy, give the script I posted a try. The framerate may be better than what I got depending on the machine you're using. If you have a powerful machine and use a webcam-type program that can handle multiple feeds (like webcamxp, and that other.. activewebcam? i think?)

Then all you have to do is get a PCI or USB input device to get video to the software, and have it streamed to the various devices that will display it (itself included).

You can create a frames page (to eliminate scrollbars) have the video scaled to the full resolution of your monitor(s) (will require a version of the page for eachmonitor resolution) and put your browser in kiosk mode for full screen video that doesn't look like it's in a browser.

You can do the same thing I did with my layered control using invisible elements, so you won't actually see the buttons/hotspots on the screen.

If I understand correctly, you want to be able to choose from among different feeds by touching different hotspots on the screen, all you'd have to do is make each hotspot a link with the video window as its target and it will work.

However, if you want the hotspots to change dynamically based on content, you're waaaaaaaaaay beyond anything that I know how to do.. I would imagine somethinglike that wold require a ton of computing power becuase every frame of video would have to be analyzed in realtime.

Hopefully what I've offered will help :angry: