webpage with multiple streams
webpage with multiple streams
I have a few cameras going, some are on the same computer some are on different computers, but they are all on the same lan. Is there a way to make a webpage that has all the streams on it? Like get the address for each stream then put them all in a table or something?
-
- Moderator
- Posts: 1210
- Joined: Wed Jan 14, 2009 3:50 am
Try this: (change the frame source after "src=")
It's very basic, using iframes, but it works.
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
<title>Yawcam</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
background-color:#ffffff;
}
iframe {
width:320px;
height:240px;
border:0;
}
</style></head><body scroll="no">
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td width="320px" align="center"><iframe name="frame1" src="http://192.168.0.110:8888/" scrolling="no"></iframe></td>
<td width="320px" align="center"><iframe name="frame2" src="http://192.168.0.111:8888/" scrolling="no"></iframe></td>
<td width="320px" align="center"><iframe name="frame3" src="http://192.168.1.104:8888/" scrolling="no"></iframe></td>
</tr>
</table></body></html>
Re: webpage with multiple streams
This is a good start, but it's just the picture not the video stream. I managed to manipulate it enough so I could have each of the video stream's web-pages in a separate iframe but, is there anyway to just have the video stream only and discard the default yawcam built in webpage?
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head>
<title>Yawcam</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
background-color:#ffffff;
}
iframe {
width:750px;
height:600px;
border:0;
}
</style></head><body scroll="no">
<table cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td><iframe name="frame1" src="http://xxx.xxx.xxx.xxx:8081/" scrolling="no"></iframe></td>
<td><iframe name="frame2" src="http://xxx.xxx.xxx.xxx:8082/" scrolling="no"></iframe></td>
<td><iframe name="frame2" src="http://xxx.xxx.xxx.xxx:8083/" scrolling="no"></iframe></td>
</tr>
</table></body></html>
Re: webpage with multiple streams
Noob here.
Will this work externally?
I'd like to see all 5 yawcams (all different computers) on one webpage from outside my network.
How do I use this code?
Is there a local file i need to update? Which one?
Would the edited file need to be copied to each machine?
How is the "new" page accessed?
Sorry for the noob questions but I love the idea of seeing all my yawcams on one page
Will this work externally?
I'd like to see all 5 yawcams (all different computers) on one webpage from outside my network.
How do I use this code?
Is there a local file i need to update? Which one?
Would the edited file need to be copied to each machine?
How is the "new" page accessed?
Sorry for the noob questions but I love the idea of seeing all my yawcams on one page
-
- Posts: 64
- Joined: Sat Dec 27, 2008 7:01 pm
Re: webpage with multiple streams
Assuming you have 5 computres named pc1,pc2,pc3,pc4 and pc5, and already have yawcam stream working properly, and know how to open and redirect ports in your router, do it:
1 - go to pc2 and edit "yawcam>settings>edit settings>category>output>stream (change port from 8081 to 8082)
2 - do the same in pc3 , pc 4 and pc5, changing port from 8081 to 8083, 8084, 8085
3 - copy and edit this code, adding your external ip : (find your ip herehttp://www.whatismyip.com/)
4 - save this file named as "my_5_cams.html" in your pc1 in C:Users/your_username/.yawcam/stream
5- in your router settings, open ports 8081, 8082, 8083, 8084,8085 and redirect this ports to pc1,pc2, etc....
6 - Your cams will be visible at http://your_ip:8081/my_5_cams.html
1 - go to pc2 and edit "yawcam>settings>edit settings>category>output>stream (change port from 8081 to 8082)
2 - do the same in pc3 , pc 4 and pc5, changing port from 8081 to 8083, 8084, 8085
3 - copy and edit this code, adding your external ip : (find your ip herehttp://www.whatismyip.com/)
Code: Select all
<html>
<body>
<table width="450" border="1" align="center">
<tr>
<th scope="col"><iframe src="http://your_ip:8081" name="pc1" width="450" marginwidth="0" height="400" marginheight="0" align="top" scrolling="no"></iframe></th>
</tr>
<tr>
<td><iframe src="http://your_ip:8082" name="pc2" width="450" marginwidth="0" height="400" marginheight="0" align="top" scrolling="no"></iframe></td>
</tr>
<tr>
<td><iframe src="http://your_ip:8083" name="pc3" width="450" marginwidth="0" height="400" marginheight="0" align="top" scrolling="no"></iframe></td>
</tr>
<tr>
<td><iframe src="http://your_ip:8084" name="pc4" width="450" marginwidth="0" height="400" marginheight="0" align="top" scrolling="no"></iframe></td>
</tr>
<tr>
<td><iframe src="http://your_ip:8085" name="pc5" width="450" marginwidth="0" height="400" marginheight="0" align="top" scrolling="no"></iframe></td>
</tr>
</table>
<p align="center" class="text" style="font-size: 10px;">Powered by <a href="http://www.yawcam.com" target="_blank">www.yawcam.com</a></p>
</body>
</html>
5- in your router settings, open ports 8081, 8082, 8083, 8084,8085 and redirect this ports to pc1,pc2, etc....
6 - Your cams will be visible at http://your_ip:8081/my_5_cams.html
Re: webpage with multiple streams
Thomas... Thank you for your response.
This works perfectly and your instructions were extremely easy to follow.
Thank you again
cheers
This works perfectly and your instructions were extremely easy to follow.
Thank you again
cheers
Re: webpage with multiple streams
Hey there, just letting it be known that there is a windows software that is simple and free to use. Its called Jamcam4. look it up on this forum. I wrote it specificly to work with yawcam . the latest version (version 2.0.0) supports up to 12 cameras, all you need is the ip address and port. Cameras can be in local network, internet , or both at the same time. The download link is http://host-a.net/u/buntay/Setup%20Jamc ... 0.0.12.exe Hope this helps.
Buntay
Buntay